123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299 |
- $(window).load(function(){
- $(".loading").fadeOut()
- })
-
- /****/
- /****/
- $(document).ready(function(){
- var whei=$(window).width()
- $("html").css({fontSize:whei/20})
- $(window).resize(function(){
- var whei=$(window).width()
- $("html").css({fontSize:whei/20})
- });
- });
-
- $(function () {
- echarts_1()
- echarts_2()
- echarts_3()
- function echarts_1() {
- var myChart = echarts.init(document.getElementById('echart1'));
- option = {
- tooltip: {
- trigger: 'item',
- formatter: "{b} : {c} ({d}%)"
- },
- visualMap: {
- show: false,
- min: 500,
- max: 600,
- inRange: {
- //colorLightness: [0, 1]
- }
- },
- series: [{
- name: '分布',
- type: 'pie',
- radius: ['30%', '60%'],
- center: ['50%', '50%'],
- color: ['#f8b62c', '#FE5050', '#0086e5', '#57bc2f'],
- data: [{
- value: 70,
- name: '微信'
- },
- {
- value: 50,
- name: '支付宝'
- },
- {
- value: 20,
- name: '银行卡'
- },
- {
- value: 15,
- name: '其它'
- }
- ].sort(function(a, b) {
- return a.value - b.value
- }),
- roseType: 'radius',
- label: {
- normal: {
- formatter: ['{d|{d}%}', '{b|{b}}'].join('\n'),
- rich: {
- d: {
- color: 'rgb(241,246,104)',
- fontSize: 14,
- fontWeight:'bold',
-
- },
- b: {
- color: 'rgb(98,137,169)',
- fontSize: 12,
-
- },
- },
- }
- },
- labelLine: {
- normal: {
- lineStyle: {
- color: 'rgb(98,137,169)',
- },
- smooth: 0.2,
- length: 5,
- length2: 9,
- }
- },
- itemStyle: {
- normal: {
- shadowColor: 'rgba(0, 0, 0, 0.1)',
- shadowBlur: 50,
- }
- }
- }]
- };
- // 使用刚指定的配置项和数据显示图表。
- myChart.setOption(option);
-
- window.addEventListener("resize",function(){
- myChart.resize();
- });
- }
-
- function echarts_3() {
- // 基于准备好的dom,初始化echarts实例
- var myChart = echarts.init(document.getElementById('echart3'));
-
-
- option = {
- color: ['#1aa1ff', '#31c17b', '#ff6535'],
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
- },
- grid: {
- left: '10',
- top:'10%',
- right: '0%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: {
- data: ['2014', '2015', '2016', '2017', '2018', '2019'],
- axisLine: {show:false,},
- axisLabel: {
- color: 'rgba(255,255,255,.6)',
- fontSize: 14
- }
- },
- yAxis: {
- //name: "(人)",
- splitNumber:4,
- nameTextStyle: {
- color: 'rgba(255,255,255,.6)',
- fontSize: 14
- },
- axisLine: { show:false, },
- axisLabel: {
- color: 'rgba(255,255,255,.6)',
- fontSize: 14
- },
- splitLine: {
- lineStyle: {
- color: "rgba(255,255,255,.1)",
- type: "dotted"
- }
- },
- //interval:100,
- //max:500
- },
- series: [{
- type: 'bar',
- barWidth: '30',
- itemStyle: {
- normal: {
- barBorderRadius: 2,
- color: function(params) {
- var colorList = [
- '#0074c2','#00b59d','#00be2b','#abd300','#f4e000',
- '#ffab00','#ff7100','#f00c00','#c90061', '#c900c7','#C6E579','#F4E001','#F0805A','#26C0C0'
- ];
- return colorList[params.dataIndex]
- },
- label: {
- show: true,
- position: 'top',
- formatter: '{c}',
- color: 'rgba(255,255,255,.4)',
- fontSize: 12
- }
- }
- },
- data: [ 5, 12, 35, 100, 150, 235]
-
- }]
- };
- // 使用刚指定的配置项和数据显示图表。
- myChart.setOption(option);
- window.addEventListener("resize",function(){
- myChart.resize();
- });
- }
- function echarts_2() {
- // 基于准备好的dom,初始化echarts实例
- var myChart = echarts.init(document.getElementById('echart2'));
-
-
- option = {
- color: ['#1aa1ff', '#31c17b', '#ff6535'],
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
- },
- grid: {
- left: '10',
- top:'10%',
- right: '0%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: {
- data: ['商超', '零销', '餐饮', '百货', '其它'],
- axisLine: {show:false,},
- axisLabel: {
- color: 'rgba(255,255,255,.6)',
- fontSize: 14
- }
- },
- yAxis: {
- //name: "(人)",
- splitNumber:4,
- nameTextStyle: {
- color: 'rgba(255,255,255,.6)',
- fontSize: 14
- },
- axisLine: { show:false, },
- axisLabel: {
- color: 'rgba(255,255,255,.6)',
- fontSize: 14
- },
- splitLine: {
- lineStyle: {
- color: "rgba(255,255,255,.1)",
- type: "dotted"
- }
- },
- //interval:100,
- //max:500
- },
- series: [{
- type: 'bar',
- barWidth: '30',
- itemStyle: {
- normal: {
- barBorderRadius: 2,
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: "#4693EC"
- },
- {
- offset: 1,
- color: "#00FFE3"
- }
- ]),
- label: {
- show: true,
- position: 'top',
- formatter: '{c}',
- color: 'rgba(255,255,255,.4)',
- fontSize: 12
- }
- },
-
- },
-
- data: [1250, 605, 264, 445, 125]
-
- }]
- };
- // 使用刚指定的配置项和数据显示图表。
- myChart.setOption(option);
- window.addEventListener("resize",function(){
- myChart.resize();
- });
- }
-
- })
|