echarts中，X轴名称过长隐藏，鼠标hove显示全称

echarts中，X轴名称过长隐藏，鼠标hove显示全称：

 <div id="main" :style="{ width: '100%', height: '100%' }"></div>
1

     option: {
        title: {
          text: '重点物料库存预警',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          x: 'center',
          y: 'bottom'
        },
        grid: {
          left: '4%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            triggerEvent: true,
            axisLabel: {
              formatter: function (value, index) {
                // 如果标签长度超过一定长度，则进行省略
                if (value.length > 10) {
                  return value.slice(0, 10) + '...'
                }
                return value
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: []
      },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

  getEcharts(id, option) {
      var chartDom = document.getElementById(id)
      var myChart = this.$echarts.init(chartDom)
      myChart.setOption(option)
      const chartObserver = new ResizeObserver(() => {
        myChart.resize()
      })
      if (id == 'main') { // 判断哪个图需要tip
        this.extension(myChart)
      }
      chartObserver.observe(chartDom)
    },
1
2
3
4
5
6
7
8
9
10
11
12

 extension(chart) {
      var elementDiv = document.getElementById('extension')
      if (!elementDiv) {
        var div = document.createElement('div')
        div.setAttribute('id', 'extension')
        div.style.display = 'block'
        document.querySelector('html').appendChild(div)
      }
      chart.on('mouseover', function (params) {
        if (params.componentType == 'xAxis') { // xAxis yAxis
          var elementDiv = document.querySelector('#extension')
          //设置悬浮文本的位置以及样式
          var elementStyle =
            'position: absolute;z-index: 99999;color: #fff;font-size: 12px;padding: 5px;display: inline;border-radius: 4px;background-color: #303133;box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px'
          elementDiv.style.cssText = elementStyle
          elementDiv.innerHTML = params.value
          document.querySelector('html').onmousemove = function (event) {
            var elementDiv = document.querySelector('#extension')
            var xx = event.pageX - 10
            var yy = event.pageY + 15
            elementDiv.style.top = yy + 'px'
            elementDiv.style.left = xx + 'px'
          }
        }
      })
      chart.on('mouseout', function (params) {
        if (params.componentType == 'xAxis') { // xAxis yAxis
          var elementDiv = document.querySelector('#extension')
          elementDiv.style.cssText = 'display:none'
        }
      })
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32