Vue3+echarts5踩坑以及resize方法報錯的解決

更新時間：2023年07月01日 09:32:40 作者：B_rabbit_d

這篇文章主要介紹了Vue3+echarts5踩坑以及resize方法報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Vue3+echarts5踩坑resize方法報錯

項目要做一個數(shù)據(jù)統(tǒng)計可視化的模塊，按照官網(wǎng)做法調(diào)用resize方法時報錯：

卡了一整天，最后在官方issues上找到了原因，記錄一下。

原因

Vue3使用了proxy，Echarts無法從中獲取內(nèi)部變量

解決方法

不要在data中定義chart，或者使用shallowRef

mounted() {
            // 注：圖表不能放進data，vue3使用proxy，echarts無法從中獲取變量
            let charts = [
                { id: 'yearChart', chart: null, options: yearOption },
                { id: 'monthChart', chart: null, options: monthOption }
            ]
            // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
            this.$nextTick(() => {
                this.charts.forEach(p => {
                    p.chart = echarts.init(document.getElementById(p.id));
                    p.chart.setOption(p.options);
                })
            })
            // 監(jiān)聽窗口變化，重繪圖表
            window.addEventListener("resize", (() => {
                this.charts.forEach(p => {
                    setTimeout(() => { // 避免多圖同時加載卡頓
                        p.chart.resize();
                    }, 200)
                })
            }));
        },

參考：官方issues

vue3+echarts踩坑小計

想寫一下vue3和echarts5寫個小demo，然后實現(xiàn)一個小功能，點擊按鈕進行切換圖標數(shù)據(jù)，在全局監(jiān)聽resize事件時報錯

在這里插入圖片描述

查看原因

發(fā)現(xiàn)是在vue3使用proxy監(jiān)聽的，Echarts無法從中獲取內(nèi)部變量

解決方法

不要在data中定義chart，或者使用shallowRef

<template>
    <button @click="handleClick">更換數(shù)據(jù)</button>
    <div id="home" ref="home">
        Home
    </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, shallowRef } from 'vue';
import {ECharts, EChartsOption,init} from 'echarts';
// import useCurrentInstance from "@/utils/useCurrentInstance";
// const { proxy } = useCurrentInstance()
const myChart = shallowRef<ECharts>()
const home = ref<HTMLElement>()
const myData = reactive([
    {id:1,name:'襯衫',xl:22,kc:77},
    {id:2,name:'雪紡衫',xl:99,kc:45},
    {id:3,name:'羊毛衫',xl:45,kc:11},
    {id:4,name:'高跟鞋',xl:15,kc:23},
    {id:5,name:'襪子',xl:12,kc:85},
    {id:6,name:'帽子',xl:12,kc:85},
    {id:7,name:'',xl:12,kc:85},
])
onMounted(() =>{
    const charEle = document.getElementById('home') as HTMLElement;
    myChart.value = init(charEle)
    initOptions()
    window.addEventListener('resize',() =>{
        if(myChart.value){
            myChart.value.resize()
        }
    })
})
const initOptions = () =>{
    const option: EChartsOption = {
        xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
        type: 'value'
        },
        series: [
        {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
        }
        ],
        legend:{}
    };
    (myChart.value as ECharts ).setOption(option)  
}
const handleClick = () =>{
    (myChart.value as ECharts ).setOption({
        xAxis:{
            data:myData.map(item => item.name)
        },
        series:[
            {
                name:'銷量',
                type:'bar',
                data:myData.map(item => item.xl)
            },
            {
                name:'庫存',
                type:'bar',
                data:myData.map(item => item.kc)
            }
        ]
    }) 
}
</script>
<style scoped>
#home{
    width: 95%;
    height: 500px;
    border: red solid 1px;
}
</style>

結(jié)果：

在這里插入圖片描述