echarts折线图流动特效的实现（非平滑曲线）

1.实现效果

2.实现原理

echarts官网：series-lines

注意：流动特效只支持非平滑曲线（smooth：false）

series-lines路径图：
用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化。
ECharts 2.x 里会用地图上的 markLine 去绘制迁徙效果，在 ECharts 3 里建议使用单独的 lines 类型图表。

一些参数：

series-lines.coordinateSystem ：该系列使用的坐标系，可选：
‘cartesian2d’-使用二维的直角坐标系（也称笛卡尔坐标系），通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件。
‘geo’-使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件。

series-lines.polyline：是否是多段线。
默认为 false，只能用于绘制只有两个端点的线段，线段可以通过 lineStyle.curveness 配置为曲线。
如果该配置项为 true，则可以在 data.coords 中设置多于 2 个的顶点用来绘制多段线，在绘制路线轨迹的时候比较有用，见示例 北京公交路线，设置为多段线后 lineStyle.curveness 无效。

series-lines.effect. show：是否显示特效。

series-lines.effect. period = 4。 特效动画的时间，单位为 s。

series-lines.effect. symbol = ‘circle’。特效图形的标记。
ECharts 提供的标记类型包括’circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, 'none’可以通过 ‘image://url’ 设置为图片，其中 URL 为图片的链接，或者 dataURI。

series-lines.effect. symbolSize = 3。特效标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示高和宽，例如 [20, 10] 表示标记宽为20，高为10。

series-lines.effect. trailLength = 0.2。特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长。

series-lines.effect. loop = true。是否循环显示特效。

series-lines.data. coords ：一个包含两个到多个二维坐标的数组。在 polyline 设置为 true 时支持多于两个的坐标。
eg：

[
 {
    coords: [
      ["测1", 222],
      ["测2", 932],
      ["测3", 66],
      ["测4", 934],
      ["测5", 111],
      ["测6", 333],
      ["测7", 0],
    ],
  },
];
1
2
3
4
5
6
7
8
9
10
11
12
13

3.实现代码

data. coords的获取：

//多线段（polyline=true），如图左侧连续一段：
let yData = [222, 932, 66, 934, 111, 333, 0],
  xData = ["测1", "测2", "测3", "测4", "测5", "测6", "测7"],
   datacoords = [
     {
       coords: [],
     },
   ];
 for (var i = 0; i < xData.length; i++) {
   datacoords[0].coords.push([xData[i], yData[i]]);
 }
1
2
3
4
5
6
7
8
9
10
11

//单线段（polyline=false），如图右侧各段展示：
let yData = [90, 555, 666, 999, 567, 999, 888, 0],
 xData = ["测1", "测2", "测3", "测4", "测5", "测6", "测7", "测8"],
    datacoords = [];
  for (var i = 0; i < xData.length; i++) {
    datacoords.push([
      {
        coord: [i, yData[i]],
      },
      {
        coord: [i + 1, yData[i + 1]],
      },
    ]);
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

setOption设置：

 this.charts.setOption({
   animation: true, //控制动画示否开启
   animationDuration: 3000,
   animationEasing: "bounceOut", //缓动动画
   animationThreshold: 8, //动画元素的阈值
   backgroundColor: "transparent", // 给echarts图设置背景色
   tooltip: {
     trigger: "axis",
     backgroundColor: "rgba(0,0,0,.5)",
     axisPointer: {
       type: "cross",
       label: {
         backgroundColor: "rgba(0,0,0,.5)",
       },
     },
     textStyle: {
       color: "#fff",
       fontSize: 14,
     },
   },
   grid: {
     left: "3%", //图表距边框的距离
     right: "3%",
     top: "15%",
     bottom: "5%",
     containLabel: true,
   },
   xAxis: [
     {
       nameGap: 3,
       nameTextStyle: {
         color: "rgba(255,255,255,.8)",
         fontSize: 12,
       },
       type: "category",
       data: xData,
       boundaryGap: false, //从0开始
       axisLine: {
         onZero: true,
         rotate: 30, //坐标轴内容过长旋转
         interval: 1,
         lineStyle: {
           color: "#636E7C",
         },
       },
       axisLabel: {
         color: "rgba(255,255,255,.8)", //坐标的字体颜色
         fontSize: 12,
       },
       axisTick: {
         //坐标轴刻度颜色  x和y不交叉
         show: false,
       },
     },
   ],
   yAxis: [
     {
       name: "个",
       min: 0,
       max: function (value) {
         return Math.ceil(value.max / 5) * 5;
       },
       splitNumber: 5,
       type: "value",
       nameTextStyle: {
         color: "rgba(255,255,255,.89)",
         fontSize: 12,
       },
       splitLine: {
         show: true,
         lineStyle: {
           color: "rgba(255,255,255,.25)",
           type: "dashed",
         },
       },
       axisTick: {
         //坐标轴刻度颜色
         show: false,
       },
       axisLine: {
         //坐标轴线颜色
         show: true,
         lineStyle: {
           color: "#636E7C",
         },
       },
       axisLabel: {
         color: "rgba(255,255,255,.8)", //坐标的字体颜色
         fontSize: 12,
       },
     },
   ],
   series: [
     {
       name: "苏苏小苏苏",
       type: "line",
       smooth: false,
       lineStyle: {
         color: "#DC7828",
         width: 1.5,
         type: "dashed",
         shadowOffsetX: 0, // 折线的X偏移
         shadowOffsetY: 10, // 折线的Y偏移
         shadowBlur: 4, // 折线模糊
         shadowColor: "rgba(255, 255, 255, 0.8)", //设置折线阴影颜色
       },
       showSymbol: true, //是否默认展示圆点
       symbol: "circle", // 默认是空心圆（中间是白色的）
       symbolSize: 7,
       itemStyle: {
         color: "#021E47", //实圆的背景色
         borderWidth: 1,
         borderColor: "#DC7828",
       },
       areaStyle: {
         color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
           {
             offset: 1,
             color: "rgba(220,120,40,0.8)",
           },
           {
             offset: 0.74,
             color: "rgba(220,120,40,0.5)",
           },
           {
             offset: 0,
             color: "rgba(220,120,40,0)",
           },
         ]),
       },
       emphasis: {
         focus: "series",
       },
       data: yData,
     },
     {
       showSymbol: false,
       name: "苏苏小苏苏",
       type: "lines",
       polyline: true,
       smooth: false,
       coordinateSystem: "cartesian2d",
       zlevel: 1,
       effect: {
         show: true,
         smooth: true,
         period: 6,
         symbolSize: 4,
       },
       lineStyle: {
         color: "#fff",
         width: 1,
         opacity: 0,
         curveness: 0,
         cap: "round",
       },
       data: datacoords,
     },
   ],
 });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160

4.更多相关demo，更新在苏苏的码云如果对你有帮助，欢迎你的star+订阅！