因为接口只会返回一个数字，而前端需要需要渲染一个echarts图表，这就需要通过日期和类型去和接口获取数据，需要循环访问接口，且不能影响到返回数据的排序。
需要用到 async await 依次获取

<template>
  <div class="echarts1" ref="echarts">

  </div>
</template>

<script>
import { FontChart } from '../../../utils/utils'
import { jxswljsc } from '../../../api/api/zixun'
import moment from 'moment'

export default {
  name: 'echarts1',
  components: {},
  props: {
    id: {
      type: String,
      default () {
        return ''
      }
    }
  },
  data () {
    return {
      status: '',
      xdata: [],
      ydata: [],
      typelist: [],
      index: 0,
      ydata1: [],
      ydata2: [],
      index2: 0
    }
  },
  watch: {},
  mounted () {
    this.getdate()
  },
  methods: {
    // 获取本周日期
    getdate () {
      const weekOfday = moment().format('E')
      const lastMonday = moment().subtract(weekOfday - 1, 'days').format('YYYYMMDD')
      const lastSunday = moment().add(7 - weekOfday, 'days').format('YYYYMMDD')
      let arr = []
      for (let i = lastMonday; i <= lastSunday; i++) {
        let j = String(i)
        let obj = {
          day: j.slice(0, 4) + j.slice(4, 6) + j.slice(6, 8)
        }
        arr.push(obj)
      }
      const dateArr = arr
      this.xdata = dateArr
      this.ydata1 = []
      this.getdata()
      this.getdata2()
    },
    // 获取第一组数据
    async getdata () {
      var that = this
      that.total = 0
      if (that.xdata[that.index]) {
        var datas = that.xdata[that.index].day
        await jxswljsc({
          a: 'gs_gate_car_num_d_time',
          g: 'Home',
          c: 'Gs',
          type: 1,
          time: datas,
        }).then(function (res) {
          that.index = that.index + 1
          that.ydata1.push(res.DATA)
          that.getdata()
          if (that.ydata1.length >= 7) {
            that.drawLine()
          }
        })
      }
    },
    // 获取第二组数据
    async getdata2 () {
      var that = this
      if (that.xdata[that.index2]) {
        var datas = that.xdata[that.index2].day
        await jxswljsc({
          a: 'gs_gate_car_num_d_time',
          g: 'Home',
          c: 'Gs',
          type: 2,
          time: datas,
        }).then(function (res) {
          that.index2 = that.index2 + 1
          that.ydata2.push(res.DATA)
          that.getdata2()
          if (that.ydata2.length >= 7) {
            that.drawLine()
          }
        })
      }
    },
    // 渲染柱状图
    drawLine () {
      var that = this
      window.addEventListener('resize', this.drawLine)
      let myChart = this.$echarts.init(this.$refs.echarts)
      let xdata = []
      that.xdata.forEach((type) => {
        xdata.push(moment(type.day).format('MM.DD'))
      })
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          top: '25%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: xdata,
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(179, 216, 221, 1)',
              width: 1,
              type: 'solid'
            }
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            interval: 0,
            rotate: 0,
            textStyle: {
              color: 'rgba(179, 216, 221, 1)',
              fontSize: FontChart(12)
            }
          },
        }],
        yAxis: [{
          type: 'value',
          nameTextStyle: {
            color: 'rgba(179, 216, 221, 1)',
            fontSize: FontChart(12),
            padding: [0, 0, 0, -40]
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: 'rgba(179, 216, 221, 1)',
            }
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#00c7ff',
              width: 1,
              type: 'solid'
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#063374',
            }
          }
        }],
        series: [{
          name: '高速出口',
          type: 'bar',
          data: that.ydata1,
          barWidth: '25%',
          barGap: 1,
          itemStyle: {
            normal: {
              color: 'rgba(41, 233, 213, 1)',
              opacity: 1,
            }
          }
        }, {
          name: '高速入口',
          type: 'bar',
          data: that.ydata2,
          barWidth: '25%',
          barGap: 1,
          itemStyle: {
            normal: {
              color: 'rgba(0, 162, 255, 1)',
              opacity: 1,
            }
          }
        }]
      }
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },
  }
}
</script>

<style lang="scss" scoped>
.echarts1 {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>