1.html
注:最外层要加div,要不然会报错(找不到容器);
2.js
代码:
import $ from "jquery";
import Highcharts from "highcharts";
export default {
props: ["data", "id",'content'],
data() {
return {};
},
mounted() {
this.drawLine(this.data,this.id,this.content);
},
methods: {
drawLine(data,id,content) {
let option = {
chart: {
type: "area"
},
title: {
text: content
},
xAxis: {
categories: (function() {
let arr = [];
for (let i = 0; i < data.datas.length; i++) {
arr.push(data.datas[i].date);
}
return arr;
})(),
tickmarkPlacement: "on",
title: {
enabled: false
}
},
yAxis: {
title: {
text: "次"
},
labels: {
formatter: function() {
return this.value;
}
}
},
tooltip: {
split: true,
valueSuffix: " 次"
},
plotOptions: {
area: {
stacking: "normal",
lineColor: "#666666",
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: "#666666"
}
}
},
series: (function() {
let arr = [];
let color = ["#2A9798", "#E69A27", "#D87A80"];
for (let i = 0; i < data.columns.length; i++) {
arr.push({
name: data.columns[i],
type: "line",
smooth: false, //折线图平滑属性
data: (function() {
let arr = [];
for (let z = 0; z < data.datas.length; z++) {
for (let j = 0; j < data.datas[z].datas.length; j++) {
if (data.datas[z].datas[j].faultType == data.columns[i]) {
arr.push(data.datas[z].datas[j].count);
}
}
}
return arr;
})()
});
}
return arr;
})()
};
Highcharts.chart(this.id, option);
}
}
};