父组件调用图表组件根据按钮切换展示数据

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: ()=>[]
	}
}
上一篇:[转帖]iphone11的部分参数 UX


下一篇:关键字驱动