echarts实现带光的折线图

最近开发的项目很频繁使用【echarts】，有个需求是实现带有光点的折现图，光点会沿着折现的路径跑，查找到示例后再者稍微记录一下。

这个光点也是一种折现的series，但是他需要写入几项特殊的属性【coordinateSystem、polyline、effect】，他的【data】也比较特殊，是由X轴和数字组合而成的二维数组。

 1 option = {
 2   xAxis: {
 3     type: 'category',
 4      data: ['A', 'B', 'C', 'D', 'E', 'F'],
 5   },
 6   yAxis: {
 7     type: 'value'
 8   },
 9   series: [
10     {
11       name: '注册总量',
12       type: 'line',
13       data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02]
14     },
15     {
16       name: '滑行的光点',
17       type: 'lines',
18       coordinateSystem: 'cartesian2d',
19       polyline: true,
20       effect: {
21         show: true,
22         period:10,
23         trailLength:0.1,
24         symbolSize: 8,
25         symbol: 'circle',
26         color: '#fff',
27       },
28       data: [{
29         coords: [
30             ['A', 502.84],
31             ['B', 205.97],
32             ['C', 332.79],
33             ['D', 281.55],
34             ['E', 398.35],
35             ['F', 214.02],
36         ]
37       }]
38     }
39   ]
40 };