Vue中使用highcharts之柱状图
参考http://blog.jianshukeji.com/2017/09/use-highcharts-with-vue/目录1、在Vue项目中下载highcharts2、简单的封装一个 Components3、调用组件4、结果图1、在Vue项目中下载highchartsnpm install highcharts下载完以后可以看到2、简单的封装一个 ...
·
参考http://blog.jianshukeji.com/2017/09/use-highcharts-with-vue/
目录
1、在Vue项目中下载highcharts
npm install highcharts
下载完以后可以看到
2、简单的封装一个 Components
HighchartsComponent.vue
<template>
<div class="highcharts-container" ></div>
</template>
<script>
import Highcharts from 'highcharts/highstock'
import HighchartsMore from 'highcharts/highcharts-more'
import HighchartsDrilldown from 'highcharts/modules/drilldown'
import Highcharts3D from 'highcharts/highcharts-3d'
// 树状图中的点(矩形)的颜色是由和它同级的数据点的值来计算的。
// 如果需要 colorAxis 功能则需额外的引入http://cdn.hcharts.cn/highcharts/modules/heatmap.js 。
import HeatMap from 'highcharts/modules/heatmap'
import Exporting from 'highcharts/modules/exporting'
import TreeMap from 'highcharts/modules/treemap'
HighchartsMore(Highcharts)
HighchartsDrilldown(Highcharts)
Highcharts3D(Highcharts)
HeatMap(Highcharts)
Exporting(Highcharts)
TreeMap(Highcharts)
export default {
props: ['defOptions', 'styles'],
name: 'highcharts',
data () {
return {
chart: null
}
},
mounted () {
this.initChart()
},
watch: {
// 当外面传进来的defOptions有变化时重新渲染视图
defOptions: function (val, oldVal) {
this.initChart()
}
},
methods: {
initChart () {
// 根据传进来的style设置宽高
this.$el.style.width = (this.styles.width || 800) + 'px'
this.$el.style.height = (this.styles.height || 400) + 'px'
this.chart = new Highcharts.Chart(this.$el, this.defOptions)
}
}
}
</script>
<style>
.highcharts-container {
width: 800px;
height: 400px;
}
</style>
3、调用组件
<template>
<highcharts-container :defOptions="options" :styles="sty"></highcharts-container>
</template>
<script>
import HighchartsContainer from '../../common/HighchartsComponent.vue'
export default {
components: {
HighchartsContainer
},
data () {
return {
sty: {
width: 1200,
height: 400
},
options: {
title: {
text: '按时间汇总',
x: -20 // center
},
chart: {
type: 'column'
},
xAxis: {
categories: ['00:00~01:00', '01:00~02:00', '02:00~03:00', '03:00~04:00', '04:00~05:00', '05:00~06:00',
'06:00~07:00', '07:00~08:00', '08:00~09:00', '09:00~10:00', '10:00~11:00',
'11:00~12:00', '12:00~13:00', '13:00~14:00', '14:00~15:00', '15:00~16:00',
'16:00~17:00', '17:00~18:00', '18:00~19:00', '19:00~20:00', '20:00~21:00',
'21:00~22:00', '22:00~23:00', '23:00~24:00'
]
},
yAxis: {
title: {
text: '过车统计'
},
// 标示线
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '辆' // 提示信息所带单位
},
legend: {
enabled: false // 禁用图例
},
credits: {
enabled: false // 禁用版权信息
},
series: [{
name: '过车数量',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6,
7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]
}
}
}
}
</script>
<style>
</style>
4、结果图
更多推荐
已为社区贡献2条内容
所有评论(0)