1.vue安装highcharts插件
切换到当前项目下
npm install --save highcharts
npm install --save vue-highcharts
2.找到vue的main.js
加入代码:
import VueHighcharts from 'vue-highcharts';
Vue.use(VueHighcharts);
3.封装曲线图组件(curve.vue)
<template>
<div class="x-curve" style="width:90%;height:600px;display:inline-block;">
<div :id="id" ></div>
</div>
</template>
<script>
import HighCharts from 'highcharts'
export default {
// 验证类型
props: {
id: {
type: String
}
},
data() {
return{
option:{
chart:{
type:'line'
},
title:{
text:''
},
plotOptions:{
line:{
dataLabels:{
enabled:true
}
}
},
xAxis:{
categories:[],
},
yAxis:{
text:''
},
series:[]
}
}
},
mounted() {
this.bus.$on('showCurve', index=>{
setTimeout(() => {
if (index.id == this.id) {
this.option.title.text = index.params.title;
this.option.xAxis.categories = index.params.categories;
this.option.yAxis.text = index.params.y_label;
this.option.series = index.params.datas;
HighCharts.chart(index.id, this.option);
}
});
});
},
destroyed() {
this.bus.$off('showCurve');
},
}
</script>
调用模块的代码如下:
<template>
<div class="table">
<gCurve :id="graph_id"></gCurve>
<Button type="primary" icon="md-search" @click="getData">搜索</Button>
<gCurve :id="graph_id2"></gCurve>
</div>
</template>
<script>
import bus from '../utils/eventBus.js';
export default {
components:{
gCurve: require('./chart/curve.vue')
},
data(){
return {
graph_id:'test',
graph_id2:'test1',
}
},
//计算属性
computed: {
},
created(){
},
mounted() {
setTimeout((index) => {
this.getData();
},1000)
},
methods: {
/**
* 加载数据
**/
getData(){
var params = {
title: '测试曲线图',
categories:['一月','二月','三月','四月','五月','六月','七月','八月','九月'],
y_label:'y轴测试',
datas:[{
name:'A',
data:[7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
},{
name:'B',
data:[3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
}
bus.$emit('showCurve', {'id':this.graph_id, 'params':params});
var params1 = {
title: '测试曲线图',
categories:['1月','2月','3月','4月','5月','6月','7月','8月','9月'],
y_label:'y轴测试',
datas:[{
name:'A',
data:[7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
},{
name:'B',
data:[3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
}
bus.$emit('showCurve', {'id':this.graph_id2, 'params':params1});
},
}
}
</script>
如上功能的实现特点:
1.实现了一个页面加载多个相同图
2.使用emit通信机制调用对应的图片组件