路由切换再回来Echart图表消失问题_echarts切换页面图表消失的原因

问题描述

使用echarts图表时，首次可以加载出来， 但是 切换到 其他的路由 之后再 切换回来 echarts图表就不显示了， 刷新之后又可以显示出来。

原因分析

首先我们要知道 echarts的渲染逻辑，
如果未实例化 的盒子则进行 实例化,在此期间会在div容器生成一个 _echarts_instance_ 属性，
该属性值就是当前echarts的ID,然后进入后边的渲染操作流程
当 经过 切换路由 在回来时， echarts的ID就回到初始状态， 所以 和 原先的 指定id 的 div 的_echarts_instance_属性值就不匹配了，所以我们需要 让 指定id 的 div 的_echarts_instance_属性值也要进入一个 初始状态， 即 空状态。

解决方法

• vue2

    mounted() {
    	// 让  指定id 的 div 的_echarts_instance_属性值 为 空状态
        document.getElementById("home-index-echart").removeAttribute('_echarts_instance_');

        let aaa = echarts.init(document.getElementById("home-index-echart"));
        let option = {......};
        // 让 配置数据 生效
        aaa.setOption(option);
        //响应 元素宽度 的实时变化
        top.addEventListener("resize", () => {
            aaa.resize();
        });
    },
1
2
3
4
5
6
7
8
9
10
11
12
13

• vue3
  通过每次渲染页面时， 都使用不同的盒子，则可以简介实现 让 指定id 的 div 的_echarts_instance_属性值也要进入一个 初始状态， 即 空状态。

 <div :id="eChart"></div>

const eChart = ref("eChart" + Date.now() + Math.random()) //记得return Chart
let my = echarts.init(document.getElementById(eChart.value))
Chart.setOption({ //各种配置})
1
2
3
4
5