vue封装highcharts组件

如果项目中图标数据比较多的话，每个页面都引入一次会比较繁琐。可以用vue封装成组件进行复用。

安装

首先需要在自己的vue项目中安装highcharts插件     

npm  install highcharts  --save

yarn或者cdn引入的方式可参考官网（https://www.highcharts.com.cn/docs/start-download）

封装组件

1、新建vue文件   hcharts.vue

2、父子组件之间传递的参数有 id，options和time。id和option是生成图标必须参数。time是用来动态更新子组件的。比如options的参数很多都是通过数据交互从后台取回来的，或者按钮之间来回切换显示不同的图表。如果没有加time监听只会显示第一次加载的图标。所以通过定义time着参数，当数据有变化时，可以通过props传递一个时间戳就会更新。效果图如下：

 

关于图表渐变色设置可以参考我写的另一篇博客（https://blog.csdn.net/wang1006008051/article/details/90269153）

代码：

<template>
	<div :id="id" :option="option" :time="time"></div>
</template>

<script>
	import HighCharts from "highcharts"
	export default {
		props: {
			id: {
				type: String
			},
			option: {
				type: Object
			},
			time: ""
		},
		mounted() {
			HighCharts.chart(this.id, this.option)
		},
		watch: {
			time() {
				HighCharts.chart(this.id, this.option);
				deep:true
			}
		}
	}
</script>

父组件调用

<template>
	<hcharts id="thisId" :option="Options" :time="timeTemp"></hcharts>
</template>

<script>
	import hcharts from './hcharts.vue'
	export default {
		components: {
			hcharts
		},
		data() {
			return {
				timeTemp: "",
				Options: {}
			}
		},
		mounted() {
			this.getData()
		},
		methods: {
			getData() {
                let _self = this
				this.$axios({
					url: url,
					method: 'post',
					data: params
				}).then(res => {
                _self.Options = res  
				_this.timeTemp = new Date().getTime()
				})
			}
		}
	}
</script>