echarts 重新渲染数据

最新推荐文章于 2025-04-01 10:58:50 发布

舒眉

最新推荐文章于 2025-04-01 10:58:50 发布

阅读量5.3k

点赞数 2

分类专栏：前端技术文章标签： echarts重新渲染数据

本文链接：https://blog.youkuaiyun.com/sunshine_0880/article/details/117337274

版权

前端技术专栏收录该内容

38 篇文章

订阅专栏

在Vue应用中，确保Echarts图表在DOM渲染完成后再初始化和更新是非常重要的。通过`this.$nextTick()`确保DOM更新后，清除原有图表实例，然后重新初始化并设置新的选项，可以避免渲染问题。此方法已被验证有效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

调用时，要在页面dom渲染完毕后(可以通过this.$nextTick(()) => {}进行确认)，再进行渲染echarts

// vue 函数中
      let chartDom = document.getElementById("myChart2")
      if (chartDom.hasAttribute("_echarts_instance_")) {
        chartDom.removeAttribute("_echarts_instance_");
      }
      this.myChartLed = this.$echarts.init(chartDom);
      let option = {
        ...
      };
      this.myChartLed.clear();
      this.myChartLed.setOption(option);

亲测有效