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

来源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。