Vue使用highCharts
1.安装highchars
npm install highcharts --save
2.导入
在script标签下导入
<script>
import HighCharts from 'highcharts'
</script>
3.图表代码（折线图）
initCPUChart(id,title, data,timeData){
this.cpuChart = HighCharts.chart(id,{//id是html标签容器的id
title: {
text: title
},
credits:{
enabled: false // 禁用版权信息
},
exporting: {
enabled:false //去掉导出按钮
},
yAxis: {
title: {
text: ''
}
},
xAxis: {
categories: timeData
},
colors:[
'#1EA51E','#1E1EA5','#A51E1E' //设置颜色
],
legend: {//图例
verticalAlign: 'bottom',
layout: 'vertical',
enabled: true
},
plotOptions: {
series: {
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
},
label: {
connectorAllowed: false
},
}
},
series: data,
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
})
},
4.甘特图示例代码
//图表
initTimeChart(timedata) {
HighCharts.chart('timeChart', {
chart: {
type: 'xrange'
},
title: {
text: ''
},
xAxis: {
opposite: true,
categories: [
0,
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20,
21,
22,
23,
"24 o'clock"
]
},
credits: {
enabled: false
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
yAxis: {
title: {
text: ''
},
labels: {
enabled: false
}
},
tooltip: {
enabled: true,
formatter : function (){ // 提示框格式化字符串
var s = ''+this.x+"-"+this.x2+" o'clock";
return s;
},
},
plotOptions: {
series: {
cursor: 'pointer',
events: {
//click: function(e) {
click: (e) => { //图表点击事件
var x = e.point.x;
var x2 = e.point.x2;
var y = e.point.y;
var data = x+":"+(x2-x);
console.log(data);
this.initData(data);
}
}
}
},
series: [
{
// pointPadding: 0,
// groupPadding: 0,
borderColor: 'gray',
pointWidth: 5,
data:timedata,
dataLabels: {
enabled: false
}
}
]
});
},
//时间数据
async getTimeData(){
var timedata = new Array();
const{data:res} = await this.$http.get('/api/count/task/period');
if(res.code == 200){
for (var i in res.data) {
var arr = res.data[i].split(':');
var start = Number(arr[0]);
var end = start + Number(arr[1]);
this.sliderValueData.push([start, end]);
timedata.push({x:start,x2:end,y:parseInt(i)});
}
this.initTimeChart(timedata);
}
},
