echarts X轴名称太长 悬浮框

1. getX轴添加触发条件

getEcharts () {
      const chart2 = this.$echarts.init(document.querySelector('.box1'))
      const option = {
        xAxis: {
          type: 'category',
          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          data: ['活动huodnejjejeje1', '活动B', '活动C', '活动yeeeeeeeeeeeD', '活动E', '活动F', '活动G'],
          // 触发条件，show，显示为true
          triggerEvent: {
            show: true
          },
          axisLabel: {
            textStyle: {
              color: '#333',
              fontSize: 12
            },
            formatter: function (array) {
              const newStr = array.length > 4 ? array.substr(0, 4) + '...' : array
              return newStr
            }
          }
        },
        yAxis: {
          type: 'value'
          // data:
        },
        grid: {
          left: '3%',
          right: '2%',
          top: '15%',
          containLabel: true
        },

        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]

      }
      chart2.clear()
      chart2.setOption(option)
      this.extension(chart2, '.box1')
    },

2. 定义悬浮函数

 extension (chart2, className) {
      // 判断是否创建过div框,如果创建过就不再创建了
      // 该div用来盛放文本显示内容的，方便对其悬浮位置进行处理
      var id = document.getElementById('extension')
      if (!id) {
        // var div = "
"
        // $('html').append(div)
        const html = document.documentElement
        const div = document.createElement('div')
        div.id = 'extension'
        div.display = 'block'
        html.appendChild(div)
      }
      chart2.on('mouseover', (params) => {
        if (params.componentType === 'xAxis') {
          // 设置悬浮文本的位置以及样式
          const div = document.getElementById('extension')
          div.style.position = 'absolute'
          div.style.color = '#333'
          div.style['font-size'] = '12px'
          div.style.padding = '5px'
          div.style.display = 'inline'
          div.style['border-radius'] = '4px'
          div.style['background-color'] = 'rgba(255, 255, 255, 0.5)'
          div.style['box-shadow'] = 'rgba(0, 0, 0, 0.3) 2px 2px 8px'
          div.innerText = params.value

          const html = document.documentElement
          html.onmousemove = function (e) {
            var xx = e.pageX - 10
            var yy = e.pageY + 15
            document.getElementById('extension').style.top = yy + 'px'
            document.getElementById('extension').style.left = xx + 'px'
          }
        }
      })
      chart2.on('mouseout', function (params) {
        if (params.componentType === 'xAxis') {
          document.getElementById('extension').style.display = 'none'
          document.getElementById('extension').style.innerText = ''
        }
      })
    }

3. 展示echarts

this.getEcharts()

// 可以在data中定义个数据，在echarts init 的时候复制给data 添加resize 事件
//  this.data = this.$echarts.init(....)
window.addEventListener('resize', () => {
this.data.resize()
})