vue eachrt X轴 Y轴文字过长，显示省略号...,并且鼠标移动展示全 称

首先在文字过长的X轴或Y轴加上

 yAxis: {
          type: 'category',
          data: [],
          axisLine: {
            show: false
        },
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
          //开启鼠标事件！！这一句很重要
        triggerEvent: true,
        axisLabel:{
          margin: 8,
          formatter:function(params){
              var val="";
              if(params.length >8){
                  val = params.substr(0,8)+'...';
                  return val;
              }else{
                  return params;
              }
          }
        }
        },

 此时名称就被截取了，后续被省略号...替代。

下面写 鼠标移动上去的方法。

extension(chart) {
      // 注意这里，是以X轴显示内容过长为例，如果是y轴的话，需要把params.componentType == 'xAxis'改为yAxis
      // 判断是否创建过div框,如果创建过就不再创建了
      // 该div用来盛放文本显示内容的，方便对其悬浮位置进行处理
      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: #666;font-size: 14px;padding: 15px;display: inline;border-radius: 4px;background-color: #fff;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 - 30
            elementDiv.style.top = yy + 'px'
            elementDiv.style.left = xx + 'px'
          }
        }
      })
      chart.on('mouseout', function (params) {
        //注意这里，我是以X轴显示内容过长为例，如果是y轴的话，需要改为yAxis
        if (params.componentType == 'yAxis') {
          var elementDiv = document.querySelector('#extension')
          elementDiv.style.cssText = 'display:none'
        }
      })
    }

然后在初始化图表时调用该方法

 initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.updateChart()
      this.extension(this.chart)
    },