vue3集成echarts数据刷新后图表不刷新的解决方法
更新时间:2023年08月10日 10:20:36 作者:三劫散仙
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后图表不刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
解决vue3中使用echart报错:Cannot read properties of&n
在Vue项目中使用Echarts进行数据可视化是非常常见的需求,然而有时候在引入Echarts的过程中可能会遇到报错,本文主要介绍了解决vue3中使用echart报错:Cannot read properties of undefined (reading ‘type‘),感兴趣的可以了解一下2024-01-01vue视频播放插件vue-video-player的具体使用方法
这篇文章主要介绍了vue视频播放插件vue-video-player的具体使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-11-11详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
这篇文章主要介绍了Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法,非常具有实用价值,需要的朋友可以参考下2017-10-10vue踩坑记-在项目中安装依赖模块npm install报错
这篇文章主要介绍了vue踩坑记-在项目中安装依赖模块npm install报错,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-04-04
最新评论