前端 - echart图不更新？

Question

const setDivChartData = (data,tabType) => {
    let xAxisData:any[] = [];
    if(tabType === 'first') {
      const mapBaseData = data.map(item => item.base);
      const xAxisData = [...new Set(mapBaseData)];
      const yAxisData = getYDivChartDataByBase(xAxisData,data);
      console.log(yAxisData,'yAxisData');
      const sortYAxisData = yAxisData.sort((a, b) => Number(b.name) - Number(a.name));
      const mapNameList = sortYAxisData.map(item => item.name);
      echartLayoutVal.value.byDivison.option.legend.data = mapNameList;
      echartLayoutVal.value.byDivison.option.xAxis.data = xAxisData;
      echartLayoutVal.value.byDivison.option.series = setDivBaseChartDefaultColor(sortYAxisData);
    } else if(tabType === 'second') {
      xAxisData = monthList;
    }
  };

vue3+echarts项目中改变echartLayoutVal.value.byDivison.option.series，为什么界面echart图没有更新

Answer 1

强制 Vue 检测变化

以下是完整的代码

const setDivChartData = (data, tabType) => {
  let xAxisData = [];
  if (tabType === 'first') {
    const mapBaseData = data.map(item => item.base);
    xAxisData = [...new Set(mapBaseData)];
    const yAxisData = getYDivChartDataByBase(xAxisData, data);
    console.log(yAxisData, 'yAxisData');
    const sortYAxisData = yAxisData.sort((a, b) => Number(b.name) - Number(a.name));
    const mapNameList = sortYAxisData.map(item => item.name);
    echartLayoutVal.value.byDivison.option.legend.data = mapNameList;
    echartLayoutVal.value.byDivison.option.xAxis.data = xAxisData;
    // 创建一个新数组并赋值给 series
    echartLayoutVal.value.byDivison.option.series = [...setDivBaseChartDefaultColor(sortYAxisData)];
  } else if (tabType === 'second') {
    xAxisData = monthList;
  }
};

具体改动如下

// 原来的代码
// echartLayoutVal.value.byDivison.option.series = setDivBaseChartDefaultColor(sortYAxisData);

// 修改后的代码
echartLayoutVal.value.byDivison.option.series = [...setDivBaseChartDefaultColor(sortYAxisData)];

Answer 2

### 回答

在你的代码中，虽然你更新了 `echartLayoutVal.value.byDivison.option` 的内容，但是你没有触发 ECharts 实例的重新渲染。在 Vue 3 中，如果你直接修改了 ECharts 配置对象而没有通过 Vue 的响应式系统来更新，ECharts 可能不会检测到这些变化并重新渲染图表。

为了解决这个问题，你可以在更新 ECharts 配置后，手动调用 ECharts 实例的 `setOption` 方法来触发重新渲染。这里是一个可能的修改方式：

const setDivChartData = (data, tabType) => {

let xAxisData = [];
if (tabType === 'first') {
    const mapBaseData = data.map(item => item.base);
    xAxisData = [...new Set(mapBaseData)];
    const yAxisData = getYDivChartDataByBase(xAxisData, data);
    console.log(yAxisData, 'yAxisData');
    const sortYAxisData = yAxisData.sort((a, b) => Number(b.name) - Number(a.name));
    const mapNameList = sortYAxisData.map(item => item.name);
    
    const newOption = {
        legend: {
            data: mapNameList
        },
        xAxis: {
            data: xAxisData
        },
        series: setDivBaseChartDefaultColor(sortYAxisData)
    };

    // 假设 echartsInstance 是你的 ECharts 实例
    echartsInstance.setOption(newOption);
} else if (tabType === 'second') {
    xAxisData = monthList;
    // 同样需要更新 option 并调用 setOption
    const newOption = {
        xAxis: {
            data: xAxisData
        }
        // 可能还需要更新其他部分，根据实际情况添加
    };
    echartsInstance.setOption(newOption);
}

};

在这个修改中，我创建了一个新的 `newOption` 对象来存储更新后的配置，并使用 `echartsInstance.setOption(newOption)` 来更新图表。确保 `echartsInstance` 是你通过 `echarts.init` 方法初始化的 ECharts 实例。

注意：你需要根据你的实际项目结构来获取 `echartsInstance`。通常，这会在你的 Vue 组件的 `mounted` 钩子或类似的生命周期钩子中完成。