本系列文章配套代码获取有以下两种途径：
-
通过百度网盘获取：
链接：https://pan.baidu.com/s/1W26KrZK7RjwgxvulccTA9w?pwd=mnsj提取码：mnsj
-
前往GitHub获取：
https://github.com/returu/Data_Visualization在ECharts中绘制OD图也是使用到路径图，即将series中的type设置为"lines"。
在【35.地理数据可视化——路径图】介绍了如何绘制表示北京市公交线路的路径图，因为公交线路是连续的多段线，因此要求的数据需要有每条线路的所有端点坐标信息，也需要通过设置polyline: true来绘制多段线。
而本次绘制表示人口迁徙情况的OD图只需要绘制O点和D点两个端点连成的线段即可，但是数据中需要有表示人口迁徙量的数据信息，因此要求的数据形式如下所示（对应文件夹中data.json文件）：
1{
2 // O点和D点的坐标信息
3 "coords": [
4 [116.4551, 40.2539],
5 [127.9688, 45.368]
6 ],
7 // 表示人口迁徙量的信息
8 "value": 10
9},
可以使用Python或者其他软件将原始数据进行处理，以满足数据格式要求，再次就不做过多介绍。
series中进行相应设置：-
在 lineStyle中进行线样式的配置； -
在 effect中进行线特效的配置； -
通过 visualMap视觉映射组件使得线按照迁徙量数据显示颜色；
代码如下所示：
1 $.getJSON('data.json', function(data) {
2 $.getJSON('city_points.json', function(city_points) {
3 $.getJSON('styleJson.json', function(styleJson) {
4
5 // 设置图表的参数
6 var option = {
7 // bmap组件
8 bmap: {
9 center: [108.9010, 34.4294], // 地图中心点坐标
10 zoom: 6, // 地图层级
11 roam: true, // 可以对地图进行缩放
12 // 地图底图样式设置
13 mapStyle: {
14 styleJson: styleJson
15 }
16 },
17
18 title: {
19 text: "北京迁入人口来源地",
20 textStyle: { color: "#fff", fontSize: 30 },
21 subtext: "数据来源：纯属虚构",
22 subtextStyle: { color: "#fff" },
23 left: "center"
24 },
25
26 // 视觉映射组件
27 visualMap: {
28 max: 100,
29 inRange: {
30 color: ['green', '#eac736', '#d94e5d'],
31 colorAlpha: [0, 1]
32 },
33 },
34
35 // 数据系列
36 series: [{
37 type: 'lines', // lines 类型图表
38 coordinateSystem: 'bmap', // 该系列使用的坐标系
39 data: data,
40 // 线样式
41 lineStyle: {
42 normal: {
43 // color: '#fff', // #a6c84c
44 width: 0.8,
45 curveness: 0.1
46 }
47 },
48 // 线特效的配置
49 effect: {
50 show: true, // 是否显示特效
51 period: 10, // 特效动画的时间，单位为 s
52 constantSpeed: 100, // 配置特效图形的移动动画是否是固定速度，单位像素/秒
53 trailLength: 0.7, // 特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长
54 symbolSize: 3 // 特效标记的大小
55 },
56 },
57 ],
58 };
type: 'effectScatter'绘制带有涟漪特效动画的散点（气泡）图。利用动画特效对OD图的节点进行视觉突出。city_points.json文件）：1{
2// 城市名
3"name": "黑龙江",
4// [127.9688, 45.368, 10] : [经度，纬度，迁徙量]
5"value": [127.9688, 45.368, 10]
6}
1 $.getJSON('data.json', function(data) {
2 $.getJSON('city_points.json', function(city_points) {
3 $.getJSON('styleJson.json', function(styleJson) {
4
5 // 设置图表的参数
6 var option = {
7 // bmap组件
8 bmap: {
9 center: [108.9010, 34.4294], // 地图中心点坐标
10 zoom: 6, // 地图层级
11 roam: true, // 可以对地图进行缩放
12 // 地图底图样式设置
13 mapStyle: {
14 styleJson: styleJson
15 }
16 },
17
18 title: {
19 text: "北京迁入人口来源地",
20 textStyle: { color: "#fff", fontSize: 30 },
21 subtext: "数据来源：纯属虚构",
22 subtextStyle: { color: "#fff" },
23 left: "center"
24 },
25
26 // 视觉映射组件
27 visualMap: {
28 max: 100,
29 inRange: {
30 color: ['green', '#eac736', '#d94e5d'],
31 colorAlpha: [0, 1]
32 },
33 },
34
35 // 数据系列
36 series: [{
37 type: 'lines', // lines 类型图表
38 coordinateSystem: 'bmap', // 该系列使用的坐标系
39 data: data,
40 // 线样式
41 lineStyle: {
42 normal: {
43 // color: '#fff', // #a6c84c
44 width: 0.8, // 线宽
45 curveness: 0.1 // 边的曲度，支持从 0 到 1 的值，值越大曲度越大
46 }
47 },
48 // 线特效的配置
49 effect: {
50 show: true, // 是否显示特效
51 period: 10, // 特效动画的时间，单位为 s
52 constantSpeed: 100, // 配置特效图形的移动动画是否是固定速度，单位像素/秒
53 trailLength: 0.7, // 特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长
54 symbolSize: 3 // 特效标记的大小
55 },
56 },{
57 type: 'effectScatter',
58 coordinateSystem: 'bmap', // 带有涟漪特效动画的散点（气泡）图
59 // 图形上的文本标签
60 label: {
61 //
62 emphasis: {
63 show: true,
64 position: 'right', // 标签的位置
65 fontSize: 15,
66 // 标签内容格式器
67 // 通过回调函数设置显示内容：城市名称+迁徙量
68 formatter: function(params) { return params['name'] + ' - ' + params['value'][2] }
69 }
70 },
71 data: city_points,
72 // 通过回调函数设置标记的大小
73 // params[2]为每个OD的迁徙量
74 symbolSize: function(params) { return params[2] ** 0.5 *2 }
75 }
76 ],
77 };
更多参数和配置可以查看官方文档：
1https://echarts.apache.org/zh/option.html
本篇文章来源于微信公众号: 码农设计师
