showChart1() {
// 通过id初始化
  let chart1 = echarts.init(document.getElementById(this.idName))
  var option = {
  // 到容器的距离
    grid: {
      top: '18',
      left: '0',
      right: '4',
      bottom: '0',
    },
    xAxis: [
      {
        type: 'category',
        data: this.xData,
        axisLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, .5)',
          },
        },
        axisLabel: {
          margin: 10,
          color: '#ffffff',
          textStyle: {
          // 可以根据屏幕尺寸显示不同字号
            fontSize: this.screenWidth == '1920' ? 16 : 12,
          },
          // 每个x轴数据的间距
          interval: 0,
          // 旋转显示，数据长度大于6的
          rotate: this.xData.length > 6 ? 30 : 0
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
    ],

    yAxis: [
      {
        // boundaryGap: ['20%', '20%'], //分割线间隔
        type: 'value',
        name: '',
        axisLabel: {
          formatter: '{value}',
          color: '#ffffff',
          fontSize: this.screenWidth == '1920' ? 16 : 12,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, .2)',
            type: 'dashed',
          },
        },
      },
    ],
    series: [
      {
        type: 'bar',
        data: this.yData,
        barWidth: this.screenWidth == '1920' ? '36px' : '20px',
        itemStyle: {
        // 柱状图上方显示数字
          normal: {
            label: {
              show: true, //开启显示数值
              position: 'top', //数值在上方显示
              textStyle: {  //数值样式
                color: '#D1DBFF',   //字体颜色
                fontSize: 14  //字体大小
              }
            },
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color:
                    this.idName == 'count'
                      ? 'rgba(62, 173, 255, 1)'
                      : this.idName == 'person'
                        ? '#04DBFD'
                        : '#FFCC3E', // 0% 处的颜色
                },
                {
                  offset: 1,
                  // 通过id判断颜色
                  color:
                    this.idName == 'count'
                      ? 'rgba(62, 173, 255, 0)'
                      : this.idName == 'person'
                        ? 'rgba(4, 219, 253, 0)'
                        : 'rgba(255, 204, 62, 0) ', // 100% 处的颜色
                },
              ], //
              false
            ),
          },
        },
      },
    ],
  }

  chart1.setOption(option, true)
  // 监听容器的大小使图表大小跟着变化
  setTimeout(function () {
    window.onresize = function () {
      chart1.resize()
    }
  })
},