本系列文章配套代码获取有以下两种途径：
-
通过百度网盘获取：
链接：https://pan.baidu.com/s/1W26KrZK7RjwgxvulccTA9w?pwd=mnsj提取码：mnsj
-
前往GitHub获取：
https://github.com/returu/Data_Visualization在ECharts中绘制路径图，只需要将series中的type设置为"lines"即可。
本次将绘制表示北京市公交线路的路径图，数据来源为ECharts官方示例。
绘制图表之前需要先查看ECharts要求的数据形式，ECharts 3.2.0之后的数据要求如下所示：
1{
2 coords: [
3 [120, 66], // 起点
4 [122, 67] // 终点
5 ... // 如果 polyline 为 true 还可以设置更多的点
6 ],
7 // 统一的样式设置
8 lineStyle: {
9 }
10}
因此前期可以使用Python或者其他软件将原始数据进行处理，以满足数据格式要求，再次就不做过多介绍。
数据处理完成后，只需在series中进行如下设置即可：
1type: 'lines', // lines 类型图表
2coordinateSystem: 'bmap', // 该系列使用的坐标系
3polyline: true, // 绘制多段线
4data: data,
完整代码如下所示：
1 $.getJSON('data.json', function(data) {
2 $.getJSON('styleJson.json', function(styleJson) {
3
4 // 设置图表的参数
5 var option = {
6 // bmap组件
7 bmap: {
8 center: [116.46, 39.92], // 地图中心点坐标
9 zoom: 10, // 地图层级
10 roam: true, // 可以对地图进行缩放
11 // 地图底图样式设置
12 mapStyle: {
13 styleJson: styleJson
14 }
15 },
16
17 title: {
18 text: "北京公交线路图",
19 textStyle:{color:"#fff",fontSize:20},
20 subtext: "数据来源：ECharts官方示例",
21 subtextStyle:{color:"#fff"},
22 left: "center"
23 },
24
25 // 数据系列
26 series: [{
27 type: "lines", // lines 类型图表
28 coordinateSystem: "bmap", // 该系列使用的坐标系
29 polyline: true, // 绘制多段线
30 data: data,
31 }],
32 };
33
34
35 // 使用指定的配置项和数据显示图表
36 myChart.setOption(option);
37 })
38 })
可视化结果如下图所示：
下一步是为路径图添加一些显示特效，提升图表可视化效果。
添加特效，主要是为每条线路设置不同的显示颜色，已经添加一些移动动画特效。（参考自ECharts官方示例中的参数设置）
-
首先，通过for循环为为每条线路添加lineStyle属性，实现为每条线设置不同的颜色的效果；
-
然后，在series中设置两个数据系列，第一个系列为路线的设置，第二个系列为图表添加一些动画特效。
1 $.getJSON('data.json', function(data) {
2 $.getJSON('styleJson.json', function(styleJson) {
3
4 var hStep = 300 / (data.length - 1);
5 var busLines = [];
6 // 通过for循环为每条线路添加lineStyle属性
7 for (var i =0 ; i < data.length ; i++){
8 busLines.push({
9 coords:data[i]['coords'],
10 // 为每条线设置不同的颜色
11 lineStyle:{
12 normal:{
13 color:echarts.color.modifyHSL('#5A94DF', Math.round(hStep * i))
14 }
15 }
16 })
17 }
18
19 // 设置图表的参数
20 var option = {
21 // bmap组件
22 bmap: {
23 center: [116.46, 39.92], // 地图中心点坐标
24 zoom: 10, // 地图层级
25 roam: true, // 可以对地图进行缩放
26 // 地图底图样式设置
27 mapStyle: {
28 styleJson: styleJson
29 }
30 },
31
32 title: {
33 text: "北京公交线路图",
34 textStyle:{color:"#fff",fontSize:20},
35 subtext: "数据来源：ECharts官方示例",
36 subtextStyle:{color:"#fff"},
37 left: "center"
38 },
39
40 // 数据系列
41 series: [{
42 type: 'lines', // lines 类型图表
43 coordinateSystem: 'bmap', // 该系列使用的坐标系
44 polyline: true, // 绘制多段线
45 data: busLines,
46 silent: true, // 图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件
47 lineStyle: {
48 opacity: 0.2, // 图形透明度
49 width: 1 // 线宽
50 },
51 progressiveThreshold: 500, // 渐进式渲染时每一帧绘制图形数量，设为 0 时不启用渐进式渲染
52 progressive: 200 // 启用渐进式渲染的图形数量阈值，在单个系列的图形数量超过该阈值时启用渐进式渲染
53 }, {
54 type: 'lines',
55 coordinateSystem: 'bmap',
56 polyline: true,
57 data: busLines,
58 lineStyle: {
59 width: 0
60 },
61 // 线特效的配置
62 effect: {
63 constantSpeed: 20, // 配置特效图形的移动动画是否是固定速度，单位像素/秒
64 show: true, // 显示特效
65 trailLength: 0.1, // 特效尾迹的长度
66 symbolSize: 1.5 // 特效标记的大小
67 },
68 zlevel: 1 // zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面,默认为0
69 }],
70 };
71
72
73 // 使用指定的配置项和数据显示图表
74 myChart.setOption(option);
75 })
76 })
可视化结果如下图所示：
更多参数和配置可以查看官方文档：
1https://echarts.apache.org/zh/option.html
本篇文章来源于微信公众号: 码农设计师
