您的位置：首页 > 产品设计 > UI/UE

在vue项目中引入highcharts图表的方法

2017-07-20 17:50 597 查看
npm进行highchars的导入，导入完成后就可以进行highchars的可视化组件开发了

npm install highcharts --save


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

<template>
<div class="x-bar">
<div :id="id"
:option="option"></div>
</div>
</template>
<script>
import HighCharts from 'highcharts'
export default {
// 验证类型
props: {
id: {
type: String
},
option: {
type: Object
}
},
mounted() {
HighCharts.chart(this.id,this.option)
}
}
</script>


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



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

module.exports = {
bar: {
chart: {
type:'column'//指定图表的类型，默认是折线图（line）
},
credits: {
enabled:false
},//去掉地址
title: {
text: '我的第一个图表' //指定图表标题
},
colors: ['#058DC7', '#50B432', '#ED561
4000
B', '#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组件

<template>
<div id="app">
<x-chart :id="id" :option="option"></x-chart>
</div>
</template>

<script>
// 导入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
}
}
</script>

<style>
#test {
width: 400px;
height: 400px;
margin: 40px auto;
}
</style>


效果如下图所示



内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航