Echarts 之三 —— 地市聯動數據統計二

時間 2019-11-06
標籤 echarts 之三地市聯動數據統計简体版
原文原文鏈接
1、簡介
　　除了是一個地圖以外，咱們也能夠使用多地圖進行地市、區縣聯動數據統計。需求以下：展現整改廣東省的地圖，並顯示統計信息，當點擊某一個地市的時候，就顯示該地市的地圖，並統計該地市區縣的數據信息。
2、示例
　　相關echarts配置見上一篇 Echarts 之二——地市聯動數據統計。
　　相關代碼以下：
javascript
  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 } } , 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>