echarts设置Y轴label的具体宽度，并且在文字溢出省略号情况下鼠标hover时展示全部label

有时我们会有一些比较特殊的需要，比如说柱状图y轴label的名称太长，页面展示不开，我们可以让文字显示固定字符，其余显示省略号，但是固定宽度之后可以让上下两个柱状图比较整齐。如图

 1.文字溢出省略号，我这里就显示了7个字符超出的就显示省略号，使用formatter自定义label 然后吧获取到的val截取就可以了。

2.给label设置固定宽度。lable仍需要使用formatter进行自定义，主要为rich 具体可参照文档

主要的代码就是红框中的代码 使用rich处理 。这里有个问题 就是backgroundColor必须要些，不写的话宽度不会生效。

3.鼠标hover时label显示全部。具体实现思路为：我们在页面创建一个div或者别的什么标签，然后监听echarts的mouseover事件，获取到当前的value，然后赋值给创建的div标签。鼠标移出的时候吧div标签删除或者隐藏都可。具体实现如下：

 效果如图。

      this.chart.setOption(option)

      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)

      }

       this.chart.on('mouseover', function (params) {

        // 如果是数字则不展示hover效果

        if (!isNaN(params.value)) {

          return

        }

        if (params.componentType === 'yAxis') {

          var elementDiv = document.querySelector('#extension')

          // 设置悬浮文本的位置以及样式

          var elementStyle =

            'position: absolute;z-index: 99999;color: #fff;font-size: 12px;padding: 7px;display: inline;border-radius: 4px;background-color: rgba(0,0,0,0.7);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'

          }

        }

      })

      this.chart.on('mouseout', function (params) {

        // 注意这里，我是以X轴显示内容过长为例，如果是y轴的话，需要改为yAxis

        if (params.componentType === 'yAxis') {

          var elementDiv = document.querySelector('#extension')

          elementDiv.style.cssText = 'display:none'

        }

      })