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;

　　}

},