Vue3 父组件数据改变Echarts子组件图表没有变化

一、问题

使用vue3写页面，引入一个echarts图，父组件数据改变，图表没有重新渲染。

二、目标效果图

三、解决（数据变了， 图表不变化）

只需要2步：

1、echarts图组件监听数据（数据改变，重新渲染）

watch(
		() => props.chartData,
		() => {
			//dispose为了解决警告 There is a chart instance already initialized on the dom.
			echart.dispose(document.getElementById('LineBar'))
			initChart() //重新渲染的方法
		}
	)复制

2、在使用setOption()方法之前，重新给option中的数据赋值即可，代码如下：

let initChart = () => {
		let Echarts = echarts.init(document.getElementById('LineBar'))
		 //重新赋值（必须，否则渲染不上）
		option.value.xAxis.data = props.chartData.xAxisData
		option.value.series[0].data = props.chartData.data
		// 绘制图表
		Echarts.setOption(option.value)
		// 自适应大小
		window.addEventListener(
			'resize',
			(window.onresize = () => {
				Echarts.resize()
			})
		)
	}复制

注意：父组件正常调接口 传值即可

解决警告 There is a chart instance already initialized on the dom.

echart.dispose(document.getElementById('LineBar'))复制

解决警告Instance ec_1680155339347 has been disposed

不要使用以下写法：（暂时不清楚具体原因）

 
window.addEventListener(
		'resize',
		(window.onresize = () => {
			Echarts.resize()
		})
		)复制

改为这样写法：

window.addEventListener('resize', onResize(Echarts))
let onResize = (Echarts) => {
		window.onresize = () => {
			Echarts.resize()
		}
	}复制

四、Echarts子组件 完整代码

<template>
	<div id="LineBar"></div>
</template>
<script name="LineBar" setup>
	import { onMounted, defineProps, watch } from 'vue'
	import * as echarts from 'echarts'
 
	const props = defineProps({
		chartData: {
			type: Object,
			required: true
		}
	})
	watch(
		() => props.chartData,
		() => {
			//解决警告 There is a chart instance already initialized on the dom.
			echart.dispose(document.getElementById('LineBar'))
			initChart()
		}
	)
	let option = ref({
		tooltip: {
			trigger: 'axis'
		},
		// legend: {
		// 	data: vulnerabilityTrendData.value.xdata
		// },
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: props.chartData.xAxisData
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				name: 'ddd',
				type: 'line',
				smooth: true,
				data: props.chartData.data,
				areaStyle: {
					color: {
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [
							{
								offset: 0,
								color: 'rgba(46, 121, 255, 0.2)' // 0% 处的颜色
							},
							{
								offset: 1,
								color: 'rgba(46, 121, 255, 0.0001)' // 100% 处的颜色
							}
						]
					}
				},
				color: '#2E79FF',
				lineStyle: {
					color: {
						colorStops: [
							{
								offset: 0,
								color: '#8477FF'
							},
							{
								offset: 1,
								color: '#5CCAFF'
							}
						]
					},
					width: 2,
					shadowOffsetY: 12,
					shadowColor: 'rgba(59, 138, 254, 0.1)'
				}
			}
		]
	})
	let echart = echarts
 
	onMounted(() => {
		initChart()
	})
	let initChart = () => {
		let Echarts = echarts.init(document.getElementById('LineBar'))
		//手动赋值
		option.value.xAxis.data = props.chartData.xAxisData
		option.value.series[0].data = props.chartData.data
		// 绘制图表
		Echarts.setOption(option.value)
		// 自适应大小(这样写会出现：父组件数据修改，浏览器窗口大小改变，会警告Instance ec_1680155339347 has been disposed)
		//window.addEventListener(
		//	'resize',
		//	(window.onresize = () => {
		//		Echarts.resize()
		//	})
		//)
		//改成以下写法
		window.addEventListener('resize', onResize(Echarts))
	}
	let onResize = (Echarts) => {
		window.onresize = () => {
			Echarts.resize()
		}
	}
</script>
 
<style scoped></style>
 复制