微信小程序 – 解决折线图绘制动画消失的问题

核心办法：

使用lineChartInstance.clear()：调用 ECharts 实例的 clear() 方法，会清空当前图表的所有绘制内容（包括数据、坐标轴、线条等），为新数据绘制腾出空间。

必须在 setOption 之前调用 clear()，顺序不能颠倒，否则会先绘制新数据再清除，导致看不到更新效果。

重点：
每次 clear() 后，必须在 setOption 中重新定义 xAxis、yAxis、series 等核心配置，不能只传数据。

import * as echarts from '../../components/echarts/echarts';

let lineChartInstance = null;

function initLineChart(canvas, width, height) {
  lineChartInstance = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: pixelRatio || 1,
  });
  canvas.setChart(lineChartInstance);
  updateLineChart([], []);
  return lineChartInstance;
}

function updateLineChart(xAxisData, seriesData) {
  if (!lineChartInstance) return;
 
  lineChartInstance.clear();  //  重要配置
  
  const option = {
    // 配置省略简写
    xAxis: { 
      data: xAxisData || [],
    },
    series: [
      { 
        type: 'line',
        data: seriesData[0] || [], 
      },
      { 
        type: 'line',
        data: seriesData[1] || [], 
      },
      { 
        type: 'line',
        data: seriesData[2] || [],  
      },
    ],
  };
  lineChartInstance.setOption(option);
}

  loadLineChart() {
    // this.data.lineData, this.data.lineSeries自行获取数据
    setTimeout(() => {
      updateLineChart(this.data.lineData, this.data.lineSeries);
    }, 500);
  },
  onLoad(options) { 
    this.loadLineChart(); 
  },