$(function () { echarts_1() echarts_2() echarts_3() echarts_4() echarts_5() echarts_map() echarts_map2() function echarts_1() { // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('echart1')); var data = [683, 234, 234, 523, 345, 320, 280, 271, 254, 229, 210, 190, 182] var titlename = ['有机物污染', '机物污染', '重金属污染', '固体废物污染', '汽车尾气污染', '工业废水污染', '生活垃圾', '农药化肥污染', '微生物污染', '噪音污染', '辐射污染', '氧化物污染', '硫氧化物污染']; option = { grid: { left: '10', top:'15', right: '10', bottom: '0%', containLabel: true }, xAxis: { show: false }, yAxis: [{ show: true, data: titlename, inverse: true, axisLine: { show: false}, splitLine:{ show: false}, axisTick:{ show: false}, axisLabel: { textStyle: { color:'#fff' }, }, }, { show: false, inverse: true, data: data, axisLabel: {textStyle: {color: '#fff'}}, axisLine: { show: false}, splitLine:{ show: false}, axisTick: { show: false}, }], series: [{ name: '条', type: 'bar', yAxisIndex: 0, data: data, barWidth: 15, itemStyle: { normal: { color:'#1089E7', } }, label: { normal: { show: true, position: 'right', formatter: '{c}', textStyle: {color: 'rgba(255,255,255,.5)'} } }, }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize",function(){ myChart.resize(); }); } function echarts_2() { // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('echart2')); option = { "legend": { "orient": "horizontal", "y": "bottom", "x": "center", "data": ["黑名单查询", "红名单查询", "法人行政处罚", "其它查询"], "itemWidth": 10, "itemHeight": 10, "textStyle": { "color": "#fff" }, }, tooltip: { trigger: 'item', formatter: "{b} : {c} ({d}%)" }, visualMap: { show: false, min: 500, max: 600, inRange: { //colorLightness: [0, 1] } }, series: [{ name: '访问来源', type: 'pie', radius: ['20%', '55%'], center: ['50%', '50%'], color: ['rgb(131,249,103)', '#FBFE27', '#FE5050', '#1DB7E5'], data: [{ value: 285, name: '黑名单查询' }, { value: 410, name: '红名单查询' }, { value: 274, name: '法人行政处罚' }, { value: 235, name: '其它查询' } ].sort(function(a, b) { return a.value - b.value }), roseType: 'radius', label: { normal: { formatter: ['{c|{d}%}', '{b|{b}}'].join('\n'), rich: { c: { color: 'rgb(241,246,104)', fontSize: 20, fontWeight:'bold', lineHeight: 5 }, b: { color: 'rgb(98,137,169)', fontSize: 15, height: 40 }, }, } }, labelLine: { normal: { lineStyle: { color: 'rgb(98,137,169)', }, smooth: 0.2, length: 5, length2: 10, } }, itemStyle: { normal: { shadowColor: 'rgba(0, 0, 0, 0.8)', shadowBlur: 50, } } }] }; myChart.setOption(option); // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize",function(){ myChart.resize(); }); } function echarts_3() { // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('echart3')); var name_flag = 0; var data = [{ "value": "1046", "name": "增值税", }, { "value": "903", "name": "资源税", }, { "value": "784", "name": "个人所得税", }, { "value": "683", "name": "城建税", }, { "value": "659", "name": "教育费附加", }, { "value": 1488, "name": "地方教育费附加", } ]; var option = { "legend": { "orient": "horizontal", "y": "bottom", "x": "center", "data": ["增值税", "资源税", "个人所得税", "城建税", "教育费附加", "地方教育费附加"], "itemWidth": 10, "itemHeight": 10, "textStyle": { "color": "#fff" }, }, "title": [{ "show": true, "text": "", "textStyle": { "color": "white", "fontSize": 14, "fontStyle": "normal", }, "top": "44%", "left": "center" }, { "show": true, "text": "", "textStyle": { "color": "white", "fontSize": 20, "fontStyle": "normal", "fontWeight": "bold" }, "top": "50%", "left": "center" }, ], tooltip: { trigger: 'item', formatter: "{b}
数量:{c} ({d}%)", textStyle: { // fontSize: 36, fontWeight: 'bold', color: 'white', }, }, //自己设置扇形图颜色 series: [{ name: '税种明细', type: 'pie', //位置 center: ['50%', '50%'], radius: ['30%', '50%'], avoidLabelOverlap: false, selectedOffset: 25, hoverAnimation: false, itemStyle: { normal: { shadowColor: 'rgba(0, 0, 0, 0.5)', shadowBlur: 10, } }, labelLine: { length: 7, length2: 30, lineStyle: { width:1 } }, label: { fontSize: '16', color: 'white' }, data: data }, { name: '税种明细', type: 'pie', radius: '30%', z: 1, itemStyle: { normal: { label: { show: false }, labelLine: { show: false } }, emphasis: { label: { show: false, position: 'center', textStyle: { fontSize: '30', fontWeight: 'bold' } } } }, color: ['rgba(0,0,0,0)'], data: [{ value: 100, tooltip: { show: false } }, ] } ] }; var timeTicket = null; timeTicket = setInterval(() => { if (name_flag > 5) { myChart.dispatchAction({ type: 'pieUnSelect', seriesIndex: 0, dataIndex: 5 }); name_flag = 0; } myChart.dispatchAction({ type: 'pieSelect', seriesIndex: 0, dataIndex: name_flag }); if (name_flag !== 0) { myChart.dispatchAction({ type: 'pieUnSelect', seriesIndex: 0, dataIndex: name_flag - 1 }); } option.title[0].text = option.series[0].data[name_flag].name; option.title[1].text = option.series[0].data[name_flag].value; myChart.setOption(option); name_flag++; }, 2000); myChart.setOption(option); // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize",function(){ myChart.resize(); }); } function echarts_4() { // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('echart4')); option = { tooltip: { trigger: 'axis', axisPointer: { lineStyle: { color: '#57617B' } } }, "legend": { "data": [ {"name": "税收"}, {"name": "折线"}, ], "top": "0%", "textStyle": { "color": "rgba(255,255,255,0.9)"//图例文字 } }, "xAxis": [ { "type": "category", data: ['1月', '2月', '3月', '4月', '5月', '6月'], axisLine: { lineStyle: {color: "rgba(255,255,255,.1)"}}, axisLabel: { textStyle: {color: "rgba(255,255,255,.6)", fontSize: '14', }, }, }, ], "yAxis": [ { "type": "value", "name": "单位1", "min": 0, "max": 50, "interval": 10, "axisLabel": { "show": true, }, axisLine: {lineStyle: {color: 'rgba(255,255,255,.2)'}},//左线色 }, { "type": "value", "name": "单位2", "show": true, "axisLabel": { "show": true, }, axisLine: {lineStyle: {color: 'rgba(255,255,255,.2)'}},//右线色 splitLine: {show:true,lineStyle: {color:"#001e94"}},//x轴线 }, ], "grid": { "top": "10%", "right":"30", "bottom":"30", "left":"30", }, "series": [ { "name": "税收", "type": "bar", "data": [4,2,34,6,8,6], "barWidth": "auto", "itemStyle": { "normal": { "color": { "type": "linear", "x": 0, "y": 0, "x2": 0, "y2": 1, "colorStops": [ { "offset": 0, "color": "#66b8a7" }, { "offset": 1, "color": "#66b8a7" } ], "globalCoord": false } } }, "barGap": "0" }, { "name": "折线", "type": "line", "yAxisIndex": 1, "data": [100,50,80,30,90,40], lineStyle: { normal: { width: 2 }, }, "itemStyle": { "normal": { "color": "#cdba00", } }, "smooth": true } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize",function(){ myChart.resize(); }); } function echarts_5() { // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('echart5')); option = { "legend": { "orient": "horizontal", "y": "bottom", "x": "center", "data": ["设备", "建材", "食品"], "itemWidth": 10, "itemHeight": 10, "textStyle": { "color": "#fff" }, }, tooltip: { trigger: 'item', formatter: "{b} : {c} ({d}%)" }, visualMap: { show: false, min: 500, max: 600, inRange: { //colorLightness: [0, 1] } }, series: [{ name: '访问来源', type: 'pie', radius: ['20%', '60%'], center: ['50%', '50%'], color: ['rgb(131,249,103)', '#FBFE27', '#FE5050', '#1DB7E5'], data: [{ value: 285, name: '设备' }, { value: 410, name: '建材' }, { value: 274, name: '食品' } ].sort(function(a, b) { return a.value - b.value }), roseType: 'radius', label: { normal: { formatter: ['{c|{d}%}', '{b|{b}}'].join('\n'), rich: { c: { color: 'rgb(241,246,104)', fontSize: 20, fontWeight:'bold', lineHeight: 5 }, b: { color: 'rgb(98,137,169)', fontSize: 15, height: 40 }, }, } }, labelLine: { normal: { lineStyle: { color: 'rgb(98,137,169)', }, smooth: 0.2, length: 10, length2: 20, } }, itemStyle: { normal: { shadowColor: 'rgba(0, 0, 0, 0.8)', shadowBlur: 50, } } }] }; myChart.setOption(option); // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize",function(){ myChart.resize(); }); } function echarts_map() { var myChart = echarts.init(document.getElementById('map')); var uploadedDataURL = "js/chenxi.json"; myChart.showLoading(); $.getJSON(uploadedDataURL, function(geoJson) { echarts.registerMap('chenxi', geoJson); myChart.hideLoading(); var geoCoordMap = { '岑城': [111.003903,22.922207] ,'糯垌':[103.803298,25.496407] ,'诚谏':[111.245935,23.020671] ,'归义':[111.096911,22.906905] ,'筋竹':[111.29382,22.904241] ,'大业':[111.203045,22.907082] ,'梨木':[111.12996,22.80186] ,'大隆':[111.011196,22.767551] ,'南渡':[110.83674,22.854247] ,'马路':[110.909045,22.893586] ,'三堡':[110.929096,23.109585] ,'波塘':[110.861756,23.017674] ,'安平':[111.097183,23.113398] ,'水汶':[110.994962,22.685379] } var data1 = [{ name: '糯垌', value: 80 },{ name: '梨木', value: 70 }, { name: '南渡', value: 75 }, { name: '水汶', value: 80 } ]; var data2 = [{ name: '大隆', value: 80 },{ name: '筋竹', value: 180 } ]; var data3 = [{ name: '安平', value: 80 },{ name: '波塘', value: 70 }, { name: '马路', value: 75 }, { name: '大业', value: 80 } ]; var convertData = function(data) { var res = []; for (var i = 0; i < data.length; i++) { var geoCoord = geoCoordMap[data[i].name]; if (geoCoord) { res.push({ name: data[i].name, value: geoCoord.concat(data[i].value) }); } } return res; }; option = { tooltip: { formatter : function(e){ if (typeof(e.value)[2] == "undefined") { return e.name; }else{ return e.name + ':' + e.value[2] + '家'; } } }, legend: { orient: 'vertical', top: '50', right: '50', data: ['开采企业','管理站','加工企业'], textStyle: { color: '#fff', fontSize:18, } }, geo: { map: 'chenxi', zoom: 1, itemStyle: { normal: { areaColor: 'rgba(0,97,225,.3)', borderColor: 'rgba(255,255,255,.6)' }, emphasis: { areaColor: 'rgba(0,97,225,.5)', } } }, series: [ { name: '开采企业', type: 'scatter', data: data1, coordinateSystem: 'geo', data: convertData(data1), symbolSize: function(val) { return val[2] / 5; }, label: { normal: { formatter: '{b}', position: 'bottom', color: '#fff', show: true } }, itemStyle: { normal: { color: '#ffe400', } }, zlevel: 1 }, { name: '管理站', type: 'scatter', data: data2, coordinateSystem: 'geo', data: convertData(data2), symbolSize: function(val) { return val[2] / 5; }, label: { normal: { formatter: '{b}', position: 'bottom', color: '#fff', show: true } }, itemStyle: { normal: { color: '#07e5ff', } }, zlevel: 1 },{ name: '加工企业', type: 'scatter', data: data3, coordinateSystem: 'geo', data: convertData(data3), symbolSize: function(val) { return val[2] / 5; }, label: { normal: { formatter: '{b}', position: 'bottom', color: '#fff', show: true } }, itemStyle: { normal: { color: '#ff6316', } }, zlevel: 1 }, { type: 'map', roam: false, //是否开启鼠标缩放和平移漫游 }] }; myChart.setOption(option); }); } function echarts_map2() { var myChart = echarts.init(document.getElementById('guangxi')); var uploadedDataURL = "js/45.json"; myChart.showLoading(); $.getJSON(uploadedDataURL, function(geoJson) { echarts.registerMap('guangxi', geoJson); myChart.hideLoading(); var geoCoordMap = { '岑溪': [111.003154,22.925685], '藤县': [110.989913,23.350225], '合浦': [109.214017,21.66593], '田阳': [106.920265,23.740418], '兴业': [109.883847,22.743869], '平桂': [111.502419,24.448841], '覃塘': [109.464024,23.127934] } var data1 = [{ name: '藤县', value: 70 }, { name: '合浦', value: 70 }, { name: '田阳', value: 70 }, { name: '平桂', value: 70 } , { name: '覃塘', value: 70 } ]; var data2 = [{ name: '岑溪', value: 100 }, ]; var convertData = function(data) { var res = []; for (var i = 0; i < data.length; i++) { var geoCoord = geoCoordMap[data[i].name]; if (geoCoord) { res.push({ name: data[i].name, value: geoCoord.concat(data[i].value) }); } } return res; }; option = { /** tooltip: { formatter : function(e){ if (typeof(e.value)[2] == "undefined") { return e.name; }else{ return e.name + ':' + e.value[2] + '家'; } } }, **/ legend: { orient: 'vertical', top: '50', right: '50', data: ['开采企业','管理站'], textStyle: { color: '#fff', fontSize:18, } }, geo: { map: 'guangxi', zoom: 1, itemStyle: { normal: { areaColor: 'rgba(0,97,225,.3)', borderColor: 'rgba(255,255,255,.6)' }, emphasis: { areaColor: 'rgba(0,97,225,.5)', } } }, series: [ { name: '开采企业', type: 'scatter', data: data1, coordinateSystem: 'geo', data: convertData(data1), symbolSize: function(val) { return val[2] / 5; }, label: { normal: { formatter: '{b}', position: 'bottom', color: '#fff', show: true } }, itemStyle: { normal: { color: '#ffe400', } }, zlevel: 1 }, { name: '管理站', type: 'scatter', data: data2, coordinateSystem: 'geo', data: convertData(data2), symbolSize: function(val) { return val[2] / 5; }, label: { normal: { formatter: '{b}', position: 'bottom', color: '#fff', show: true } }, itemStyle: { normal: { color: '#ff3300', } }, zlevel: 1 }, { type: 'map', roam: false, //是否开启鼠标缩放和平移漫游 }] }; myChart.setOption(option); }); } })