Vue + ECharts 中 Prop 数据被修改导致图表合并的问题及解决方案
背景:
在项目中,我封装了一个Echarts柱状图组件(BarChart.vue),父组件传入seriesData和xData来渲染不同的柱子,但在实际使用中,遇到了问题
多次切换不同数据, 图标柱子会出现"合并残留",旧数据还在图标显示不正确
一 问题
开始数据 多系列柱状图 全区域数据
orderCompleteData: [
{ name: '东莞-黄江', data: [629, 500, 700, 650, 800, 750, 900], color: '#4a91fa' },
{ name: '深圳-龙岗', data: [800, 900, 850, 950, 1000, 980, 1050], color: '#26c07a' },
{ name: '广州', data: [300, 250, 320, 280, 350, 330, 400], color: '#ffb005' },
{ name: '深圳-双龙', data: [200, 150, 220, 180, 250, 230, 300], color: '#ff6b6b' },
{ name: '深圳-龙岗平吉', data: [66, 50, 70, 60, 80, 70, 90], color: '#4ecdc4' },
{ name: '光明新湖', data: [209, 180, 220, 200, 250, 230, 300], color: '#a5a3e5' },
{ name: '深圳-宝安西乡', data: [0, 0, 10, 5, 15, 10, 20], color: '#ffe66d' },
{ name: '深圳-南山', data: [500, 450, 550, 520, 600, 580, 650], color: '#556c81' },
{ name: '广西-桂林', data: [100, 80, 120, 110, 130, 120, 140], color: '#6b5b95' },
],
//数组中每一项代表一条系列(series),在图表上,每条series会对应一个名称(name),有自己的数据和颜色
data, 一个值对应一个日期
然后呢, 当我切换单个区域数据的时候,其实现在已经是切换了
会把之前的数据残留下来
现在的数据结构其实是 单个区域的
[
{
name: '天河-体育中心,
data: [1, 2, 3, 4, 5, 6, 7]
}
]
二. 问题分析
Echarts默认合并配置,chart.setOption(option)会把新配置合并到已有图表配置上,而不是完全替代,
- 举例: 如果旧图表有3条series,新传入2条series,不加覆盖参数,图表会把2条series合并进原来的3条,可能出现残留
三. 解决方案
1. 如果想在子组件直接修改seriesData(例如清空某个series),需要使用本地副本来避免Vue报警
data() {return {chart: null,localSeriesData: []}
},
watch: {seriesData: {deep: true,immediate: true,handler(newVal) {// 使用浅拷贝或深拷贝创建新数组，避免引用同一个对象this.localSeriesData = newVal.map(s => ({ ...s, data: [...s.data] }))this.setChartOptions()}}
}
2.强制覆盖Echarts配置(推荐)
setChartOptions() {if (!this.chart) returnconst option = {xAxis: { type: 'category', data: this.xData },yAxis: { type: 'value', min: 0 },series: this.localSeriesData.map(s => ({name: s.name,type: 'bar',data: s.data,itemStyle: { color: s.color || '#218ce6' }})),legend: { data: this.localSeriesData.map(s => s.name) }}this.chart.setOption(option, true) // ✅ 覆盖模式
}