vue3集成echarts数据刷新后图表不刷新的解决方法
作者：三劫散仙
vue3 集成 echarts 最大的坑就是出现了,reactive 的数据 刷新了,但图表缺不会刷新,所以本文就给大家详细的介绍一下vue3集成echarts数据刷新后图表不刷新的解决方法,需要的朋友可以参考下
vue3 集成 echarts 最大的坑就是出现了，reactive 的数据 刷新了，但图表缺不会刷新，查了很多资料，试了很多方式都没效果，最后测试出来解决方法很简单：
核心代码：
// 省略非核心代码.......
const init = () => {
chart.value = globalProperties?.echarts.init(pieChartRef.value)
chart.value.setOption(option)
}
watch(
() => props.data,
() => {
// 数据变化时，重新对series里面的 data 赋值即可
option.series[0].data= top10()
chart.value.setOption(option)
}
)
onMounted(() => {
init()
addEventListener('resize', resize)
})附上 TSX 整个页面参考
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,
() => {
// 数据变化时，重新对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到此这篇关于vue3集成echarts数据刷新后图表不刷新的解决方法的文章就介绍到这了,更多相关vue3集成echarts后图表不刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！