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 ;  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                      '30%'
 69                 },
 70                 roam: true,
 71                 selectedMode: 'single',
 72                 itemStyle: { 
 73                     emphasis: { label: { show: true } } , normal : {borderWidth : 1, borderColor : '#999999' , 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()*1000)}, 
164                         {name: "曲江区",value: Math.round(Math.random()*1000)}, 
165                         {name: "仁化县",value: Math.round(Math.random()*1000)}, 
166                         {name: "乳源瑶族自治县",value: Math.round(Math.random()*1000)}, 
167                         {name: "始兴县",value: Math.round(Math.random()*1000)}, 
168                         {name: "翁源县",value: Math.round(Math.random()*1000)}, 
169                         {name: "武江区",value: Math.round(Math.random()*1000)}, 
170                         {name: "新丰县",value: Math.round(Math.random()*1000)},
171                         {name: "浈江区",value: Math.round(Math.random()*1000)}, 
172                         //湛江
173                         {name: "赤坎区",value: Math.round(Math.random()*1000)},
174                         {name: "雷州市",value: Math.round(Math.random()*1000)},
175                         {name: "廉江市",value: Math.round(Math.random()*1000)},
176                         {name: "麻章区",value: Math.round(Math.random()*1000)},
177                         {name: "坡头区",value: Math.round(Math.random()*1000)},
178                         {name: "遂溪县",value: Math.round(Math.random()*1000)},
179                         {name: "吴川市",value: Math.round(Math.random()*1000)},
180                         {name: "霞山区",value: Math.round(Math.random()*1000)},
181                         {name: "徐闻县",value: Math.round(Math.random()*1000)},
182                         //河源
183                         {name: "紫金县",value: Math.round(Math.random()*1000)},
184                         {name: "东源县",value: Math.round(Math.random()*1000)},
185                         {name: "和平县",value: Math.round(Math.random()*1000)},
186                         {name: "连平县",value: Math.round(Math.random()*1000)},
187                         {name: "龙川县",value: Math.round(Math.random()*1000)},
188                         {name: "源城区",value: Math.round(Math.random()*1000)},
189                         //肇庆
190                         {name: "德庆县",value: Math.round(Math.random()*1000)},
191                         {name: "鼎湖区",value: Math.round(Math.random()*1000)},
192                         {name: "端州区",value: Math.round(Math.random()*1000)},
193                         {name: "封开县",value: Math.round(Math.random()*1000)},
194                         {name: "高要市",value: Math.round(Math.random()*1000)},
195                         {name: "广宁县",value: Math.round(Math.random()*1000)},
196                         {name: "怀集县",value: Math.round(Math.random()*1000)},
197                         {name: "四会市",value: Math.round(Math.random()*1000)},
198                         //惠州
199                         {name: "博罗县",value: Math.round(Math.random()*1000)},
200                         {name: "博罗县",value: Math.round(Math.random()*1000)},
201                         {name: "惠城区",value: Math.round(Math.random()*1000)},
202                         {name: "惠东县",value: Math.round(Math.random()*1000)},
203                         {name: "惠阳区",value: Math.round(Math.random()*1000)},
204                         {name: "龙门县",value: Math.round(Math.random()*1000)},
205                         //茂名市
206                         {name: "电白县",value: Math.round(Math.random()*1000)},
207                         {name: "高州市",value: Math.round(Math.random()*1000)},
208                         {name: "化州市",value: Math.round(Math.random()*1000)},
209                         {name: "茂港区",value: Math.round(Math.random()*1000)},
210                         {name: "茂南区",value: Math.round(Math.random()*1000)},
211                         {name: "信宜市",value: Math.round(Math.random()*1000)},
212                         //江门
213                         {name: "江海区",value: Math.round(Math.random()*1000)},
214                         {name: "蓬江区",value: Math.round(Math.random()*1000)},
215                         {name: "台山市",value: Math.round(Math.random()*1000)},
216                         {name: "开平市",value: Math.round(Math.random()*1000)},
217                         {name: "恩平市",value: Math.round(Math.random()*1000)},
218                         {name: "鹤山市",value: Math.round(Math.random()*1000)},
219                         {name: "新会区",value: Math.round(Math.random()*1000)},
220                         //阳江市
221                         {name: "阳春市",value: Math.round(Math.random()*1000)},
222                         {name: "阳东县",value: Math.round(Math.random()*1000)},
223                         {name: "江城区",value: Math.round(Math.random()*1000)},
224                         {name: "阳西县",value: Math.round(Math.random()*1000)},
225                         //云浮市
226                         {name: "罗定市",value: Math.round(Math.random()*1000)},
227                         {name: "新兴县",value: Math.round(Math.random()*1000)},
228                         {name: "郁南县",value: Math.round(Math.random()*1000)},
229                         {name: "云安县",value: Math.round(Math.random()*1000)},
230                         {name: "云城区",value: Math.round(Math.random()*1000)},
231                         //广州
232                         {name: "海珠区",value: Math.round(Math.random()*1000)},
233                         {name: "番禺区",value: Math.round(Math.random()*1000)},
234                         {name: "白云区",value: Math.round(Math.random()*1000)},
235                         {name: "从化市",value: Math.round(Math.random()*1000)}, 
236                         {name: "花都区",value: Math.round(Math.random()*1000)},
237                         {name: "黄埔区",value: Math.round(Math.random()*1000)},
238                         {name: "荔湾区",value: Math.round(Math.random()*1000)}, 
239                         {name: "萝岗区",value: Math.round(Math.random()*1000)},
240                         {name: "南沙区",value: Math.round(Math.random()*1000)}, 
241                         {name: "天河区",value: Math.round(Math.random()*1000)},
242                         {name: "越秀区",value: Math.round(Math.random()*1000)},
243                         {name: "增城市",value: Math.round(Math.random()*1000)},
244                         //汕尾市
245                         {name: "海丰县",value: Math.round(Math.random()*1000)},
246                         {name: "陆丰市",value: Math.round(Math.random()*1000)},
247                         {name: "陆河县",value: Math.round(Math.random()*1000)},
248                         {name: "城区",value: Math.round(Math.random()*1000)},
249                         //揭阳市
250                         {name: "榕城区",value: Math.round(Math.random()*1000)},
251                         {name: "惠来县",value: Math.round(Math.random()*1000)},
252                         {name: "揭东县",value: Math.round(Math.random()*1000)},
253                         {name: "揭西县",value: Math.round(Math.random()*1000)},
254                         {name: "普宁市",value: Math.round(Math.random()*1000)},
255                         //珠海
256                         {name: "斗门区", value: Math.round(Math.random()*1000)},
257                         {name: "金湾区", value: Math.round(Math.random()*1000)},
258                         {name: "香洲区", value: Math.round(Math.random()*1000)},
259                         //佛山市
260                         {name: "高明区", value: Math.round(Math.random()*1000)},
261                         {name: "南海区", value: Math.round(Math.random()*1000)},
262                         {name: "三水区", value: Math.round(Math.random()*1000)},
263                         {name: "顺德区", value: Math.round(Math.random()*1000)},
264                         {name: "禅城区", value: Math.round(Math.random()*1000)},
265                         //潮州市
266                         {name: "潮安县",value: Math.round(Math.random()*1000)},
267                         {name: "饶平县",value: Math.round(Math.random()*1000)},
268                         {name: "湘桥区",value: Math.round(Math.random()*1000)},
269                         //汕头市
270                         {name: "南澳县",value: Math.round(Math.random()*1000)},
271                         {name: "濠江区",value: Math.round(Math.random()*1000)},
272                         {name: "金平区",value: Math.round(Math.random()*1000)},
273                         {name: "龙湖区",value: Math.round(Math.random()*1000)},
274                         {name: "澄海区",value: Math.round(Math.random()*1000)},
275                         {name: "潮阳区",value: Math.round(Math.random()*1000)},
276                         {name: "潮南区",value: Math.round(Math.random()*1000)},
277                         //深圳市
278                         {name: "南山区",value: Math.round(Math.random()*1000)},
279                         {name: "盐田区",value: Math.round(Math.random()*1000)},
280                         {name: "宝安区",value: Math.round(Math.random()*1000)},
281                         {name: "福田区",value: Math.round(Math.random()*1000)},
282                         {name: "龙岗区",value: Math.round(Math.random()*1000)},
283                         {name: "罗湖区",value: Math.round(Math.random()*1000)}
284                         //东莞市
285                         //中山市
286                     ]
287                 };
288                 option.legend = {
289                     x: 'right',
290                     data: ['模拟数据']
291                 };
292                 option.dataRange = {
293                     orient: 'horizontal',
294                     x: 'right',
295                     min: 0,
296                     max: 1000,
297                     color: ['orange', 'yellow'],
298                     text: ['高', '低'], // 文本，默认为数值文本
299                     splitNumber: 0
300                 };
301 
302                 var curIndx = 0;
303                 var mapType = [];
304                 var mapGeoData = require('echarts/util/mapData/params');
305                 console.log(mapGeoData)
306                 for (var city in cityMap) {
307                     mapType.push(city);
308                     // 自定义扩展图表类型
309                     mapGeoData.params[city] = {
310                         getGeoJson: (function(c) {
311                             var geoJsonName = cityMap[c];
312                             return function(callback) {//请求地市地理weizhi详情数据
313                                 $.getJSON('${ctx}/static/echart/geoJson/china-main-city/' + geoJsonName + '.json', callback);
314                             }
315                         })(city)
316                     }
317                 }
318 
319                 myChart.setOption(option, true);
320             })
321             // 为echarts对象加载数据 
322         myChart.setOption(option);
323     }
324 );
325 </script>
326 </body>
　　效果图如下：
相关阅读:
【总结整理】令人惊喜的app
【总结整理】还没被网购取代的场景
 【总结整理】需求原因
 【总结整理】好的业务架构有哪些特征？
【总结整理】交互要点
 【总结整理】交互心理学---摘自《人人都是产品经理》
【总结整理】用户需求--摘自《人人都是产品经理》
【总结整理】UGC内容
 ArcGIS Runtime SDK for Android 授权(arcgis android 去除水印)
【原创翻译】ArcGis Android 10.2.4更新内容简介
原文地址：https://www.cnblogs.com/always-online/p/5175604.html