npm进行highchars的导入，导入完成后就可以进行highchars的可视化组件开发了
1、components目录下新建一个chart.vue组件
@H_301_12@
import HighCharts from 'highcharts'
export default {
// 验证类型
props: {
id: {
type: String
},option: {
type: Object
}
},mounted() {
HighCharts.chart(this.id,this.option)
}
}
2、chart组件建好后，开始创建chart-options目录，里面创建一个options.js用来存放模拟的chart数据，如下图目录
如下图我写的一个柱状图的数据
标题
},colors: ['#058DC7','#50B432','#ED561B','#DDDF00','#24CBE5' ],xAxis: {
categories: ['1号','2号','3号','3号'] //指定x轴分组
},yAxis: {
title: {
text: '最近七天',//指定y轴的标题
},},plotOptions: {
column: {
colorByPoint:true
},series: [{ //指定数据列
name: '小明',data: [{
y:1000,color:"red"},5000,4000,2000] //数据
}]
}
}
3、引用chart组件
效果如下图所示
以上这篇在vue项目中引入highcharts图表的方法(详解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。
