echarts x轴数据写在前端，根据后台返回的字段进行匹配，如果没有该字段则返回0

image.png

  getyktdByareaData () {
    getyktdByarea(this.startTime, this.endTime).then( res => {
      let listX = []
      let listY = []
      let listZ = []
      if (res.data.code !== 0) {
        this.$message.error(res.data.msg)
      } else {
        res.data.data.forEach(item => {
          listX.push(item.area)
          listY.push(item.households)
          listZ.push(item.cap)
        })
        for (let i = 0; i < this.xAxisData.length; i++) {
          let num = 0
          let numz = 0
          for (let j = 0; j < listX.length; j++) {
            if(this.xAxisData[i] === listX[j]){
              this.yAxisData.push(listY[j])
            } else {
              num++
            }
          }
          for (let z = 0; z < listX.length; z++) {
            if(this.xAxisData[i] === listX[z]){
              this.zAxisData.push(listZ[z])
            } else {
              numz++
            }
          }
          if (num === listX.length) {
            this.yAxisData.push('无数据')
          }
          if (numz === listX.length) {
            this.zAxisData.push('0')
          }
        }
        this.drawLine()
      }
    })
  },

  drawLine() {
    const myCharts = echarts.init(document.getElementById('myChart3'));
    // let yMax = 1000;
    // 绘制图表  宽度 4.3 * fontSize = 430 + 'px'  高度 3.2 * fontSize = 300 + 'px'
    const options = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999',
          },
        },
      },
      legend: {
        data: ['通电数', '通电容量'],
        textStyle: {
          color: '#fff',
          // fontSize: '14',
        },
      },
      grid: {
        left: '2%'
      },
      xAxis: [
        {
          type: 'category',
          data: this.xAxisData,
          axisPointer: {
            type: 'shadow',
          },
          // 坐标线
          axisLine: {
            symbol: ['none', 'arrow'],
            lineStyle: {
              type: 'solid',
              color: ['rgba(255,255,255,0.4)'], // 左边线的颜色
              width: '1', // 坐标线的宽度
            },
          },
          // 坐标值颜色设置
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
              fontSize: '18',
            },
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: '单位(户)',
          nameTextStyle: {
            color: '#fff',
          },
          // min: 0,
          // max: 250,
          // interval: 5,
          // 网格样式
          splitLine: {
            show: true,
            lineStyle: {
              color: ['rgba(255,255,255,0.1)'],
              width: 1,
              type: 'dotted',
            },
          },
          axisLine: {
            symbol: ['none', 'arrow'],
            lineStyle: {
              type: 'solid',
              color: ['rgba(255,255,255,0.4)'], // 左边线的颜色
              width: '1', // 坐标线的宽度
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
              fontSize: '18',
            },
          },
        },
        {
          type: 'value',
          name: '单位：万千伏安',
          // interval: 5000,
          // min: 0,
          // max: 50,
          // 网格样式
          splitLine: {
            show: true,
            lineStyle: {
              color: ['rgba(255,255,255,0.1)'],
              width: 1,
              type: 'dotted',
            },
          },
          axisLine: {
            symbol: ['none', 'arrow'],
            lineStyle: {
              type: 'solid',
              color: ['rgba(255,255,255,0.4)'], // 左边线的颜色
              width: '1', // 坐标线的宽度
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ddeaff',
              fontSize: '18',
            },
          },
        },
      ],
      barWidth: '30%',
      series: [
        {
          name: '通电数',
          type: 'bar',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#d2b55e' },
                  { offset: 0.5, color: '#73695b' },
                  { offset: 1, color: '#282d59' },
                ],
              ),
            },
            emphasis: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#d2b55e' },
                  { offset: 0.5, color: '#73695b' },
                  { offset: 1, color: '#282d59' },
                ],
              ),
            },
          },
          data: this.yAxisData,
        },
        {
          name: '通电容量',
          type: 'line',
          smooth: true,
          yAxisIndex: 1,
          data: this.zAxisData,
        },
      ],
    };
    myCharts.setOption(options);
    window.addEventListener('resize', () => {
      myCharts.resize();
    });
  },