Vue引入highCharts实现数据可视化
本文实例为大家分享了Vue引入highCharts实现数据可视化的具体代码，供大家参考，具体内容如下
效果图
文档Api地址
安装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>
相关文章
Rosine
2020-08-13
Summer
2020-01-14
Claire
2021-05-21
Ora
2023-07-20
Fern
2023-07-20
Grizelda
2023-07-20
Janna
2023-07-20
Ophelia
2023-07-21
Crystal
2023-07-21
Laila
2023-07-21
Aine
2023-07-21
Bliss
2023-07-21
Lillian
2023-07-21
Tertia
2023-07-21
Olive
2023-07-21
Glory
2023-07-21
Angie
2023-07-21
Nora
2023-07-24