快捷導(dǎo)航

vue3集成echarts數(shù)據(jù)刷新后圖表不刷新的解決方法

更新時(shí)間：2023年08月10日 10:20:36 作者：三劫散仙

vue3 集成 echarts 最大的坑就是出現(xiàn)了,reactive 的數(shù)據(jù) 刷新了,但圖表缺不會刷新,所以本文就給大家詳細(xì)的介紹一下vue3集成echarts數(shù)據(jù)刷新后圖表不刷新的解決方法,需要的朋友可以參考下

vue3 集成 echarts 最大的坑就是出現(xiàn)了，reactive 的數(shù)據(jù) 刷新了，但圖表缺不會刷新，查了很多資料，試了很多方式都沒效果，最后測試出來解決方法很簡單：

核心代碼：

 
       // 省略非核心代碼.......
        const init = () => {
            chart.value = globalProperties?.echarts.init(pieChartRef.value)
            chart.value.setOption(option)
        }
			watch(
            () => props.data,
            () => {
                // 數(shù)據(jù)變化時(shí)，重新對series里面的 data 賦值即可
                option.series[0].data= top10()
                chart.value.setOption(option)
            }
        )
        onMounted(() => {
            init()
            addEventListener('resize', resize)
        })

附上 TSX 整個(gè)頁面參考

import {defineComponent, getCurrentInstance, onBeforeUnmount, onMounted, PropType, ref, watch} from 'vue'
import type { Ref } from 'vue'
import {ECharts, throttle} from "echarts";
import {useI18n} from "vue-i18n";
import {EChartsType} from "echarts/types/dist/echarts";
const props = {
    height: {
        type: [String, Number] as PropType<string | number>,
        default: 590
    },
    width: {
        type: [String, Number] as PropType<string | number>,
        default: '100%'
    },
    data: {
        type: Array as PropType<Array<any>>
    }
}
const PieChart = defineComponent({
    name: 'PieChart',
    props,
    setup(props) {
        const pieChartRef: Ref<HTMLDivElement | null> = ref(null)
        const top10 = () => {
            return props.data.length>=10 ? props.data.slice(0,10) : props.data
        }
        const option = {
            title: {
                text: '分組聚合 Top 10',
                left: 'center',
                textStyle: {
                   color:'white'
                },
            },
            tooltip: {
                trigger: 'item',
                backgroundColor: '#fff'
            },
            legend: {
                bottom: '0%',
                left: 'center',
                textStyle:{
                    fontSize: 16,
                    color: 'white',
                    fontWeight: 'bold'
                }
            },
            series: [
                {
                    type: 'pie',
                    radius: ['35%', '60%'],
                    center: ['50%', '40%'],
                    avoidLabelOverlap: false,
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 30,
                            fontWeight: 'bolder',
                            color: 'white'
                        }
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    labelLine: {
                        show: false
                    },
                    data: top10()
                }
            ]
        }
        const globalProperties = getCurrentInstance()?.appContext.config.globalProperties
        let chart:Ref<ECharts | null>  = ref(null)
        const init = () => {
            chart.value = globalProperties?.echarts.init(pieChartRef.value)
            chart.value.setOption(option)
        }
        const resize = throttle(() => {
            chart && chart.value.resize()
        }, 20)
        watch(
            () => props.data,
            () => {
                // 數(shù)據(jù)變化時(shí)，重新對series里面的 data 賦值即可
                option.series[0].data= top10()
                chart.value.setOption(option)
            }
        )
        onMounted(() => {
            init()
            addEventListener('resize', resize)
        })
        return { pieChartRef }
    },
    render() {
        const { height, width } = this
        return (
            <div
                ref='pieChartRef'
                id={'myChart'}
                style={{
                    height: "300px",
                    width: typeof width === 'number' ? width + 'px' : width
                }}
            >
            </div>
        )
    }
})
export default PieChart

到此這篇關(guān)于vue3集成echarts數(shù)據(jù)刷新后圖表不刷新的解決方法的文章就介紹到這了,更多相關(guān)vue3集成echarts后圖表不刷新內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: