Vue 项目使用 ECharts 使用路由或者点击浏览器前进/后退切换页面回来图表不显示

问题描述

问题1：

解决方案对应方案1
在 Vue 项目中使用 ECharts 时，一开始图表能渲染出来，当切换到其他页面再回来的时候，图表就不显示了

问题2：

解决方案对应方案2
Echarts 图表在子组件中，父组件通过传递数据给子组件的 Echarts 进行渲染，导致图表不显示

问题3：

解决方案对应方案3
在同一个页面的 Echarts 图表切换回来不显示

解决方案：

方案1：

• 手动删除 Echarts 默认生成的 _echarts_instance_ 属性
• 删除

const domMap = document.getElementById("map_chart");
// 清除Echarts默认添加的属性
domMap.removeAttribute("_echarts_instance_");
let myChart = this.$echarts.init(domMap);
myChart.setOption({})

 

方案2：

• 在父组件更新的数据传递到子组件后，在子组件使用 watch 监听数据的变化，如果数据发生变化再执行渲染

• // 父组件使用子组件
  
  
  // 子组件监听数据变化
    props: {
      id: {
        type: String,
        require: true,
        default() {
          return "pie_chart";
        },
      },
      data: {
        type: Array,
        default() {
          return [];
        },
      },
    },
    watch: {
      id(newVal) {
        // console.log("newVal=>", newVal);
        this.getPieChart(newVal, this.data);
      },
      data(newVal) {
        // console.log("newVal=>", newVal);
        this.getPieChart(this.id, newVal);
      },
    },
    methods: {
      getPieChart(id, data) {
        let pieChartData = JSON.parse(JSON.stringify(data));
        // console.log("pieChartData=>", pieChartData);
        const pieDom = document.getElementById(id);
        this.$echarts.init(pieDom).setOption({})
    }
  

  方案3：

• 使用 nextTick()
• 使用 setTimeout(() => {},500)

• // 请求数据的方法
  getData() {
    this.$request.get("/getFacCount", {}, { mock: false }).then((data) => {
      const res = data.data;
      // console.log("二次设备接入统计图=>", res);
      this.$nextTick(() => {
        this.getBarChart()
      })
      setTimeout(() => {
        this.getBarChart()
      },500)
  }
  
  // 执行渲染图表的方法
  getBarChart() {
    const barChart = document.getElementById("barchart");
    this.$echarts.init(domChart).setOption({})
  }
  

  原文出处/参考链接：Vue 项目使用 ECharts 切换页面回来图表不显示_vue3 echarts切换页面再回来就没了_@lgk_Blog的博客-CSDN博客