Vue3.x + Echarts5.x 部署环境下图切换不显示

问题描述：

在使用echarts插件时，发现本地运行正常，测试版本第一次切换按钮显示图表没问题，但是 再次切换就发现图表无法显示，由于测试版本和开发版本运行结果不同，且不报错，处理错误比较烦。

解决方案

1. 动态绑定DOM

第一种：采用动态绑定DOM元素的id，此方法能解决问题，但是从性能优化方向不推荐。例如

<div :id="chart" :style="{width: '600px', height: '500px'}"></div>

2.移除echarts元素的_echarts_instance_

echarts挂载的dom元素有一个属性：echarts_instance，它应该类似id，需要每次刷新重新生成，所以我们每次挂载前都去除这个属性。参考该博客.

3. 采用生命周期函数进行绑定和解绑的操作灵活使用.

在onMounted()方法里，进行绑定

function init() {
      infoCheckedData.value = getInfoData(props.selected);
      initAssetsStructChart(getAssetsStructData(props.selected));
      initAssetsIntegrityChart(getAssetsIntegrityData(props.selected));
      initAssetsBuildTimeChart(getAssetsBuildTimeData(props.selected));
      initPropertyChart(getAssetsPropertyeData(props.selected))
    }
    
onMounted(() => {
      nextTick(() => {
        init();
      });
    });

在onBeforeUnmonted或onUnmounted生命周期方法中进行解绑（使用dispose方法）

import * as echarts from "echarts"

let chart;
let colorList = [
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: 'rgba(3, 251, 71, 1)' },
        { offset: 1, color: 'rgba(19, 218, 140, 1)' },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: 'rgba(36, 250, 173, 1)' },
        { offset: 1, color: 'rgba(16, 202, 151, 1)' },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: 'rgba(33, 245, 219, 1)' },
        { offset: 1, color: 'rgba(19, 201, 183, 1)' },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: 'rgba(37, 250, 245, 1)' },
        { offset: 1, color: 'rgba(11, 190, 204, 1)' },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: 'rgba(48, 220, 243, 1)' },
        { offset: 1, color: 'rgba(8, 183, 231, 1)' },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: 'rgba(23, 158, 221, 1)' },
        { offset: 1, color: 'rgba(8, 150, 231, 1)' },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: 'rgba(57, 105, 250, 1)' },
        { offset: 1, color: 'rgba(41, 85, 237, 1)' },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: 'rgba(98, 85, 255, 1)' },
        { offset: 1, color: 'rgba(0, 102, 255, 1)' },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: 'rgba(150, 71, 254, 1)' },
        { offset: 1, color: 'rgba(92, 31, 228, 1)' },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: 'rgba(205, 100, 250, 1)' },
        { offset: 1, color: 'rgba(149, 70, 254, 1)' },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: 'rgba(242, 10, 247, 1)' },
        { offset: 1, color: 'rgba(171, 28, 221, 1)' },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: 'rgba(247, 10, 144, 1)' },
        { offset: 1, color: 'rgba(176, 1, 180, 1)' },
    ]),
];
const xAxisData = ['包经租', '拨用', '产权交换', '代管', '改造', '购置', '建造', '接管']

function initPropertyChart(data) {
    destoryPropertyChart()
     chart = echarts.init(document.getElementById("zccqly_chart"));
    let option = {
        // backgroundColor: '#00265f',
        // "title": {
        //     "text": "政策补贴额度",
        //     x: "center",
        //     y:"4%",
        //     textStyle: {
        //         color: '#fff',
        //         fontSize: '22'
        //     },
        //     subtextStyle: {
        //         color: '#90979c',
        //         fontSize: '16',

        //     },
        // },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            textStyle: {
                fontFamily: "myfont1"
            },
            formatter(params) {
                const item = params[0];
                return `${item.axisValue}:<br/>
                        面积：${(item.value * data.total / 100).toFixed(4)}万㎡
                          <br/>
                          占比：${item.value}%`;
            },
        },
        grid: {
            top: '10%',
            right: '0%',
            left: '10%',
            bottom: '18%',
        },
        xAxis: [
            {
                type: 'category',
                data: xAxisData,
                axisLine: {
                    lineStyle: {
                        color: '#fffff',
                    },
                },
                axisLabel: {
                    margin: 10,
                    interval: 0,
                    rotate: 50,
                    textStyle: {
                        fontSize: 12,
                        fontFamily: 'myfont1',
                        fontWeight: 400,
                        color: '#fff',
                    },
                },
                axisTick: {
                    show: false,
                },
            },
        ],
        yAxis: [
            {
                show: true,
                // name: '单位：万元',
                axisLabel: {
                    formatter: '{value}%',
                    color: '#e2e9ff',

                    textStyle: {
                        fontFamily: "myfont1"
                    }
                },
                axisLine: {
                    show: true,
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: 'rgba(255,255,255,0.12)',
                    },
                },
            },
        ],
        series: [
            {
                type: 'bar',
                data: data.data,
                barWidth: '15px',
                itemStyle: {
                    normal: {
                        color: function (params) {
                            return colorList[params.dataIndex];
                        },
                        barBorderRadius: [0, 0, 0, 0],
                        shadowBlur: 4,
                    },
                },
                label: {
                    normal: {
                        show: true,
                        // lineHeight: 30,
                        // width: 80,
                        // height: 30,
                        // backgroundColor: 'rgba(0,160,221,0.1)',
                        // borderRadius: 200,
                        position: ['-10', '-20'],
                        distance: 1,
                        formatter: ' {a|{c}%}',
                        rich: {
                            a: {
                                color: '#fff',
                                align: 'center',
                                fontSize: 12,
                                fontFamily: 'myfont1',
                                fontWeight: 400,
                            },
                        },
                    },
                },
            },
        ],
    };
    chart.setOption(option)
}

//解绑
function destoryPropertyChart() {
    if (chart) {
        chart.dispose()
        chart = null
    }
}

总结

个人建议使用第三种方法，无论从性能还是开发难度都是很好的选择