标签：initAll seriesData xAxisData 图表 typeName 按钮 组件

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: ()=>[]
	}
}

标签：initAll,seriesData,xAxisData,图表,typeName,按钮,组件
来源： https://www.cnblogs.com/min77/p/14985656.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。