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

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

npm install highcharts --save

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

:option="option">

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数据，如下图目录

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

module.exports = {

bar: {

chart: {

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

},

credits: {

enabled:false

},//去掉地址

title: {

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

},

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

'#24CBE5' ],

xAxis: {

categories: ['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组件

// 导入chart组件

import XChart from 'components/chart.vue'

// 导入chart组件模拟数据

import options from './chart-options/options'

export default {

name: 'app',

data() {

let option = options.bar

return {

id: 'test',

option: option

}

},

components: {

XChart

}

}

#test {

width: 400px;

height: 400px;

margin: 40px auto;

}

效果如下图所示

以上这篇在vue项目中引入highcharts图表的方法(详解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

在Vue中使用highCharts绘制3d饼图的方法

Vue 中使用vue2-highcharts实现曲线数据展示的方法

时间： 2018-03-04