echarts折线图动态光点动画

期待效果

屏幕录制 2024-08-07 162710

文档锚点echarts文档

每次看文档打开时间久

这里做一个简单示例图，方便后面复用

代码

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    },
    {
      data: [110, 194, 200, 196, 120, 132, 240],
      type: 'line'
    },
    {
      name: '动点1',
      type: 'lines',
      coordinateSystem: 'cartesian2d',
      symbolSize: 10,
      polyline: true, 
      effect: {
        show: true,
        period:5,
        trailLength:0.4,
        symbolSize: 8,
        symbol: 'circle',
        color: '#1ee7e7',
      },
      lineStyle: {
          normal: {
              width: 1,
              opacity: 0
          }
      },
      // 光点
      data: [{
          coords: [['Mon',150],['Tue',230],['Wed',224],['Thu',218],['Fri',135],['Sat',147],['Sun',260]]
      }]
    },
    {
      name: '动点2',
      type: 'lines',
      coordinateSystem: 'cartesian2d',
      symbolSize: 10,
      polyline: true, 
      effect: {
        show: true,
        period:5,
        trailLength:0.4,
        symbolSize: 8,
        symbol: 'circle',
        color: '#1ee7e7',
      },
      lineStyle: {
          normal: {
              width: 1,
              opacity: 0
          }
      },
      // 光点
      data: [{
          coords: [['Mon',110],['Tue',194],['Wed',200],['Thu',196],['Fri',120],['Sat',132],['Sun',240]]
      }]
    }
  ]
};