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

時間 2019-11-06

標籤 echarts 之二地市聯動數據統計简体版

原文原文鏈接

1、簡介
　　經過地圖能夠更直觀地展現各個地區的統計數據，可以更清楚地進行數據分析。有些場景下，咱們不單單須要對每一個地市進行統計分析。更須要對地市一下的區縣進行數據統計，並進行聯動。此事咱們能夠經過Echart支持的 GeoJson 動態擴展地圖類型,完成這一需求(GeoJson 相關規格書可訪問：http://www.oschina.net/translate/geojson-spec?cmp )。需求以下：展現整改廣東省的地圖，並顯示統計信息，當點擊某一個地市的時候，就顯示該地市的地圖，並統計該地市區縣的數據信息。javascript

2、示例html

　　一、下載echart
　　下載echart解壓以後，將包中的，build\dist 目錄下的內容拷貝到項目中的echart資源目錄中。將doc\example 中的geoJson目錄拷貝到echart資源目錄中(geoJson 就是使用GeoJson的數據)。完成後，項目結構以下：java

　　二、引入jquery 與 echartjquery

<script src="${ctx}/static/jquery/jquery-1.8.3.min.js"></script>
<script src="${ctx}/static/echart/echarts.js"></script>

　　${ctx} 爲項目訪問路徑json

　　三、配置echart路徑（本示例使用模塊的方式加載）　　echarts

 1 // 路徑配置
 2 require.config({
 3   paths: {
 4     echarts: '${ctxStatic}/echart'
 5   }
 6 });        
 7         c、使用
 8 
 9 // 使用
10 require(
11   [
12     'echarts',
13     'echarts/chart/map' // 使用地圖就加載map模塊
14   ],
15   function(ec) {
16     // 基於準備好的dom，初始化echarts圖表
17     var myChart = ec.init(document.getElementById('main'));
18     
19     //TODO 編寫其餘代碼
20     
21     // 爲echarts對象加載數據 
22     myChart.setOption(option);
23   }
24 );

　　四、代碼dom

  1 <%@ page contentType="text/html;charset=UTF-8"%> 
  2 <html>
  3 <head>
  4 <title>地市聯動數據統計</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: 800px"></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' // 使用地圖就加載map模塊
 52   ],
 53   function(ec) {
 54     // 基於準備好的dom，初始化echarts圖表
 55     var myChart = ec.init(document.getElementById('main'));
 56 
 57     var curIndx = 0;
 58     var mapType = [];
 59     var mapGeoData = require('echarts/util/mapData/params');
 60     console.log(mapGeoData)
 61     for (var city in cityMap) {
 62       mapType.push(city);
 63       // 自定義擴展圖表類型
 64       mapGeoData.params[city] = {
 65         getGeoJson: (function(c) {
 66           var geoJsonName = cityMap[c];
 67           return function(callback) {
 68             $.getJSON('${ctx}/static/echart/geoJson/china-main-city/' + geoJsonName + '.json', callback);
 69           }
 70         })(city)
 71       }
 72     }
 73 
 74     var ecConfig = require('echarts/config');
 75     var zrEvent = require('zrender/tool/event');
 76     
 77     //綁定鼠標滾動事件
 78     document.getElementById('main').onmousewheel = function(e) {
 79       var event = e || window.event;
 80       curIndx += zrEvent.getDelta(event) > 0 ? (-1) : 1;
 81       if (curIndx < 0) {
 82         curIndx = mapType.length - 1;
 83       }
 84       var mt = mapType[curIndx % mapType.length];
 85       option.series[0].mapType = mt;
 86       option.title.subtext = mt + ' （點擊地市查看詳情）';
 87       myChart.setOption(option, true);
 88       zrEvent.stop(event);
 89     };
 90     
 91     //綁定鼠標選中事件
 92     var num = 0;
 93     myChart.on(ecConfig.EVENT.MAP_SELECTED, function(param) {
 94       console.log(param);
 95       var mt = param.target;
 96       var len = mapType.length;
 97       var flag = false;
 98       for (var i = 0; i < len; i++) {
 99         if (mt == mapType[i]) {
100           flag = true;
101           mt = mapType[i];
102         }
103       }
104 
105       //沒有下級、作特殊處理
106       if (mt == '東莞市') {
107         num++;
108         console.log("do");
109       }
110       //沒有下級、作特殊處理                     
111       if (mt == '中山市') {
112         num++;
113         console.log("do");
114       }
115 
116       console.log(num);
117       if (!flag || num == 2) {
118         mt = '廣東';
119         num = 0;
120       }
121       option.series[0].mapType = mt;
122 
123       option.title.subtext = mt + ' （點擊地市查看詳情）';
124       myChart.setOption(option, true);
125     });
126 
127     option = {
128       title: {
129         text: '廣東地市',
130         link: 'http://www.pactera.com/',
131         subtext: '點擊查看詳情'
132       },
133       tooltip: {
134         trigger: 'item'
135       },
136       dataRange: {
137         orient: 'horizontal',
138         x: 'right',
139         min: 0,
140         max: 1000,
141         color: ['orange', 'yellow'],
142         text: ['高', '低'], // 文本，默認爲數值文本
143         calculable: true,
144         splitNumber: 0
145       },
146       series: [{
147         name: '廣東省地市',
148         type: 'map',
149         mapType: '廣東',
150         selectedMode: 'single',
151         itemStyle: {
152           normal: { borderWidth : 1, borderColor : '#999999', label: { show: true } },
153           emphasis: { label: { show: true } }
154         },
155         data: [                
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             {name: '肇慶市',value: Math.round(Math.random()*1000)},
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             {name: '潮州市',value: Math.round(Math.random()*1000)},
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             
178             //清遠              
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             {name: "連州市",value: Math.round(Math.random()*1000)},
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             //韶關
188             {name: "樂昌市",value: Math.round(Math.random()*1000)}, 
189             {name: "南雄市",value: Math.round(Math.random()*1000)}, 
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             {name: "吳川市",value: Math.round(Math.random()*1000)},
206             {name: "霞山區",value: Math.round(Math.random()*1000)},
207             {name: "徐聞縣",value: Math.round(Math.random()*1000)},
208             //河源
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             {name: "連平縣",value: Math.round(Math.random()*1000)},
213             {name: "龍川縣",value: Math.round(Math.random()*1000)},
214             {name: "源城區",value: Math.round(Math.random()*1000)},
215             //肇慶
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             {name: "高要市",value: Math.round(Math.random()*1000)},
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             //惠州
225             {name: "博羅縣",value: Math.round(Math.random()*1000)},
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               //江門
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             {name: "鶴山市",value: Math.round(Math.random()*1000)},
245             {name: "新會區",value: Math.round(Math.random()*1000)},
246             //陽江市
247             {name: "陽春市",value: Math.round(Math.random()*1000)},
248             {name: "陽東縣",value: Math.round(Math.random()*1000)},
249             {name: "江城區",value: Math.round(Math.random()*1000)},
250             {name: "陽西縣",value: Math.round(Math.random()*1000)},
251             //雲浮市
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             {name: "雲安縣",value: Math.round(Math.random()*1000)},
256             {name: "云城區",value: Math.round(Math.random()*1000)},
257             //廣州
258             {name: "海珠區",value: Math.round(Math.random()*1000)},
259             {name: "番禺區",value: Math.round(Math.random()*1000)},
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             {name: "蘿崗區",value: Math.round(Math.random()*1000)},
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             {name: "增城市",value: Math.round(Math.random()*1000)},
270             //汕尾市
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             //揭陽市
276             {name: "榕城區",value: Math.round(Math.random()*1000)},
277             {name: "惠來縣",value: Math.round(Math.random()*1000)},
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             //珠海
282             {name: "斗門區", value: Math.round(Math.random()*1000)},
283             {name: "金灣區", value: Math.round(Math.random()*1000)},
284             {name: "香洲區", value: Math.round(Math.random()*1000)},
285             //佛山市
286             {name: "高明區", value: Math.round(Math.random()*1000)},
287             {name: "南海區", value: Math.round(Math.random()*1000)},
288             {name: "三水區", value: Math.round(Math.random()*1000)},
289             {name: "順德區", value: Math.round(Math.random()*1000)},
290             {name: "禪城區", value: Math.round(Math.random()*1000)},
291             //潮州市
292             {name: "潮安縣",value: Math.round(Math.random()*1000)},
293             {name: "饒平縣",value: Math.round(Math.random()*1000)},
294             {name: "湘橋區",value: Math.round(Math.random()*1000)},
295             //汕頭市
296             {name: "南澳縣",value: Math.round(Math.random()*1000)},
297             {name: "濠江區",value: Math.round(Math.random()*1000)},
298             {name: "金平區",value: Math.round(Math.random()*1000)},
299             {name: "龍湖區",value: Math.round(Math.random()*1000)},
300             {name: "澄海區",value: Math.round(Math.random()*1000)},
301             {name: "潮陽區",value: Math.round(Math.random()*1000)},
302             {name: "潮南區",value: Math.round(Math.random()*1000)},
303             //深圳市
304             {name: "南山區",value: Math.round(Math.random()*1000)},
305             {name: "鹽田區",value: Math.round(Math.random()*1000)},
306             {name: "寶安區",value: Math.round(Math.random()*1000)},
307             {name: "福田區",value: Math.round(Math.random()*1000)},
308             {name: "龍崗區",value: Math.round(Math.random()*1000)},
309             {name: "羅湖區",value: Math.round(Math.random()*1000)}
310               //東莞市
311              //中山市
312         ]
313       }]
314     };
315     // 爲echarts對象加載數據 
316     myChart.setOption(option);
317   }
318 );
319 </script>
320 </body>