Echarts 之三 —— 地市联动数据统计二
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Echarts 之三 —— 地市联动数据统计二相关的知识，希望对你有一定的参考价值。
一、简介
除了是一个地图之外，我们也可以使用多地图进行地市、区县联动数据统计。需求如下：展示整改广东省的地图，并显示统计信息，当点击某一个地市的时候，就显示该地市的地图，并统计该地市区县的数据信息。
二、示例
相关echarts配置见上一篇 Echarts 之二——地市联动数据统计 。
相关代码如下：
1 <%@ page contentType="text/html;charset=UTF-8"%> 2 <html> 3 <head> 4 <title>Echarts 地市、区县联动数据统计</title> 5 <meta name="decorator" content="default" /> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>ECharts</title> 8 <c:set var="ctx" value="${pageContext.request.contextPath}"/> 9 <script src="${ctx}/static/jquery/jquery-1.8.3.min.js"></script> 10 <script src="${ctx}/static/echart/echarts.js"></script> 11 </head> 12 <body> 13 <!-- 为ECharts准备一个具备大小（宽高）的Dom --> 14 <div id="main" style="height:600px ; width: 850px; margin: 0 auto;"></div> 15 <script type="text/javascript"> 16 var cityMap = { 17 "广州市": "440100", 18 "韶关市": "440200", 19 "深圳市": "440300", 20 "珠海市": "440400", 21 "汕头市": "440500", 22 "佛山市": "440600", 23 "江门市": "440700", 24 "湛江市": "440800", 25 "茂名市": "440900", 26 "肇庆市": "441200", 27 "惠州市": "441300", 28 "梅州市": "441400", 29 "汕尾市": "441500", 30 "河源市": "441600", 31 "阳江市": "441700", 32 "清远市": "441800", 33 "东莞市": "441900", 34 "中山市": "442000", 35 "潮州市": "445100", 36 "揭阳市": "445200", 37 "云浮市": "445300" 38 }; 39 40 // 路径配置 41 require.config({ 42 paths: { 43 echarts: ${ctx}/static/echart‘ 44 } 45 }); 46 47 // 使用 48 require( 49 [ 50 ‘echarts‘, 51 ‘echarts/chart/map‘ // 使用柱状图就加载bar模块，按需加载 52 ], 53 function(ec) { 54 var myChart = ec.init(document.getElementById(‘main‘)); 55 option = { 56 tooltip: { trigger: ‘item‘ }, 57 series: [{ 58 tooltip: { 59 trigger: ‘item‘, 60 formatter: ‘{b} {c}‘ 61 }, 62 name: ‘选择器‘, 63 type: ‘map‘, 64 mapType: ‘广东‘, 65 mapLocation: { 66 x: ‘left‘, 67 y: ‘top‘, 68 width: ‘30%‘ 69 }, 70 roam: true, 71 selectedMode: ‘single‘, 72 itemStyle: { 73 emphasis: { label: { show: true } } 74 }, 75 data: [ 76 {name: ‘清远市‘,value: Math.round(Math.random()*1000)}, 77 {name: ‘韶关市‘,value: Math.round(Math.random()*1000)}, 78 {name: ‘湛江市‘,value: Math.round(Math.random()*1000)}, 79 {name: ‘梅州市‘,value: Math.round(Math.random()*1000)}, 80 {name: ‘河源市‘,value: Math.round(Math.random()*1000)}, 81 {name: ‘肇庆市‘,value: Math.round(Math.random()*1000)}, 82 {name: ‘惠州市‘,value: Math.round(Math.random()*1000)}, 83 {name: ‘茂名市‘,value: Math.round(Math.random()*1000)}, 84 {name: ‘江门市‘,value: Math.round(Math.random()*1000)}, 85 {name: ‘阳江市‘,value: Math.round(Math.random()*1000)}, 86 {name: ‘云浮市‘,value: Math.round(Math.random()*1000)}, 87 {name: ‘广州市‘,value: Math.round(Math.random()*1000)}, 88 {name: ‘汕尾市‘,value: Math.round(Math.random()*1000)}, 89 {name: ‘揭阳市‘,value: Math.round(Math.random()*1000)}, 90 {name: ‘珠海市‘,value: Math.round(Math.random()*1000)}, 91 {name: ‘佛山市‘,value: Math.round(Math.random()*1000)}, 92 {name: ‘潮州市‘,value: Math.round(Math.random()*1000)}, 93 {name: ‘汕头市‘,value: Math.round(Math.random()*1000)}, 94 {name: ‘深圳市‘,value: Math.round(Math.random()*1000)}, 95 {name: ‘东莞市‘,value: Math.round(Math.random()*1000)}, 96 {name: ‘中山市‘,value: Math.round(Math.random()*1000)} 97 ] 98 }], 99 animation: true 100 }; 101 102 var ecConfig = require(‘echarts/config‘); 103 myChart.on(ecConfig.EVENT.MAP_SELECTED, function(param) {//选择地市的时候，显示地市详情 104 var selected = param.selected; 105 var selectedProvince; 106 var name; 107 for (var i = 0, l = option.series[0].data.length; i < l; i++) { 108 name = option.series[0].data[i].name; 109 option.series[0].data[i].selected = selected[name]; 110 if (selected[name]) { 111 selectedProvince = name; 112 } 113 } 114 if (typeof selectedProvince == ‘undefined‘) { 115 option.series.splice(1); 116 option.legend = null; 117 option.dataRange = null; 118 myChart.setOption(option, true); 119 return; 120 } 121 option.series[1] = { 122 name: ‘模拟数据‘, 123 type: ‘map‘, 124 mapType: selectedProvince, 125 itemStyle: { 126 emphasis: { label: { show: true } } 127 }, 128 mapLocation: { x: ‘35%‘ }, 129 roam: true, 130 data: [ 131 {name: ‘清远市‘,value: Math.round(Math.random()*1000)}, 132 {name: ‘韶关市‘,value: Math.round(Math.random()*1000)}, 133 {name: ‘湛江市‘,value: Math.round(Math.random()*1000)}, 134 {name: ‘梅州市‘,value: Math.round(Math.random()*1000)}, 135 {name: ‘河源市‘,value: Math.round(Math.random()*1000)}, 136 {name: ‘肇庆市‘,value: Math.round(Math.random()*1000)}, 137 {name: ‘惠州市‘,value: Math.round(Math.random()*1000)}, 138 {name: ‘茂名市‘,value: Math.round(Math.random()*1000)}, 139 {name: ‘江门市‘,value: Math.round(Math.random()*1000)}, 140 {name: ‘阳江市‘,value: Math.round(Math.random()*1000)}, 141 {name: ‘云浮市‘,value: Math.round(Math.random()*1000)}, 142 {name: ‘广州市‘,value: Math.round(Math.random()*1000)}, 143 {name: ‘汕尾市‘,value: Math.round(Math.random()*1000)}, 144 {name: ‘揭阳市‘,value: Math.round(Math.random()*1000)}, 145 {name: ‘珠海市‘,value: Math.round(Math.random()*1000)}, 146 {name: ‘佛山市‘,value: Math.round(Math.random()*1000)}, 147 {name: ‘潮州市‘,value: Math.round(Math.random()*1000)}, 148 {name: ‘汕头市‘,value: Math.round(Math.random()*1000)}, 149 {name: ‘深圳市‘,value: Math.round(Math.random()*1000)}, 150 {name: ‘东莞市‘,value: Math.round(Math.random()*1000)}, 151 {name: ‘中山市‘,value: Math.round(Math.random()*1000)}, 152 //清远 153 {name: "佛冈县",value: Math.round(Math.random()*1000)}, 154 {name: "连南瑶族自治县",value: Math.round(Math.random()*1000)}, 155 {name: "连山壮族瑶族自治县",value: Math.round(Math.random()*1000)}, 156 {name: "连州市",value: Math.round(Math.random()*1000)}, 157 {name: "清城区",value: Math.round(Math.random()*1000)}, 158 {name: "清新县",value: Math.round(Math.random()*1000)}, 159 {name: "阳山县",value: Math.round(Math.random()*1000)}, 160 {name: "英德市",value: Math.round(Math.random()*1000)}, 161 //韶关 162 {name: "乐昌市",value: Math.round(Math.random()*1000)}, 163 {name: "南雄市",value: Math.round(Math.random(以上是关于Echarts 之三 —— 地市联动数据统计二的主要内容，如果未能解决你的问题，请参考以下文章