本系列文章配套代码获取有以下两种途径：
-
通过百度网盘获取：
链接：https://pan.baidu.com/s/1W26KrZK7RjwgxvulccTA9w?pwd=mnsj提取码：mnsj
-
前往GitHub获取：
https://github.com/returu/Data_Visualization在ECharts中绘制地理散点图其实很简单，只需要将series中的type设置为scatter，然后将坐标系coordinateSystem设置为百度地图bmap即可。
绘制地理散点图主要是数据的处理过程，可以使用python预先处理好，也可以在代码中使用JS操作。
绘制地理散点图的数据推荐使用如下格式：
1{name:数据名称 ,
2 value:[经度, 纬度, 要展现的数据]}
例如，本次有以下两个数据：
-
各城市空气质量数据：
1 const PM25data = [
2 { name: '招远', value: 12 },
3 { name: '青岛', value: 18 },
4 { name: '乳山', value: 18 },
5 { name: '莱西', value: 21 },
6 { name: '日照', value: 21 },
7 ......
8 ];
-
各城市经纬度坐标数据：
1 const geoCoordMap = {
2 招远: [120.38, 37.35],
3 青岛: [120.33, 36.07],
4 乳山: [121.52, 36.89],
5 莱西: [120.53, 36.86],
6 日照: [119.46, 35.42],
7 ......
8 };
需要处理成如下格式：
1[
2{name:'招远' ,value:[120.38, 37.35, 12]},
3{name:'青岛' ,value:[120.33, 36.07, 18]},
4{name:'乳山' ,value:[121.52, 36.89, 18]},
5......
6]
数据处理代码如下所示：
1 // 各城市空气质量数据
2 const PM25data = [
3 { name: '招远', value: 12 },
4 { name: '青岛', value: 18 },
5 { name: '乳山', value: 18 },
6 { name: '莱西', value: 21 },
7 { name: '日照', value: 21 },
8 { name: '文登', value: 25 },
9 { name: '威海', value: 25 },
10 { name: '烟台', value: 28 },
11 { name: '即墨', value: 30 },
12 { name: '莱州', value: 32 },
13 { name: '荣成', value: 34 },
14 { name: '营口', value: 37 },
15 { name: '蓬莱', value: 37 },
16 { name: '寿光', value: 40 },
17 { name: '平度', value: 44 },
18 { name: '胶州', value: 52 },
19 { name: '东营', value: 62 },
20 { name: '潍坊', value: 65 },
21 { name: '滨州', value: 70 },
22 { name: '枣庄', value: 84 },
23 { name: '淄博', value: 85 },
24 { name: '济南', value: 92 },
25 { name: '临沂', value: 103 },
26 { name: '泰安', value: 112 },
27 { name: '聊城', value: 116 },
28 { name: '德州', value: 120 },
29 { name: '济宁', value: 120 },
30 { name: '莱芜', value: 148 },
31 { name: '菏泽', value: 194 },
32 ];
33
34 // 各城市经纬度坐标数据
35 const geoCoordMap = {
36 招远: [120.38, 37.35],
37 青岛: [120.33, 36.07],
38 乳山: [121.52, 36.89],
39 莱西: [120.53, 36.86],
40 日照: [119.46, 35.42],
41 文登: [122.05, 37.2],
42 威海: [122.1, 37.5],
43 烟台: [121.39, 37.52],
44 即墨: [120.45, 36.38],
45 莱州: [119.942327, 37.177017],
46 荣成: [122.41, 37.16],
47 营口: [122.18, 40.65],
48 蓬莱: [120.75, 37.8],
49 寿光: [118.73, 36.86],
50 平度: [119.97, 36.77],
51 胶州: [120.03336, 36.264622],
52 东营: [118.49, 37.46],
53 潍坊: [119.1, 36.62],
54 滨州: [118.03, 37.36],
55 枣庄: [117.57, 34.86],
56 淄博: [118.05, 36.78],
57 济南: [117, 36.65],
58 临沂: [118.35, 35.05],
59 泰安: [117.13, 36.18],
60 聊城: [115.97, 36.45],
61 德州: [116.29, 37.45],
62 济宁: [116.59, 35.38],
63 莱芜: [117.67, 36.19],
64 菏泽: [115.480656, 35.23375],
65 };
66
67 // 数据转换操作
68 // {name:'招远' , value:[120.38, 37.35, 12]}
69 const convertData = function(PM25data) {
70 var res = [];
71 for (var i = 0; i < PM25data.length; i++) {
72 var geoCoord = geoCoordMap[PM25data[i].name]
73 if (geoCoord) {
74 res.push({
75 name: PM25data[i].name,
76 value: geoCoord.concat(PM25data[i].value)
77 })
78 }
79 }
80 return res;
81 }
处理完数据后，就可以绘制地理散点图。
因为本次通过引入外部json文件来设置地图样式，因此使用到了异步加载数据的内容。如若不清楚该内容可以查看以下文章：
在图表参数设置部分，除了在series中需要设置coordinateSystem: "bmap"，其余部分与二维图表类似，在此就不做过多介绍了。
代码如下所示：
1 $.getJSON('styleJson.json', function(styleJson) {
2
3 // 设置图表的参数
4 var option = {
5 // bmap组件
6 bmap: {
7 center: [117.135561, 36.678781], // 地图中心点坐标
8 zoom: 8, // 地图层级
9 roam: true, // 可以对地图进行缩放
10 // 地图底图样式设置
11 mapStyle: {
12 styleJson: styleJson
13 }
14 },
15
16 title: {
17 text: "山东省城市空气质量",
18 subtext: "数据来源：http://www.pm25.in",
19 left: "center"
20 },
21
22 // 提示框
23 tooltip: {
24 // 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
25 trigger: 'item'
26 },
27
28 // 数据系列
29 series: [{
30 name: "pm2.5",
31 type: "scatter",
32 coordinateSystem: "bmap",
33 data: convertData(PM25data),
34 encode: { value: 2 },
35 symbolSize: function(val) {
36 return val[2] / 5
37 },
38 // 图形上的文本标签
39 label: {
40 formatter: "{b}",
41 position: "right",
42 show: false
43 },
44 // 高亮的图形和标签样式
45 emphasis: {
46 label: {
47 show: true,
48 color:"red",
49 },
50 itemStyle:{
51 color:"red"
52 }
53 }
54 }],
55 };
可视化结果如下图所示：
更多参数和配置可以查看官方文档：
1https://echarts.apache.org/zh/option.html
本篇文章来源于微信公众号: 码农设计师
