成果圖：
簡略寫下步驟（注意點已標紅）：
一、
<div class="table-details">
<vue-highcharts :options="chartOption" ref="lineCharts"></vue-highcharts>
</div>
.table-details {
width: 100%;
}
//控制好高，如果不設置高度圖表渲染出后會由於數據太大無限拉長，超出可控范圍
.table-details .vue-highcharts {
width: 100%;
height: 350px;
}
二、
import VueHighcharts from "vue2-highcharts";
data() {
return {
chartOption: {
series: []
},
}
}
// 設置圖表數據 dataList, dataList2是從接口獲取到數據傳遞過來的
setSeriesData(dataList, dataList2) {
var arrArr = [];
//設置第一條數據列
var asyncData = {
name: "購買話費總額",
marker: {
symbol: "circle"
},
data: []
};
//設置第二條數據列
var asyncData2 = {
name: "贈送話費總額",
marker: {
symbol: "diamond"
},
data: []
};
//為數據列里的data[]添加數據
for (var index in dataList) {
var item = dataList[index];
var amount = item.amt;
//數據一定要轉化為Number類型，不然會報錯
asyncData.data.push(Number(amount));
}
for (var index in dataList2) {
var item = dataList2[index];
var amount = item.amt;
asyncData2.data.push(Number(amount));
}
arrArr.push(asyncData);
arrArr.push(asyncData2);
let lineCharts = this.$refs.lineCharts;
// 先清空
lineCharts.removeSeries();
//新增圖表的series，下面是增加多條series的寫法，
//如果只增加一條是lineCharts.addSeries(arrArr);
for (var i = 0; i < arrArr.length; i++) {
lineCharts.addSeries(arrArr[i]);
}
},
---------------------------------------------------------------------------------
額外添加些圖表里的配置——動態改變方法
usersChart.getChart().xAxis[0].setCategories(tit);
usersChart.getChart().yAxis[0].setTitle({ text: "人數" });
usersChart.getChart().tooltip.update({
formatter: function() {
return this.x + ":<br />" + this.y + " 人";
}
});
let chartsData = [];
let colorArr = ["#d904bf", "#F6BD0F", "#031698", "#f00"];
for (let i = 0; i < this.incomeArr.length; i++) {
chartsData.push({ color: colorArr[i], y: this.incomeArr[i] });
}
let incomeChart = this.$refs.incomeChart;
incomeChart.removeSeries();
incomeChart.addSeries({ data: chartsData });