echarts实现带光的折线图

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

 

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

option = {
  xAxis: {
    type: 'category',
     data: ['A', 'B', 'C', 'D', 'E', 'F'],
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '注册总量',
      type: 'line',
      data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02]
    },
    {
      name: '滑行的光点',
      type: 'lines',
      coordinateSystem: 'cartesian2d',
      polyline: true,
      effect: {
        show: true,
        period:10,
        trailLength:0.1,
        symbolSize: 8,
        symbol: 'circle',
        color: '#fff',
      },
      data: [{
        coords: [
            ['A', 502.84],
            ['B', 205.97],
            ['C', 332.79],
            ['D', 281.55],
            ['E', 398.35],
            ['F', 214.02],
        ]
      }]
    }
  ]
};