Vue封装Echarts子组件 动态更新图表展示（）

1、Vue.js中封装Echarts图表组件

封装Echarts子组件，父组件可以多次调用

2、父组件向子组件传值

chartData: {
xAxis: {
data: [‘星期一’, ‘星期二’, ‘星期三’, ‘星期四’, ‘星期五’]
},
legend: {
data: [‘123’]
},
series: [
{
name: ‘123’,
type: ‘bar’,
data: [11, 22, 33, 44, 55]
}
]
}
3、子组件监听数据变化，更新图表

watch: {
chartData: {
immediate: true,
deep: true,
handler(newVal, oldVal) {
if (this.chart) {
if (newVal) {
this.setOption(newVal)
} else {
this.setOption(oldVal)
}
}
}
}
},

作者：向艳蓉
链接：https://www.jianshu.com/p/642d0dfa3ae1
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。