1、通过接口请求加自定义的刷新属性更新图表展示(v-if)
2、通过在子组件加入图表数据监听(watch)
例:
watch: {
seriesData: {
handler: function(n, o){
this.initChart(); // 重新渲染图表
}
}
}
3、通过父组件调用子组件的方法完成组件视图更新(ref)
例:
调用:this.$refs[‘looppies‘].initAll(); // looppies子组件的ref;initAll()子组件中的方法
方法:initAll() {
this.$nextTick(()=>{ this.initChart(); }
}
柱状图示例代码:
1、数据结构
list = [
{
typeName: ‘销售量’,
xAxisData: [‘一号, ‘二号’, ‘三号’],
seriesData: [120, 200, 150]
},
{
typeName: ‘销售金额’,
xAxisData: [‘一号, ‘二号’, ‘三号’],
seriesData: [1200, 2000, 1500]
},
{
typeName: ‘销售利润’,
xAxisData: [‘一号, ‘二号’, ‘三号’],
seriesData: [0.2, 0.5, 0.6]
}
]
2、视图联想
一排按钮+一各单一的柱状图
3、props
props:{
seriesData: {
type: Array, default: ()=>[]
},
xAxisData: {
type: Array, default: ()=>[]
}
}