vue3+echarts踩坑小计

瓜皮伦

已于 2023-05-01 23:51:47 修改

阅读量280

点赞数

文章标签： echarts javascript vue.js

于 2023-05-01 23:48:40 首次发布

本文链接：https://blog.csdn.net/qq_39341415/article/details/130460192

版权

文章讲述了在Vue3中使用ECharts5创建图表时遇到的问题，即在使用proxy监听时，ECharts无法获取内部变量。解决方案是避免在data中定义chart，或改用shallowRef。示例代码展示了如何初始化图表，监听resize事件以及切换图表数据的方法。

摘要由CSDN通过智能技术生成

今天想写一下vue3和echarts5写个小demo，然后实现一个小功能，点击按钮进行切换图标数据，在全局监听resize事件时报错

在这里插入图片描述

查看原因，发现是在vue3使用proxy监听的，Echarts无法从中获取内部变量

解决方法：不要在data中定义chart，或者使用shallowRef

<template>
    <button @click="handleClick">更换数据</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>