$(function () { ceshis1(); ceshis2(); ceshis3(); ceshis4(); /*ceshis5();*/ ceshis6(); ceshis(); function ceshis() { var myChart = echarts.init(document.getElementById('shuiipin')); var img = 'data:image/png;base64,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'; var trafficWay = [{ name: '18-27', value: 40 },{ name: '45-60', value: 10 },{ name: '35-45', value: 30 },{ name: '27-35', value: 40 }]; var data = []; var color=['#00ffff','#00cfff','#006ced','#ffe000','#ffa800','#ff5b00','#ff3000'] for (var i = 0; i < trafficWay.length; i++) { data.push({ value: trafficWay[i].value, name: trafficWay[i].name, itemStyle: { normal: { borderWidth: 5, shadowBlur: 20, borderColor:color[i], shadowColor: color[i] } } }, { value: 2, name: '', itemStyle: { normal: { label: { show: false }, labelLine: { show: false }, color: 'rgba(0, 0, 0, 0)', borderColor: 'rgba(0, 0, 0, 0)', borderWidth: 0 } } }); } var seriesOption = [{ name: '', type: 'pie', clockWise: false, radius: [45, 45], /*hoverAnimation: false,*/ itemStyle: { normal: { label: { show: true, position: 'outside', color: '#ddd', formatter: function(params) { var percent = 0; var total = 0; for (var i = 0; i < trafficWay.length; i++) { total += trafficWay[i].value; } percent = ((params.value / total) * 100).toFixed(0); if(params.name !== '') { return '年龄段：' + params.name + '\n' + '\n' + '占百分比：' + percent + '%'; }else { return ''; } }, }, labelLine: { length:30, length2:40, show: true, color:'#00ffff' } } }, data: data }]; option = { /*backgroundColor: '#0A2E5D',*/ color : color, title: { text: '年龄段', top: '5%', textAlign: "center", left: "49%", textStyle: { color: '#fff', fontSize: 22, fontWeight: '400' } }, graphic: { elements: [{ type: "image", z: 3, style: { image: img, width: 140, height: 140 }, left: 'center', top: 'center', position: [20, 20] }] }, tooltip: { show: false }, legend: { icon: "circle", orient: 'horizontal', // x: 'left', data:['18-27','45-60','35-45','27-35'], right: 80, bottom: 1, align: 'right', textStyle: { color: "#fff" }, itemGap: 20, padding: [5, 20], }, toolbox: { show: false }, series: seriesOption }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); myChart.currentIndex = -1; setInterval(function () { var dataLen = option.series[0].data.length; // 取消之前高亮的图形 myChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: myChart.currentIndex }); myChart.currentIndex = (myChart.currentIndex + 1) % dataLen; // 高亮当前图形 myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: myChart.currentIndex }); }, 1000); window.addEventListener("resize",function(){ myChart.resize(); }); } function ceshis1() { var myChart = echarts.init(document.getElementById('chart2')); var ydata = [{ name: '天猫', value: 18 }, { name: '京东', value: 16 }, { name: '苏宁易购', value: 15 }, { name: '拼多多', value: 14 }, { name: '国美', value: 10 }, { name: '亚马逊', value: 7.9 }, { name: '唯品会', value: 6.7 }, { name: '其他', value: 6 } ]; var color = ["#8d7fec", "#5085f2", "#e75fc3", "#f87be2", "#f2719a", "#fca4bb", "#f59a8f", "#fdb301", "#57e7ec", "#cf9ef1"] var xdata =['天猫', "京东", "苏宁易购", "拼多多", '国美', '亚马逊', '唯品会', '唯品会']; option = { /*backgroundColor: "rgba(255,255,255,1)",*/ color: color, legend: { orient: "vartical", x: "left", top: "center", left: "53%", bottom: "0%", data: xdata, itemWidth: 8, itemHeight: 8, textStyle: { color: '#fff' }, /*itemGap: 16,*/ /*formatter:function(name){ var oa = option.series[0].data; var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value+oa[4].value + oa[5].value + oa[6].value + oa[7].value+oa[8].value + oa[9].value ; for(var i = 0; i < option.series[0].data.length; i++){ if(name==oa[i].name){ return ' '+name + ' | ' + oa[i].value + ' | ' + (oa[i].value/num * 100).toFixed(2) + '%'; } } }*/ formatter: function(name) { return '' + name } }, series: [{ type: 'pie', clockwise: false, //饼图的扇区是否是顺时针排布 minAngle: 2, //最小的扇区角度（0 ~ 360） radius: ["20%", "60%"], center: ["30%", "45%"], avoidLabelOverlap: false, itemStyle: { //图形样式 normal: { borderColor: '#ffffff', borderWidth: 1, }, }, label: { normal: { show: false, position: 'center', formatter: '{text|{b}}\n{c} ({d}%)', rich: { text: { color: "#fff", fontSize: 14, align: 'center', verticalAlign: 'middle', padding: 8 }, value: { color: "#8693F3", fontSize: 24, align: 'center', verticalAlign: 'middle', }, } }, emphasis: { show: true, textStyle: { fontSize: 24, } } }, data: ydata }] }; myChart.setOption(option); setTimeout(function() { myChart.on('mouseover', function(params) { if (params.name == ydata[0].name) { myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: 0 }); } else { myChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: 0 }); } }); myChart.on('mouseout', function(params) { myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: 0 }); }); myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: 0 }); }, 1000); myChart.currentIndex = -1; setInterval(function () { var dataLen = option.series[0].data.length; // 取消之前高亮的图形 myChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: myChart.currentIndex }); myChart.currentIndex = (myChart.currentIndex + 1) % dataLen; // 高亮当前图形 myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: myChart.currentIndex }); }, 1000); // 使用刚指定的配置项和数据显示图表。 /*myChart.setOption(option);*/ window.addEventListener("resize",function(){ myChart.resize(); }); } function ceshis2() { var myChart = echarts.init(document.getElementById('chart3')); option = { /*backgroundColor: '#000',*/ "animation": true, "title": { /*"text": 24,*/ /* "subtext": "沥青工",*/ "x": "center", "y": "center", "textStyle": { "color": "#fff", "fontSize": 10, "fontWeight": "normal", "align": "center", "width": "200px" }, "subtextStyle": { "color": "#fff", "fontSize": 12, "fontWeight": "normal", "align": "center" } }, "legend": { "width": "100%", "left": "center", "textStyle": { "color": "#fff", "fontSize": 12 }, "icon": "circle", "right": "0", "bottom": "0", "padding": [15, 20], "itemGap": 5, "data": ["化妆品", "手机", "电脑", "羽绒服", "扫地机", "电视", "洗发露", "其它"] }, "series": [{ "type": "pie", "center": ["50%", "40%"], "radius": ["20%", "43%"], "color": ["#FEE449", "#00FFFF", "#00FFA8", "#9F17FF", "#FFE400", "#F76F01", "#01A4F7", "#FE2C8A"], "startAngle": 135, "labelLine": { "normal": { "length": 15 } }, "label": { "normal": { "formatter": "{b|{b}:} {per|{d}%} ", "backgroundColor": "rgba(255, 147, 38, 0)", "borderColor": "transparent", "borderRadius": 4, "rich": { "a": { "color": "#999", "lineHeight": 12, "align": "center" }, "hr": { "borderColor": "#aaa", "width": "100%", "borderWidth": 1, "height": 0 }, "b": { "color": "#b3e5ff", "fontSize": 16, "lineHeight": 33 }, "c": { "fontSize": 14, "color": "#eee" }, "per": { "color": "#FDF44E", "fontSize": 14, "padding": [5, 8], "borderRadius": 2 } }, "textStyle": { "color": "#fff", "fontSize": 16 } } }, "emphasis": { "label": { "show": true, "formatter": "{b|{b}:} {per|{d}%} ", "backgroundColor": "rgba(255, 147, 38, 0)", "borderColor": "transparent", "borderRadius": 4, "rich": { "a": { "color": "#999", "lineHeight": 22, "align": "center" }, "hr": { "borderColor": "#aaa", "width": "100%", "borderWidth": 1, "height": 0 }, "b": { "color": "#fff", "fontSize": 14, "lineHeight": 33 }, "c": { "fontSize": 14, "color": "#eee" }, "per": { "color": "#FDF44E", "fontSize": 14, "padding": [5, 6], "borderRadius": 2 } } } }, "data": [{ "name": "化妆品", "value": 3 }, { "name": "手机", "value": 2 }, { "name": "电脑", "value": 26 }, { "name": "羽绒服", "value": 24 }, { "name": "扫地机", "value": 12 }, { "name": "电视", "value": 11 }, { "name": "洗发露", "value": 3 }, { "name": "其它", "value": 2 }] }, { "type": "pie", "center": ["50%", "40%"], "radius": ["15%", "14%"], "label": { "show": false }, "data": [{ "value": 78, "name": "实例1", "itemStyle": { "normal": { "color": { "x": 0, "y": 0, "x2": 1, "y2": 0, "type": "linear", "global": false, "colorStops": [{ "offset": 0, "color": "#9F17FF" }, { "offset": 0.2, "color": "#01A4F7" }, { "offset": 0.5, "color": "#FE2C8A" }, { "offset": 0.8, "color": "#FEE449" }, { "offset": 1, "color": "#00FFA8" }] } } } }] }] } // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); myChart.currentIndex = -1; //myChart.setOption(option); //console.log(option.series[0].data[0]); setInterval(function () { var dataLen = option.series[0].data.length; // 取消之前高亮的图形 myChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: myChart.currentIndex }); myChart.currentIndex = (myChart.currentIndex + 1) % dataLen; // 高亮当前图形 myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: myChart.currentIndex }); }, 1000); window.addEventListener("resize",function(){ myChart.resize(); }); } function ceshis3() { var myChart = echarts.init(document.getElementById('chart4')); var option = { tooltip: {trigger: 'axis',axisPointer: {lineStyle: {color: '#fff'}}}, legend: { icon: 'rect', itemWidth: 14,itemHeight: 5,itemGap:10, data: ['受理时长', '排队时长', '订单量','客流量'], right: '10px',top: '0px', textStyle: {fontSize: 12,color: '#fff'} }, grid: {x:40,y:50,x2:45,y2:40}, xAxis: [{ type: 'category',boundaryGap: false,axisLine: {lineStyle: {color: '#57617B'}},axisLabel: {textStyle: {color:'#fff'}}, data:[ "12月\n01号", "12月\n02号", "12月\n03号", "12月\n04号", "12月\n05号", "12月\n06号", "12月\n07号", "12月\n08号", "12月\n09号", "12月\n10号", "12月\n11号", "12月\n12号", "12月\n13号", "12月\n14号", "12月\n15号", "12月\n16号", "12月\n17号", "12月\n18号", "12月\n19号", "12月\n20号", "12月\n21号", "12月\n22号", "12月\n23号", "12月\n24号", "12月\n25号", "12月\n26号", "12月\n27号", "12月\n28号", "12月\n29号", "12月\n30号" ] }], yAxis: [{ type: 'value', axisTick: { show: false }, axisLine: {lineStyle: {color: '#57617B'}}, axisLabel: {margin: 10,textStyle: {fontSize: 12},textStyle: {color:'#fff'},formatter:'{value}分'}, splitLine: {lineStyle: {color: '#57617B'}} },{ type: 'value', axisTick: { show: false }, axisLine: {lineStyle: {color: '#57617B'}}, axisLabel: {margin: 10,textStyle: {fontSize: 12},textStyle: {color:'#fff'},formatter:'{value}个'}, splitLine: {show: false,lineStyle: {color: '#57617B'}} }], series: [{ name: '受理时长',type: 'line',smooth: true,lineStyle: {normal: {width: 2}}, yAxisIndex:0, areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(185,150,248,0.3)' }, { offset: 0.8, color: 'rgba(185,150,248,0)' }], false), shadowColor: 'rgba(0, 0, 0, 0.1)', shadowBlur: 10 } }, itemStyle: {normal: { color: '#B996F8'}}, data: [ "7.35", "7.31", "7.75", "7.45", "7.01", "6.46", "8.01", "6.18", "5.23", "7.08", "0.00", "0.00", "0.00", "0.00", "0.00", "7.29", "6.61", "6.79", "6.54", "6.87", "6.45", "6.10", "6.93", "6.85", "5.87", "8.98", "6.26", "6.95", "7.36", "0.00" ], }, { name: '排队时长',type: 'line',smooth: true,lineStyle: { normal: {width: 2}}, yAxisIndex:0, areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(3, 194, 236, 0.3)' }, { offset: 0.8, color: 'rgba(3, 194, 236, 0)' }], false), shadowColor: 'rgba(0, 0, 0, 0.1)', shadowBlur: 10 } }, itemStyle: {normal: {color: '#03C2EC'}}, data: [ "2.00", "1.50", "2.98", "2.01", "1.39", "2.09", "5.99", "3.02", "2.51", "4.61", "2.44", "1.51", "3.88", "7.67", "0.25", "5.70", "1.76", "3.78", "4.10", "6.02", "3.93", "1.93", "5.10", "3.89", "2.78", "5.30", "6.67", "5.65", "12.59", "0" ] }, { name: '订单量',type: 'line',smooth: true,lineStyle: {normal: {width: 2}}, yAxisIndex:1, areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(218, 57, 20, 0.3)' }, { offset: 0.8, color: 'rgba(218, 57, 20, 0)' }], false), shadowColor: 'rgba(0, 0, 0, 0.1)', shadowBlur: 10 } }, itemStyle: {normal: {color: '#DA3914'}}, data:[ "251", "189", "212", "222", "207", "150", "181", "202", "183", "193", "0", "0", "0", "0", "0", "198", "202", "205", "242", "216", "176", "126", "254", "207", "211", "191", "224", "213", "297", "0" ] },{ name: '客流量',type: 'line',smooth: true,lineStyle: {normal: {width: 2}}, yAxisIndex:1, areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(232, 190, 49, 0.3)' }, { offset: 0.8, color: 'rgba(232, 190, 49, 0)' }], false), shadowColor: 'rgba(0, 0, 0, 0.1)', shadowBlur: 10 } }, itemStyle: {normal: {color: '#E8BE31'}}, data: [ "228", "176", "206", "203", "186", "137", "162", "177", "164", "169", "0", "0", "0", "0", "0", "175", "185", "179", "224", "191", "161", "115", "229", "190", "172", "164", "201", "192", "273", "0" ] }] }; /*var myChart = echarts.init(document.getElementById('channel_handle_detail')); myChart.clear(); if(data.handleTimeData.length>0){ myChart.setOption(option); }else{ noDataTip($("#channel_handle_detail")); }*/ // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize",function(){ myChart.resize(); }); } function ceshis4() { var myChart = echarts.init(document.getElementById('chart5')); var labelimg = ""; option = { /*backgroundColor: "#0E233E",*/ "grid": { "left": "6%", "top": "10%", "right": "3%", "bottom": "15%" }, "legend": { "data": [ "日本", "韩国", "美国", "澳大利亚", "俄罗斯", "法国", "英国" ], "top": "92%", "icon": "circle", "textStyle": { "color": "#0DCAD2" } }, "color": [ "#534EE1", "#ECD64F", "#00E4F0", "#44D16D", "#124E91", "#BDC414", "#C8CCA5" ], "tooltip": { "position": "top", }, "xAxis": { "type": "category", "data": [ "日本", "韩国", "美国", "澳大利亚", "俄罗斯", "法国", "英国" ], "axisLabel": { "show": false, "color": "#999999", "fontSize": 16 }, "axisTick": { "show": false }, "axisLine": { "show": false }, "splitLine": { "show": false } }, "yAxis": { "type": "value", "axisLabel": { "show": false, "color": "#999999", "fontSize": 16 }, "axisTick": { "show": false }, "axisLine": { "show": false }, "splitLine": { "show": false } }, "series": [{ "name": "信息", "data": [ 0, 0, 0, 0, 0, 0, 0 ], "stack": "a", "type": "bar" }, { "name": "往下场所", "data": [ 0, 0, 0, 0, 0, 0, 0 ], "stack": "a", "type": "bar" }, { "name": "关系", "data": [ 0, 0, 0, 0, 0, 0, 0 ], "stack": "a", "type": "bar" }, { "name": "关联", "data": [ 0, 0, 0, 0, 0, 0, 0 ], "stack": "a", "type": "bar" }, { "name": "人", "data": [ 0, 0, 0, 0, 0, 0, 0 ], "stack": "a", "type": "bar" }, { "name": "物", "data": [ 0, 0, 0, 0, 0, 0, 0 ], "stack": "a", "type": "bar" }, { "name": "组织", "data": [ 0, 0, 0, 0, 0, 0, 0 ], "stack": "a", "type": "bar" }, { "type": "pictorialBar", "name": "提示框值", "data": [{ "name": "", "value": 868, "label": { "show": true, "position": "top", formatter: function(params) { var index = params.dataIndex; var str = "{a|" + params.value + "}\n{c|" + params.value + "个}"; return str; }, "rich": { "a": { "fontSize": 18, "color": "#534EE1", "align": "center", "height": 40 }, "c": { "fontSize": 18, "color": "#fff", "padding": [ -2, 0, 2, 0 ], "backgroundColor": { "image": labelimg }, "align": "center", "verticalAlign": "bottom", "height": 50, "lineHeight": 40, "width": 100 } } }, "itemStyle": { "normal": { "color": { "type": "linear", "x": 0, "y": 0, "x2": 0, "y2": 1, "colorStops": [{ "offset": 0, "color": "rgba(83,78,225,1)" }, { "offset": 1, "color": "rgba(83,78,225,0)" } ], "global": false } } } }, { "name": "", "value": 306, "label": { "show": true, "position": "top", formatter: function(params) { var index = params.dataIndex; var str = "{a|" + params.value + "}\n{c|" + params.value + "个}"; return str; }, "rich": { "a": { "fontSize": 18, "color": "#ECD64F", "align": "center", "height": 40 }, "c": { "fontSize": 18, "color": "#fff", "padding": [ -4, 0, 8, 0 ], "backgroundColor": { "image": labelimg }, "align": "center", "verticalAlign": "bottom", "height": 45, "lineHeight": 40, "width": 100 } } }, "itemStyle": { "normal": { "color": { "type": "linear", "x": 0, "y": 0, "x2": 0, "y2": 1, "colorStops": [{ "offset": 0, "color": "rgba(236,214,79,1)" }, { "offset": 1, "color": "rgba(236,214,79,0)" } ], "global": false } } } }, { "name": "", "value": 162, "label": { "show": true, "position": "top", formatter: function(params) { var index = params.dataIndex; var str = "{a|" + params.value + "}\n{c|" + params.value + "个}"; return str; }, "rich": { "a": { "fontSize": 18, "color": "#00E4F0", "align": "center", "height": 40 }, "c": { "fontSize": 18, "color": "#fff", "padding": [ -4, 0, 8, 0 ], "backgroundColor": { "image": labelimg }, "align": "center", "verticalAlign": "bottom", "height": 45, "lineHeight": 40, "width": 100 } } }, "itemStyle": { "normal": { "color": { "type": "linear", "x": 0, "y": 0, "x2": 0, "y2": 1, "colorStops": [{ "offset": 0, "color": "rgba(0,228,240,1)" }, { "offset": 1, "color": "rgba(0,228,240,0)" } ], "global": false } } } }, { "name": "", "value": 362, "label": { "show": true, formatter: function(params) { var index = params.dataIndex; var str = "{a|" + params.value + "}\n{c|" + params.value + "个}"; return str; }, "position": "top", "rich": { "a": { "fontSize": 18, "color": "#44D16D", "align": "center", "height": 40 }, "c": { "fontSize": 18, "color": "#fff", "padding": [ -4, 0, 8, 0 ], "backgroundColor": { "image": labelimg }, "align": "center", "verticalAlign": "bottom", "height": 45, "lineHeight": 40, "width": 100 } } }, "itemStyle": { "normal": { "color": { "type": "linear", "x": 0, "y": 0, "x2": 0, "y2": 1, "colorStops": [{ "offset": 0, "color": "rgba(68,209,109,1)" }, { "offset": 1, "color": "rgba(68,209,109,0)" } ], "global": false } } } }, { "name": "", "value": 460, "label": { "show": true, "position": "top", formatter: function(params) { var index = params.dataIndex; var str = "{a|" + params.value + "}\n{c|" + params.value + "个}"; return str; }, "rich": { "a": { "fontSize": 18, "color": "#124E91", "align": "center", "height": 30 }, "c": { "fontSize": 18, "color": "#fff", "padding": [ -4, 0, 8, 0 ], "backgroundColor": { "image": labelimg }, "align": "center", "verticalAlign": "bottom", "height": 45, "lineHeight": 40, "width": 100 } } }, "itemStyle": { "normal": { "color": { "type": "linear", "x": 0, "y": 0, "x2": 0, "y2": 1, "colorStops": [{ "offset": 0, "color": "rgba(18,78,145,1)" }, { "offset": 1, "color": "rgba(18,78,145,0)" } ], "global": false } } } }, { "name": "", "value": 606, "label": { "show": true, "position": "top", formatter: function(params) { var index = params.dataIndex; var str = "{a|" + params.value + "}\n{c|" + params.value + "个}"; return str; }, "rich": { "a": { "fontSize": 18, "color": "#BDC414", "align": "center", "height": 30 }, "c": { "fontSize": 18, "color": "#fff", "padding": [ -4, 0, 8, 0 ], "backgroundColor": { "image": labelimg }, "align": "center", "verticalAlign": "bottom", "height": 45, "lineHeight": 40, "width": 100 } } }, "itemStyle": { "normal": { "color": { "type": "linear", "x": 0, "y": 0, "x2": 0, "y2": 1, "colorStops": [{ "offset": 0, "color": "rgba(189,196,20,1)" }, { "offset": 1, "color": "rgba(189,196,20,0)" } ], "global": false } } } }, { "name": "", "value": 506, "label": { "show": true, "position": "top", formatter: function(params) { var index = params.dataIndex; var str = "{a|" + params.value + "}\n{c|" + params.value + "个}"; return str; }, "rich": { "a": { "fontSize": 18, "color": "#C8CCA5", "align": "center", "height": 30 }, "c": { "fontSize": 18, "color": "#fff", "padding": [ -4, 0, 8, 0 ], "backgroundColor": { "image": labelimg }, "align": "center", "verticalAlign": "bottom", "height": 45, "lineHeight": 40, "width": 100 } } }, "itemStyle": { "normal": { "color": { "type": "linear", "x": 0, "y": 0, "x2": 0, "y2": 1, "colorStops": [{ "offset": 0, "color": "rgba(200,204,165,1)" }, { "offset": 1, "color": "rgba(200,204,165,0)" } ], "global": false } } } } ], "stack": "a", "symbol": "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z" } ] } // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize",function(){ myChart.resize(); }); } function ceshis5() { var myChart = echarts.init(document.getElementById('map')); var uploadedDataURL = "./js/data-1528971808162-BkOXf61WX.json"; //如果想要修改，请点击上方克隆，然后在自己的版本上修改，不要在lz的版本上改！！ // echarts.extendsMap = function(id, opt) { // // 实例 // var cityMap = { // "郑州市": zhengzhou, // "开封市": kaifeng, // "洛阳市": luoyang, // "平顶山市": pingdingshan, // "安阳市": anyang, // "鹤壁市": hebi, // "新乡市": xinxiang, // "焦作市": jiaozuo, // "濮阳市": puyang, // "漯河市": luohe, // "三门峡市": sanmenxia, // "南阳市": nanyang, // "商丘市": shangqiu, // "信阳市": xinyang, // "周口市": zhoukou, // "许昌市": xuchang, // "驻马店市": zhumadian // }; // } var geoGpsMap = { '1': [116.4071, 39.9046], '2': [125.8154, 44.2584], '3': [121.4737, 31.2303], '4': [117.1582, 36.8701], '5': [103.9526, 30.7617], '6': [106.6302, 26.6470], }; var geoCoordMap = { "江苏": [118.8062, 31.9208], '黑龙江': [127.9688, 45.368], '内蒙古': [110.3467, 41.4899], "吉林": [125.8154, 44.2584], '北京市': [116.4551, 40.2539], "辽宁": [123.1238, 42.1216], "河北": [114.4995, 38.1006], "天津": [117.4219, 39.4189], "山西": [112.3352, 37.9413], "陕西": [109.1162, 34.2004], "甘肃": [103.5901, 36.3043], "宁夏": [106.3586, 38.1775], "青海": [101.4038, 36.8207], "新疆": [87.9236, 43.5883], "四川": [103.9526, 30.7617], "重庆": [108.384366, 30.439702], "山东": [117.1582, 36.8701], "河南": [113.4668, 34.6234], "安徽": [117.29, 32.0581], "湖北": [114.3896, 30.6628], "浙江": [119.5313, 29.8773], "福建": [119.4543, 25.9222], "江西": [116.0046, 28.6633], "湖南": [113.0823, 28.2568], "贵州": [106.6992, 26.7682], "云南": [102.9199, 25.4663], "广东": [113.12244, 23.009505], "广西": [108.479, 23.1152], "海南": [110.3893, 19.8516], '上海': [121.4648, 31.2891], }; var d1 = { '江苏': 10041, '黑龙江': 4093, '内蒙古': 1157, '吉林': 4903, '北京市': 2667, '辽宁': 8331, '河北': 23727, '天津': 681, '山西': 5352, '陕西': 38, '甘肃': 77, '宁夏': 65, '青海': 10, '新疆': 193, '四川': 309, '重庆': 77, '山东': 21666, '河南': 15717, '安徽': 15671, '湖北': 3714, '浙江': 3141, '福建': 955, '江西': 4978, '湖南': 778, '贵州': 33, '云南': 149, '广东': 1124, '广西': 125, '海南': 7, '上海': 2155, }; var d2 = { "江苏": 0, '黑龙江': 0, '内蒙古': 0, "吉林": 0, '北京市': 0, "辽宁": 0, "河北": 0, "天津": 0, "山西": 0, "陕西": 0, "甘肃": 0, "宁夏": 0, "青海": 0, "新疆": 0, "四川": 0, "重庆": 0, "山东": 0, "河南": 0, "安徽": 0, "湖北": 0, "浙江": 0, "福建": 0, "江西": 0, "湖南": 0, "贵州": 0, "云南": 0, "广东": 0, "广西": 0, '海南': 0, '上海': 0, }; var d3 = { '江苏': 11788, '黑龙江': 1944, '内蒙古': 2954, '吉林': 3482, '北京市': 1808, '辽宁': 5488, '河北': 27035, '天津': 2270, '山西': 13623, '陕西': 4221, '甘肃': 754, '宁夏': 1783, '青海': 91, '新疆': 1907, '四川': 4905, '重庆': 1420, '山东': 39781, '河南': 16154, '安徽': 7914, '湖北': 6802, '浙江': 5812, '福建': 3345, '江西': 4996, '湖南': 5627, '贵州': 1504, '云南': 2725, '广东': 6339, '广西': 1009, '海南': 0, '上海': 1988, }; var d4 = { "江苏": 0, '黑龙江': 0, '内蒙古': 0, "吉林": 0, '北京市': 0, "辽宁": 0, "河北": 0, "天津": 0, "山西": 0, "陕西": 0, "甘肃": 0, "宁夏": 0, "青海": 0, "新疆": 0, "四川": 0, "重庆": 0, "山东": 0, "河南": 0, "安徽": 0, "湖北": 0, "浙江": 0, "福建": 0, "江西": 0, "湖南": 0, "贵州": 0, "云南": 0, "广东": 0, "广西": 0, '海南': 0, '上海': 0, }; var d5 = { '江苏': 159, '黑龙江': 5, '内蒙古': 54, '吉林': 10, '北京市': 0, '辽宁': 0, '河北': 1679, '天津': 1, '山西': 2698, '陕西': 1744, '甘肃': 362, '宁夏': 429, '青海': 122, '新疆': 731, '四川': 3925, '重庆': 1480, '山东': 79, '河南': 1017, '安徽': 208, '湖北': 1209, '浙江': 1418, '福建': 1237, '江西': 1004, '湖南': 1511, '贵州': 345, '云南': 1429, '广东': 2242, '广西': 2271, '海南': 59, '上海': 8, }; var d6 = { "江苏": 20, '黑龙江': 60, '内蒙古': 80, "吉林": 10, '北京市': 80, "辽宁": 40, "河北": 50, "天津": 60, "山西": 40, "陕西": 60, "甘肃": 40, "宁夏": 10, "青海": 0, "新疆": 0, "四川": 80, "重庆": 0, "山东": 60, "河南": 0, "安徽": 0, "湖北": 10, "浙江": 100, "福建": 60, "江西": 0, "湖南": 0, "贵州": 150, "云南": 0, "广东": 80, "广西": 0, '海南': 0, '上海': 50, }; var colors = [ ["#1DE9B6", "#1DE9B6", "#FFDB5C", "#FFDB5C", "#04B9FF", "#04B9FF"], ["#1DE9B6", "#F46E36", "#04B9FF", "#5DBD32", "#FFC809", "#FB95D5", "#BDA29A", "#6E7074", "#546570", "#C4CCD3"], ["#37A2DA", "#67E0E3", "#32C5E9", "#9FE6B8", "#FFDB5C", "#FF9F7F", "#FB7293", "#E062AE", "#E690D1", "#E7BCF3", "#9D96F5", "#8378EA", "#8378EA"], ["#DD6B66", "#759AA0", "#E69D87", "#8DC1A9", "#EA7E53", "#EEDD78", "#73A373", "#73B9BC", "#7289AB", "#91CA8C", "#F49F42"], ]; var colorIndex = 0; $(function() { // var geoCoordMap = { // '郑州': [113.64964385, 34.7566100641], // '开封': [114.351642118, 34.8018541758], // '洛阳': [112.447524769, 34.6573678177], // '平顶山': [113.300848978, 33.7453014565], // '安阳': [114.351806508, 36.1102667222], // '鹤壁': [114.297769838, 35.7554258742], // '新乡': [113.912690161, 35.3072575577], // '焦作': [113.211835885, 35.234607555], // '濮阳': [115.026627441, 35.7532978882], // '漯河': [114.0460614, 33.5762786885], // '三门峡': [111.181262093, 34.7833199411], // '南阳': [112.542841901, 33.0114195691], // "商丘": [115.641885688, 34.4385886402], // '信阳': [114.085490993, 32.1285823075], // '周口': [114.654101942, 33.6237408181], // '许昌': [113.83531246, 34.0267395887], // '驻马店': [114.049153547, 32.9831581541] // }; var year = ["北京", "长春", "上海", "青岛", "成都", "贵阳"]; var mapData = [ [], [], [], [], [], [], ]; /*柱子Y名称*/ var categoryData = []; var barData = []; for (var key in geoCoordMap) { mapData[0].push({ "year": '长春', "name": key, "value": d1[key] / 100, "value1": d1[key] / 100, }); mapData[1].push({ "year": '长春', "name": key, "value": d1[key] / 100, "value1": d2[key] / 100, }); mapData[2].push({ "year": '青岛', "name": key, "value": d3[key] / 100, "value1": d3[key] / 100, }); mapData[3].push({ "year": '青岛', "name": key, "value": d3[key] / 100, "value1": d4[key] / 100, }); mapData[4].push({ "year": '成都', "name": key, "value": d5[key] / 100, "value1": d5[key] / 100, }); mapData[5].push({ "year": '成都', "name": key, "value": d5[key] / 100, "value1": d6[key] / 100, }); } for (var i = 0; i < mapData.length; i++) { mapData[i].sort(function sortNumber(a, b) { return a.value - b.value }); barData.push([]); categoryData.push([]); for (var j = 0; j < mapData[i].length; j++) { barData[i].push(mapData[i][j].value1); categoryData[i].push(mapData[i][j].name); } } $.getJSON(uploadedDataURL, function(geoJson) { echarts.registerMap('china', geoJson); 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; }; var convertToLineData = function(data, gps) { var res = []; for (var i = 0; i < data.length; i++) { var dataItem = data[i]; var toCoord = geoCoordMap[dataItem.name]; //debugger; var fromCoord = gps; //郑州 // var toCoord = geoGps[Math.random()*3]; if (fromCoord && toCoord) { res.push([{ coord: fromCoord, value: dataItem.value }, { coord: toCoord, }]); } } return res; }; optionXyMap01 = { timeline: { data: year, axisType: 'category', autoPlay: true, playInterval: 3000, left: '10%', right: '10%', bottom: '3%', width: '80%', // height: null, label: { normal: { textStyle: { color: '#ddd' } }, emphasis: { textStyle: { color: '#fff' } } }, symbolSize: 10, lineStyle: { color: '#555' }, checkpointStyle: { borderColor: '#777', borderWidth: 2 }, controlStyle: { showNextBtn: true, showPrevBtn: true, normal: { color: '#666', borderColor: '#666' }, emphasis: { color: '#aaa', borderColor: '#aaa' } }, }, baseOption: { animation: true, animationDuration: 1000, animationEasing: 'cubicInOut', animationDurationUpdate: 1000, animationEasingUpdate: 'cubicInOut', grid: { right: '1%', top: '15%', bottom: '10%', width: '20%' }, tooltip: { trigger: 'axis', // hover触发器 axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow', // 默认为直线，可选为：'line' | 'shadow' shadowStyle: { color: 'rgba(150,150,150,0.1)' //hover颜色 } } }, geo: { show: true, map: 'china', roam: true, zoom: 1, center: [113.83531246, 34.0267395887], label: { emphasis: { show: false } }, itemStyle: { normal: { borderColor: 'rgba(147, 235, 248, 1)', borderWidth: 1, areaColor: { type: 'radial', x: 0.5, y: 0.5, r: 0.8, colorStops: [{ offset: 0, color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色 }, { offset: 1, color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色 }], globalCoord: false // 缺省为 false }, shadowColor: 'rgba(128, 217, 248, 1)', // shadowColor: 'rgba(255, 255, 255, 1)', shadowOffsetX: -2, shadowOffsetY: 2, shadowBlur: 10 }, emphasis: { areaColor: '#389BB7', borderWidth: 0 } } }, }, options: [] }; for (var n = 0; n < year.length; n++) { optionXyMap01.options.push({ /*backgroundColor: '#013954',*/ title: [{ text: '整车物流平台', subtext: ' 数据由整车物流部提供', left: '35%', top: '15%', textStyle: { color: '#fff', fontSize: 25 } }, { id: 'statistic', text: year[n] + "数据统计情况", left: '75%', top: '8%', textStyle: { color: '#fff', fontSize: 25 } } ], xAxis: { type: 'value', scale: true, position: 'top', min: 0, boundaryGap: false, splitLine: { show: false }, axisLine: { show: false }, axisTick: { show: false }, axisLabel: { margin: 2, textStyle: { color: '#aaa' } }, }, yAxis: { type: 'category', // name: 'TOP 20', nameGap: 16, axisLine: { show: true, lineStyle: { color: '#ddd' } }, axisTick: { show: false, lineStyle: { color: '#ddd' } }, axisLabel: { interval: 0, textStyle: { color: '#ddd' } }, data: categoryData[n] }, series: [ //未知作用 { //文字和标志 name: 'light', type: 'scatter', coordinateSystem: 'geo', data: convertData(mapData[n]), symbolSize: function(val) { return val[2] / 10; }, label: { normal: { formatter: '{b}', position: 'right', show: true }, emphasis: { show: true } }, itemStyle: { normal: { color: colors[colorIndex][n] } } }, //地图？ { type: 'map', map: 'china', geoIndex: 0, aspectScale: 0.75, //长宽比 showLegendSymbol: false, // 存在legend时显示 label: { normal: { show: false }, emphasis: { show: false, textStyle: { color: '#fff' } } }, roam: true, itemStyle: { normal: { areaColor: '#031525', borderColor: '#FFFFFF', }, emphasis: { areaColor: '#2B91B7' } }, animation: false, data: mapData }, //地图点的动画效果 { // name: 'Top 5', type: 'effectScatter', coordinateSystem: 'geo', data: convertData(mapData[n].sort(function(a, b) { return b.value - a.value; }).slice(0, 20)), symbolSize: function(val) { return val[2] / 10; }, showEffectOn: 'render', rippleEffect: { brushType: 'stroke' }, hoverAnimation: true, label: { normal: { formatter: '{b}', position: 'right', show: true } }, itemStyle: { normal: { color: colors[colorIndex][n], shadowBlur: 10, shadowColor: colors[colorIndex][n] } }, zlevel: 1 }, //地图线的动画效果 { type: 'lines', zlevel: 2, effect: { show: true, period: 4, //箭头指向速度，值越小速度越快 trailLength: 0.1, //特效尾迹长度[0,1]值越大，尾迹越长重 symbol: 'arrow', //箭头图标 symbolSize: 5, //图标大小 }, lineStyle: { normal: { color: colors[colorIndex][n], width: 0.3, //尾迹线条宽度 opacity: 0.8, //尾迹线条透明度 curveness: .3 //尾迹线条曲直度 } }, data: convertToLineData(mapData[n], geoGpsMap[n + 1]) }, //柱状图 { zlevel: 1.5, type: 'bar', symbol: 'none', itemStyle: { normal: { color: colors[colorIndex][n] } }, data: barData[n] } ] }) } myChart.setOption(optionXyMap01); }); }); function randomNum(minNum, maxNum) { switch (arguments.length) { case 1: return parseInt(Math.random() * minNum + 1, 10); break; case 2: return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10); break; default: return 0; break; } } // 使用刚指定的配置项和数据显示图表。 //myChart.setOption(option); window.addEventListener("resize",function(){ myChart.resize(); }); } function ceshis6() { var myChart = echarts.init(document.getElementById('diqu')); var uploadedDataURL = "./js/data-1482909892121-BJ3auk-Se.json"; myChart.showLoading(); $.getJSON(uploadedDataURL, function(geoJson) { echarts.registerMap('jiangxi', geoJson); myChart.hideLoading(); var geoCoordMap = { '济南市': [117.121225, 36.66466], '菏泽市': [115.480656, 35.23375], '济宁市': [116.59, 35.38], '德州市': [116.39, 37.45], '聊城市': [115.97, 36.45], '泰安市': [117.13, 36.18], '临沂市': [118.35, 35.05], '淄博市': [118.05, 36.78], '枣庄市': [117.57, 34.86], '滨州市': [118.03, 37.36], '潍坊市': [119.1, 36.62], '东营市': [118.49, 37.46], '青岛市': [120.3, 36.62], '烟台市': [120.9, 37.32], '威海市': [122.1, 37.2], '日照市': [119.1, 35.62], '济宁市': [116.7, 35.42], '莱芜市': [117.70, 36.28], } var data = [{ name: '济南市', value: 590 }, { name: '菏泽市', value: 380 }, { name: '德州市', value: 352 }, { name: '聊城市', value: 99 }, { name: '泰安市', value: 189 }, { name: '临沂市', value: 252 }, { name: '淄博市', value: 158 }, { name: '枣庄市', value: 352 }, { name: '滨州市', value: 189 }, { name: '潍坊市', value:360 }, { name: '东营市', value: 280 }, { name: '青岛市', value: 180 }, { name: '烟台市', value: 190 }, { name: '威海市', value: 380 }, { name: '日照市', value: 390 }, { name: '济宁市', value: 290 }, { name: '莱芜市', value: 290 }, ]; var max = 480, min = 9; // todo var maxSize4Pin = 100, minSize4Pin = 20; 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 = { /*backgroundColor: '#020933',*/ title: { top: 20, text: '“会员活跃度” - 山东省', subtext: '', x: 'center', textStyle: { color: '#ccc' } }, tooltip: { trigger: 'item', formatter: function(params) { if (typeof(params.value)[2] == "undefined") { return params.name + ' : ' + params.value; } else { return params.name + ' : ' + params.value[2]; } } }, /* legend: { orient: 'vertical', y: 'bottom', x: 'right', data:['pm2.5'], textStyle: { color: '#fff' } },*/ legend: { orient: 'vertical', y: 'bottom', x: 'right', data: ['pm2.5'], textStyle: { color: '#fff' } }, visualMap: { show: false, min: 0, max: 500, left: 'left', top: 'bottom', text: ['高', '低'], // 文本，默认为数值文本 calculable: true, seriesIndex: [1], inRange: { /*color: ['#3B5077', '#031525'] ,// 蓝黑 color: ['#ffc0cb', '#800080'] ,// 红紫 color: ['#3C3B3F', '#605C3C'] ,// 黑绿 color: ['#0f0c29', '#302b63', '#24243e'], // 黑紫黑 color: ['#23074d', '#cc5333'] ,// 紫红 color: ['#00467F', '#A5CC82'] ,// 蓝绿 color: ['#1488CC', '#2B32B2'], // 浅蓝 color: ['#00467F', '#A5CC82'], // 蓝绿 color: ['#00467F', '#A5CC82'], // 蓝绿 color: ['#00467F', '#A5CC82'], // 蓝绿 color: ['#00467F', '#A5CC82'], // 蓝绿*/ } }, geo: { show: true, map: 'jiangxi', label: { normal: { show: false }, emphasis: { show: false, } }, roam: true, itemStyle: { normal: { areaColor: 'transparent', borderColor: '#3fdaff', borderWidth: 2, shadowColor: 'rgba(63, 218, 255, 0.5)', shadowBlur: 30 }, emphasis: { areaColor: '#2B91B7', } } }, series: [{ name: 'light', type: 'scatter', coordinateSystem: 'geo', data: convertData(data), symbolSize: function(val) { return val[2] / 10; }, label: { normal: { formatter: '{b}', position: 'right', show: true }, emphasis: { show: true } }, itemStyle: { normal: { color: '#F4E925' } } }, { type: 'map', map: 'jiangxi', geoIndex: 0, aspectScale: 0.75, //长宽比 showLegendSymbol: false, // 存在legend时显示 label: { normal: { show: false }, emphasis: { show: false, textStyle: { color: '#fff' } } }, roam: true, itemStyle: { normal: { areaColor: '#031525', borderColor: '#FFFFFF', }, emphasis: { areaColor: '#2B91B7' } }, animation: false, data: data }, { name: 'Top 5', type: 'effectScatter', coordinateSystem: 'geo', data: convertData(data.sort(function(a, b) { return b.value - a.value; }).slice(0, 5)), symbolSize: function(val) { return val[2] / 10; }, showEffectOn: 'render', rippleEffect: { brushType: 'stroke' }, hoverAnimation: true, label: { normal: { formatter: '{b}', position: 'right', show: true } }, itemStyle: { normal: { color: '#F4E925', shadowBlur: 10, shadowColor: '#05C3F9' } }, zlevel: 1 }, ] }; myChart.setOption(option); }); // 使用刚指定的配置项和数据显示图表。 window.addEventListener("resize",function(){ myChart.resize(); }); } function ceshis7() { var myChart = echarts.init(document.getElementById('chart_1')); // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize",function(){ myChart.resize(); }); } });