echarts的x轴或者y轴文本太长省略号后鼠标浮上显示内容

1.在xAxis或yAxis设置取的文本大小

2.在所需要的轴开启triggerEvent,这个性质是拿来开启点击事件

代码如下:

  option = {
        title: {
          x: '43%',
          y: '2%',
          textStyle: {
            fontWeight: 400,
            fontSize: 16,
            color: 'white'
          },
          text: this.localList.key
        },
        color: ['#06cace'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: [
          {
            type: 'value',
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              textStyle: {
                color: 'rgba(255,255,255,.6)',
                fontSize: '12',
              },

            },
            splitLine:{
              show:false
            },
            axisLine: {
              show: true,

            }
          }
        ],
        yAxis: [
          {
            type: 'category',
            axisLabel: {
              textStyle: {
                color: 'rgba(255,255,255,.6)',
                fontSize: '12'
              },
              // interval: 0,
              formatter: function (value) {
                if (value.length > 3) {
                  return `${value.slice(0, 3)}...`
                }
                return value
              },
            },
            data: location,
            triggerEvent: true,
          }
        ],
        grid: {
          top: '12%',
          left: '12%',
          right: '8%',
          bottom:'8%'
          // containLabel: true
        },
        dataZoom: [
          {
            type: 'inside',
            yAxisIndex: [0],
            start: 0,
            end: 100,
            shadowBlur: 0
          },
          {
            yAxisIndex: [0],
            start: 0,
            end: 100,
            moveHandleSize: 2,
            left: '95%',
            width:10,
            dataBackground: {
              lineStyle: {
                color: "rgba(99,12,12,0)",
                width: 1
              }
            },
            textStyle: false,
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '50%',
            handleStyle: {
              color: '#6B6C6D',
              shadowBlur: 1,
              shadowColor: 'rgba(0, 0, 0, 0.6)',
              shadowOffsetX: 1,
              shadowOffsetY: 1
            },
            moveHandleStyle: {
              color: '#6B6C6D'
            },
            shadowBlur: 10,
            borderColor: '#6B6C6D'
          }
        ],
        series: [
          {
            name: '天数(天)',
            type: 'bar',
            barWidth: location.length>8?5:12,
            data: waitTime,
            itemStyle: {
              barBorderRadius: [0, 5, 5, 0]
            }
          }
        ]
      }

3.在重置图表的地方配置事件

 this.$nextTick(() => {
        this.echartsDom = echarts.init(document.getElementById(this.id))
        this.echartsDom.clear()
        this.echartsDom.setOption(option)
        window.addEventListener('resize', () => {
          if (this.echartsDom) {
            this.echartsDom.resize()
          }
        })
        const chart =  echarts.init(document.getElementById(this.id))
        this.echartsDom.on('click', function (params) {
          // 添加点击事件
          if (params.componentType == "yAxis") {
            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 == '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) {
              //注意这里，我是以X轴显示内容过长为例，如果是y轴的话，需要改为yAxis
              if (params.componentType == 'xAxis') {
                var elementDiv = document.querySelector('#extension')

                elementDiv.style.cssText = 'display:none'
              }
            })
          }
        })
      })