Vue引入highCharts实现数据可视化
作者：明知山_
这篇文章主要为大家详细介绍了Vue引入highCharts实现数据可视化，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue引入highCharts实现数据可视化的具体代码，供大家参考，具体内容如下
效果图
安装
npm install highcharts-vue
在main.js进行全局配置
import HighchartsVue from 'highcharts-vue' Vue.use(HighchartsVue)
<highcharts :options="chartOptions"></highcharts>
<script>
export default {
data() {
return {
chartOptions: {}
};
},
mounted(){
this.getChart()
}
methods:{
getChart() {
var template = {
title: {
//去掉标题
text: ""
},
xAxis: {
//自定义x轴
categories:["05-21", "05-22", "05-23", "05-24", "05-25", "05-26", "05-27"]
},
yAxis: {
//去掉y轴的value
title: { text: "" }
},
credits: {
//去掉水印
enabled: false
},
plotOptions: {
line: {
//设置颜色，显示点
color: "#0e6145",
dataLabels: {
enabled: true
}
}
},
series: [
{
name: "活跃度",
data: [0, 0, 0, 0, 0, 1, 9]
}
]
};
this.chartOptions = template;
}
}
},
</script>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。