Echarts之二——地市联动数据统计

作者：大约在冬季1122_867 | 来源：互联网 | 2023-08-25 06:03

一、简介通过地图可以更直观地展示各个地区的统计数据，能够更清楚地进行数据分析。有些场景下，我们不仅仅需要对每个地市进行统计分析。更需要对地市一下的区

一、简介
　　通过地图可以更直观地展示各个地区的统计数据&＃xff0c;能够更清楚地进行数据分析。有些场景下&＃xff0c;我们不仅仅需要对每个地市进行统计分析。更需要对地市一下的区县进行数据统计&＃xff0c;并进行联动。此事我们可以通过Echart支持的 GeoJson 动态扩展地图类型,完成这一需求(GeoJson 相关规格书可访问&＃xff1a;http://www.oschina.net/translate/geojson-spec?cmp )。需求如下&＃xff1a;展示整改广东省的地图&＃xff0c;并显示统计信息&＃xff0c;当点击某一个地市的时候&＃xff0c;就显示该地市的地图&＃xff0c;并统计该地市区县的数据信息。

二、示例

　　1、下载echart
　　下载echart解压之后&＃xff0c;将包中的&＃xff0c;build\dist 目录下的内容拷贝到项目中的echart资源目录中。将doc\example 中的geoJson目录拷贝到echart资源目录中(geoJson 就是使用GeoJson的数据)。完成后&＃xff0c;项目结构如下&＃xff1a;

　　2、引入jquery 与 echart

　　${ctx} 为项目访问路径

　　3、配置echart路径&＃xff08;本示例使用模块的方式加载&＃xff09;　　

1 // 路径配置
2 require.config({
3 paths: {
4 echarts: &＃39;${ctxStatic}/echart&＃39;
5 }
6 });
7 c、使用
8
9 // 使用
10 require(
11 [
12 &＃39;echarts&＃39;,
13 &＃39;echarts/chart/map&＃39; // 使用地图就加载map模块
14 ],
15 function(ec) {
16 // 基于准备好的dom&＃xff0c;初始化echarts图表
17 var myChart &＃61; ec.init(document.getElementById(&＃39;main&＃39;));
18
19 //TODO 编写其他代码
20
21 // 为echarts对象加载数据
22 myChart.setOption(option);
23 }
24 );

　　4、代码

1 <%&＃64; page contentType&＃61;"text/html;charset&＃61;UTF-8"%>
2 <html>
3 <head>
4 <title>地市联动数据统计title>
5 <meta name&＃61;"decorator" content&＃61;"default" />
6 <meta http-equiv&＃61;"Content-Type" content&＃61;"text/html; charset&＃61;UTF-8">
7 <title>ECharts地图联动title>
8 <c:set var&＃61;"ctx" value&＃61;"${pageContext.request.contextPath}"/>
9 <script src&＃61;"${ctx}/static/jquery/jquery-1.8.3.min.js">script>
10 <script src&＃61;"${ctx}/static/echart/echarts.js">script>
11 head>
12 <body>
13
14 <div id&＃61;"main" style&＃61;"height:600px;width: 800px">div>
15 <script type&＃61;"text/Javascript">
16 var cityMap &＃61; {
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: &＃39;${ctx}/static/echart&＃39;
44 }
45 });
46
47 // 使用
48 require(
49 [
50 &＃39;echarts&＃39;,
51 &＃39;echarts/chart/map&＃39; // 使用地图就加载map模块
52 ],
53 function(ec) {
54 // 基于准备好的dom&＃xff0c;初始化echarts图表
55 var myChart &＃61; ec.init(document.getElementById(&＃39;main&＃39;));
56
57 var curIndx &＃61; 0;
58 var mapType &＃61; [];
59 var mapGeoData &＃61; require(&＃39;echarts/util/mapData/params&＃39;);
60 console.log(mapGeoData)
61 for (var city in cityMap) {
62 mapType.push(city);
63 // 自定义扩展图表类型
64 mapGeoData.params[city] &＃61; {
65 getGeoJson: (function(c) {
66 var geoJsonName &＃61; cityMap[c];
67 return function(callback) {
68 $.getJSON(&＃39;${ctx}/static/echart/geoJson/china-main-city/&＃39; &＃43; geoJsonName &＃43; &＃39;.json&＃39;, callback);
69 }
70 })(city)
71 }
72 }
73
74 var ecConfig &＃61; require(&＃39;echarts/config&＃39;);
75 var zrEvent &＃61; require(&＃39;zrender/tool/event&＃39;);
76
77 //绑定鼠标滚动事件
78 document.getElementById(&＃39;main&＃39;).onmousewheel &＃61; function(e) {
79 var event &＃61; e || window.event;
80 curIndx &＃43;&＃61; zrEvent.getDelta(event) > 0 ? (-1) : 1;
81 if (curIndx < 0) {
82 curIndx &＃61; mapType.length - 1;
83 }
84 var mt &＃61; mapType[curIndx % mapType.length];
85 option.series[0].mapType &＃61; mt;
86 option.title.subtext &＃61; mt &＃43; &＃39; &＃xff08;点击地市查看详情&＃xff09;&＃39;;
87 myChart.setOption(option, true);
88 zrEvent.stop(event);
89 };
90
91 //绑定鼠标选中事件
92 var num &＃61; 0;
93 myChart.on(ecConfig.EVENT.MAP_SELECTED, function(param) {
94 console.log(param);
95 var mt &＃61; param.target;
96 var len &＃61; mapType.length;
97 var flag &＃61; false;
98 for (var i &＃61; 0; i < len; i&＃43;&＃43;) {
99 if (mt &＃61;&＃61; mapType[i]) {
100 flag &＃61; true;
101 mt &＃61; mapType[i];
102 }
103 }
104
105 //没有下级、做特殊处理
106 if (mt &＃61;&＃61; &＃39;东莞市&＃39;) {
107 num&＃43;&＃43;;
108 console.log("do");
109 }
110 //没有下级、做特殊处理
111 if (mt &＃61;&＃61; &＃39;中山市&＃39;) {
112 num&＃43;&＃43;;
113 console.log("do");
114 }
115
116 console.log(num);
117 if (!flag || num &＃61;&＃61; 2) {
118 mt &＃61; &＃39;广东&＃39;;
119 num &＃61; 0;
120 }
121 option.series[0].mapType &＃61; mt;
122
123 option.title.subtext &＃61; mt &＃43; &＃39; &＃xff08;点击地市查看详情&＃xff09;&＃39;;
124 myChart.setOption(option, true);
125 });
126
127 option &＃61; {
128 title: {
129 text: &＃39;广东地市&＃39;,
130 link: &＃39;http://www.pactera.com/&＃39;,
131 subtext: &＃39;点击查看详情&＃39;
132 },
133 tooltip: {
134 trigger: &＃39;item&＃39;
135 },
136 dataRange: {
137 orient: &＃39;horizontal&＃39;,
138 x: &＃39;right&＃39;,
139 min: 0,
140 max: 1000,
141 color: [&＃39;orange&＃39;, &＃39;yellow&＃39;],
142 text: [&＃39;高&＃39;, &＃39;低&＃39;], // 文本&＃xff0c;默认为数值文本
143 calculable: true,
144 splitNumber: 0
145 },
146 series: [{
147 name: &＃39;广东省地市&＃39;,
148 type: &＃39;map&＃39;,
149 mapType: &＃39;广东&＃39;,
150 selectedMode: &＃39;single&＃39;,
151 itemStyle: {
152 normal: { borderWidth : 1, borderColor : &＃39;#999999&＃39;, label: { show: true } },
153 emphasis: { label: { show: true } }
154 },
155 data: [
156 {name: &＃39;清远市&＃39;,value: Math.round(Math.random()*1000)},
157 {name: &＃39;韶关市&＃39;,value: Math.round(Math.random()*1000)},
158 {name: &＃39;湛江市&＃39;,value: Math.round(Math.random()*1000)},
159 {name: &＃39;梅州市&＃39;,value: Math.round(Math.random()*1000)},
160 {name: &＃39;河源市&＃39;,value: Math.round(Math.random()*1000)},
161 {name: &＃39;肇庆市&＃39;,value: Math.round(Math.random()*1000)},
162 {name: &＃39;惠州市&＃39;,value: Math.round(Math.random()*1000)},
163 {name: &＃39;茂名市&＃39;,value: Math.round(Math.random()*1000)},
164 {name: &＃39;江门市&＃39;,value: Math.round(Math.random()*1000)},
165 {name: &＃39;阳江市&＃39;,value: Math.round(Math.random()*1000)},
166 {name: &＃39;云浮市&＃39;,value: Math.round(Math.random()*1000)},
167 {name: &＃39;广州市&＃39;,value: Math.round(Math.random()*1000)},
168 {name: &＃39;汕尾市&＃39;,value: Math.round(Math.random()*1000)},
169 {name: &＃39;揭阳市&＃39;,value: Math.round(Math.random()*1000)},
170 {name: &＃39;珠海市&＃39;,value: Math.round(Math.random()*1000)},
171 {name: &＃39;佛山市&＃39;,value: Math.round(Math.random()*1000)},
172 {name: &＃39;潮州市&＃39;,value: Math.round(Math.random()*1000)},
173 {name: &＃39;汕头市&＃39;,value: Math.round(Math.random()*1000)},
174 {name: &＃39;深圳市&＃39;,value: Math.round(Math.random()*1000)},
175 {name: &＃39;东莞市&＃39;,value: Math.round(Math.random()*1000)},
176 {name: &＃39;中山市&＃39;,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>

　　相关效果图如下&＃xff1a;

　　广东地图&＃xff1a;

　　广州市地图

推荐阅读

io
Html5-Canvas实现简易的抽奖转盘效果

本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果，同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码，并展示了实现的基本效果。 ... [详细]

蜡笔小新 2023-12-13 06:02:20
io
VueCLI多页分目录打包的步骤记录

本文介绍了使用VueCLI进行多页分目录打包的步骤，包括页面目录结构、安装依赖、获取Vue CLI需要的多页对象等内容。同时还提供了自定义不同模块页面标题的方法。 ... [详细]

蜡笔小新 2023-12-11 16:14:11
php
Jquery 跨域问题

为什么80%的码农都做不了架构师？JQuery1.2后getJSON方法支持跨域读取json数据，原理是利用一个叫做jsonp的概念。当然 ... [详细]

蜡笔小新 2023-12-09 18:24:55
io
JS进修笔记——闭包的运转机制和作用域

本文介绍了闭包的定义和运转机制，重点解释了闭包如何能够接触外部函数的作用域中的变量。通过词法作用域的查找规则，闭包可以访问外部函数的作用域。同时还提到了闭包的作用和影响。 ... [详细]

蜡笔小新 2023-12-14 18:45:00
io
Backwardsincompatible change made.

Commit1ced2a7433ea8937a1b260ea65d708f32ca7c95eintroduceda+Clonetraitboundtom ... [详细]

蜡笔小新 2023-12-14 15:35:09
io
实现下拉列表，点击其他位置自动隐藏效果的三种方式比较

目录实现效果：实现环境实现方法一：基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]

蜡笔小新 2023-12-14 15:03:14
window
《JavaScript高等顺序设计》进修笔记：JavaScript中的事宜流和事宜处置惩罚顺序

JavaScript和HTML之间的交互是经由过程事宜完成的。事宜：文档或浏览器窗口中发作的一些特定的交互霎时。能够运用侦听器（或处置惩罚递次来预订事宜），以便事宜发作时实行相应的 ... [详细]

蜡笔小新 2023-12-11 11:40:52
php
React基础篇一 - JSX语法扩展与使用

本文介绍了React基础篇一中的JSX语法扩展与使用。JSX是一种JavaScript的语法扩展，用于描述React中的用户界面。文章详细介绍了在JSX中使用表达式的方法，并给出了一个示例代码。最后，提到了JSX在编译后会被转化为普通的JavaScript对象。 ... [详细]

蜡笔小新 2023-12-11 11:37:05
request
Java后台Jsonp处理方法及其应用场景

本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议，它允许在服务器端通过Script tags返回至客户端，并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法，它是一种面向数据结构的分析和设计方法，以活动为中心，将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码，使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]

蜡笔小新 2023-12-10 10:55:21
function
jQuery如何判断一个元素是否被点击？

本文介绍了使用jQuery判断一个元素是否被点击的方法，并通过示例进行了具体说明。注意要指定父级，否则会执行多次。 ... [详细]

蜡笔小新 2023-12-10 10:23:28
io
绕过WAF的XSS检测机制及构建XSS payload的方法

本文介绍了绕过WAF的XSS检测机制的方法，包括确定payload结构、测试和混淆。同时提出了一种构建XSS payload的方法，该payload与安全机制使用的正则表达式不匹配。通过清理用户输入、转义输出、使用文档对象模型（DOM）接收器和源、实施适当的跨域资源共享（CORS）策略和其他安全策略，可以有效阻止XSS漏洞。但是，WAF或自定义过滤器仍然被广泛使用来增加安全性。本文的方法可以绕过这种安全机制，构建与正则表达式不匹配的XSS payload。 ... [详细]

蜡笔小新 2023-12-11 19:42:30
io
如何在输入字段中使用默认值的方法及代码

本文介绍了在满足特定条件时如何在输入字段中使用默认值的方法和相应的代码。当输入字段填充100或更多的金额时，使用50作为默认值；当输入字段填充有-20或更多（负数）时，使用-10作为默认值。文章还提供了相关的JavaScript和Jquery代码，用于动态地根据条件使用默认值。 ... [详细]

蜡笔小新 2023-12-10 12:35:46
function
jQuery实现简单的动画效果及用法详解

本文详细介绍了使用jQuery实现简单动画效果的方法，包括显示/隐藏、向上收缩/向下展开、淡入/淡出、自定义动画等。同时提供了具体的用法示例，并解释了参数的含义和使用技巧。通过本文的学习，读者可以掌握如何使用jQuery实现各种动画效果，为网页增添生动和互动性。 ... [详细]

蜡笔小新 2023-12-10 12:09:52
io
如何在Jquery中通过其样式值获取元素

本文介绍了如何在Jquery中通过元素的样式值获取元素，并将其赋值给一个变量。提供了5种解决方案供参考。 ... [详细]

蜡笔小新 2023-12-10 04:03:11
io
FormData上传文件同时附带其他参数的方法

本文介绍了使用FormData对象上传文件同时附带其他参数的方法。通过创建一个表单，将文件和参数添加到FormData对象中，然后使用ajax发送POST请求进行文件上传。在发送请求时，需要设置processData为false，告诉jquery不要处理发送的数据；同时设置contentType为false，告诉jquery不要设置content-Type请求头。 ... [详细]

蜡笔小新 2023-12-09 19:51:18

大约在冬季1122_867

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章