在vue项目中引入highcharts图表的方法(详解)

在vue项目中引入highcharts图表的方法(详解)

npm进行highchars的导入，导入完成后就可以进行highchars的可视化组件开发了

npm install highcharts --save

1、components目录下新建一个chart.vue组件

:option="option">

2、chart组件建好后，开始创建chart-options目录，里面创建一个options.js用来存放模拟的chart数据，如下图目录

如下图我写的一个柱状图的数据

module.exports = {

bar: {

chart: {

type:'column'//指定图表的类型，默认是折线图（line）

},

credits: {

enabled:false

},//去掉地址

title: {

text: '我的第一个图表' //指定图表标题

},

colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00',

'#24CBE5' ],

xAxihttp://s: {

cateluUhNuAWEgories: ['1号', '2号', '3号','3号','3号'] //指定x轴分组

},

yAxis: {

title: {

text: '最近七天', //指定y轴的标题

},

},

plotOptions: {

column: {

colorByPoint:true

},

},

series: [{ //指定数据列

name: '小明',

data: [{

y:1000,

color:"red"}, 5000, 4000,5000,2000] //数据

}]

}

}

3、引用chart组件

效果如下图所示

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。