echarts双柱状图配置

   <div id="charSelect" style="width: 100%; height: 255px"></div>

   // 双柱状
    getCarActiveTableInfo() {
      const params = {
        date: this.paramsDate,
        node: this.selectedRegion.node_id,
        item
      }
      tabActiveInfo(params)
        .then(res => {
          if (res.code === 200) {
            this.activelist = res.data.name || []
            this.activelist1 = res.data.recent || []
            this.activelist2 = res.data.past || []
            this.getdrawActive()
          } else {
            this.$notify({ type: 'danger', message: res.message })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

   // 配置
    getdrawActive() {
      const that = this
      var echartsActive = require('echarts')
      var myCharActive = echartsActive.init(document.getElementById('charSelect'), null, { renderer: 'svg' })
      if (this.tabletype === '1') {
        myCharActive.resize({ width: that.echartsWidth })
      }
      const optionActive = {
        dataZoom: [
          {
            type: 'inside',
            startValue: 0,
            endValue: 6, // 7条
            zoomLock: true, // 只能整个固定区域拖动，不能从两边缩放？
            preventDefaultMouseMove: false // 移动端和滑动冲突的问题
          }
        ],
        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //   // 坐标轴指示器，坐标轴触发有效，
        //   type: 'shadow',
        //   shadowStyle: {
        //   color:'rgba(254,239,234, 0.25)'
        // },
        // // 层级
        // z: 1
        // },
        // formatter: function(params) {
        // return `
        // <span style="font-family: PingFangSC-Regular;color: #000000;"><b>${that.selectedDate}</b></span><br>
        // <span style="font-family: PingFangSC-Regular;color: #666666;">本月：</span><span style="font-family: PingFangSC-Medium;color: #000000;"><b>${params[0].data}</b></span> <br>
        // <span style="font-family: PingFangSC-Regular;color: #666666;">上月：</span><span style="font-family: PingFangSC-Medium;color: #000000;"><b>${params[1].data}</b></span> <br>
        // `
        // }
        // },
        legend: {
          itemWidth: 12,
          itemHeight: 12,
          bottom: 'bottom',
          left: '0%',
          textStyle: {
            fontFamily: 'PingFangSC-Regular',
            color: '#888888',
            fontSize: '13' // 字体
          },
          selectedMode: false,
          data: ['本月', '上月']
        },
        grid: {
          left: '0%',
          right: '0%',
          top: '4.5%', // 数值被遮挡
          bottom: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            show: true,
            textStyle: {
              fontFamily: 'PingFangSC-Regular',
              color: '#666666',
              fontSize: '13' // 字体
            },
            interval: 0,
            formatter: function(value) {
              var str = ''
              var num = 3 // 每行显示字数
              var valLength = value.length // 该项x轴字数
              var rowNum = Math.ceil(valLength / num) // 行数
              if (rowNum > 1) {
                for (var i = 0; i < rowNum; i++) {
                  var temp = ''
                  var start = i * num
                  var end = start + num
                  temp = value.substring(start, end) + '\n'
                  str += temp
                }
                return str
              } else {
                return value
              }
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#EDEDED',
              width: 1
            }
          },
          axisTick: {
            show: false
          },
          data: this.activelist
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          }
          // max:2000
        },
        series: [
          {
            name: '本月',
            type: 'bar',
            barWidth: 14,
            barGap: '0%',
            itemStyle: {
              normal: {
                color: '#FF6633',
                barBorderRadius: [100, 100, 0, 0],
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: 'black',
                    fontSize: 6
                  }
                }
              }
            },
            data: this.activelist1
          },
          {
            name: '上月',
            type: 'bar',
            barWidth: 14,
            itemStyle: {
              normal: {
                color: '#FEAA0F',
                barBorderRadius: [100, 100, 0, 0],
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: 'black',
                    fontSize: 6
                  }
                }
              }
            },
            data: this.activelist2
          }
        ]
      }
      myCharActive.clear()
      myCharActive.setOption(optionActive)
      window.addEventListener('resize', () => {
        myCharActive.resize()
      })
    },