vue中echarts基础调用后台数据
async getList() {
const responseData = await screen_count_lineChart({
startTime: "2020-07-20",
endTime: "2020-07-27"
});
// 任务总量
responseData.data.allTask.forEach(item => {
this.allTask.date.push(item.date);
this.allTask.workNum.push(item.tasknum);
});
// 订单总数
responseData.data.mapOrder.forEach(item => {
this.mapOrder.date.push(item.date);
this.mapOrder.workNum.push(item.tasknum);
});
// 成功率
responseData.data.successTask.forEach(item => {
this.successTask.date.push(item.date);
this.successTask.workNum.push(item.tasknum);
});
if (this.isFirst == false) {
// 订单图例
this.myChart = echarts.init(document.getElementById("main"));
this.myChart.setOption({
title: {
text: "订单数"
},
color: ["green"],
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#E9EEF3"
}
}
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: {
type: "category",
boundaryGap: false,
data: this.mapOrder.date
},
yAxis: {
type: "value"
},
series: [{
name: "订单数",
type: "line",
stack: "总量",
data: this.mapOrder.workNum
}]
});
// 执行任务数/成功率 图例
this.myChart2 = echarts.init(document.getElementById("main2"));
this.myChart2.setOption({
title: {
text: "执行任务数/成功率"
},
color: ["orange", "skyblue"],
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#E9EEF3"
}
}
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: {
type: "category",
boundaryGap: false,
data: this.allTask.date
},
yAxis: {
type: "value"
},
series: [{
name: "执行任务数",
type: "line",
stack: "总量",
data: this.allTask.workNum
},{
name: "任务成功率",
type: "line",
stack: "百分比",
data: this.successTask.workNum
}]
});
this.isFirst = true;
}
},
