问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

echart图不更新？

头像
dayDayUp
    1521049
    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图没有更新

    前端echarts3
    阅读 607
    avatarAI BotBETA
    ### 回答

在你的代码中，虽然你更新了 `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` 钩子或类似的生命周期钩子中完成。
    1 个回答
    得票最新
    头像
    Seven
      587116
      ✓ 已被采纳

      强制 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)];
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      宣传栏