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;
  }
},
posted on 2020-07-28 14:42  蟑螂恶霸G  阅读(1588)  评论(0编辑  收藏  举报