Y轴刻度标签太长显示省略号，鼠标经过显示完整内容

? 效果：

如图因业务需求Y轴显示数值变化，且小数位要求比较高导致Y轴刻度会很长，而造成界面很丑。
在网上找到一些方式跟自己想要的效果不太一样，最后自己琢磨了一下实现上面的效果。
实现此功能分为两个步骤

1. 将超出长度部分文字使用省略号隐藏
   • 使用省略号隐藏比较简单，只需要在echarts的option内，将yAxis中的axisLabel配置即可，主要在formatter

   •         triggerEvent: true,
             axisLabel: {
                       margin: 25,
                       interval: 1,
                       fontFamily: ' Microsoft YaHei',
                       fontWeight: 400,
                       color: '#E5E5E5',
                       align: 'center',
                       formatter: function(params: number | string) {
                         //标签输出形式
                         let val = params + '';
                         let newVal = '';
                         if (val.length > 5) {
                           newVal = val.substring(0, 5) + '...';
                         } else {
                           newVal = val + '   ';
                         }
                         return newVal;
                       }
                     },

2. 鼠标经过Y轴刻度时显示完整刻度

• • 这里需要主要两个地方，首先Y轴要响应和触发鼠标事件，需要将yAxis中的triggerEvent: true,
  • 然后在初始化echart之后，创建mouseover和mouseout事件，并调用即可

  •          
              drawChart(): void {
                let oldCharts: any = echarts.getInstanceByDom(
                  document.getElementById('myChart') as HTMLElement
                );
                if (oldCharts !== undefined) {
                  oldCharts.dispose(); //销毁旧图表
                }
                const chartDom: HTMLElement = document.getElementById(
                  'myChart'
                ) as HTMLElement;
                let initChart: any = echarts.init(chartDom);
                // params.initChart.clear(); //清空数据缓存(清空画布内容，实例还在)
                initChart.setOption(option);
                this.extension(initChart, domid);
              }
            
            
            /**
               * @description: echartsY轴鼠标经过显示完整刻度,离开隐藏
               * @param {*} chart 需要触发的图表
               * @param {*} domid 图表ID
               * @return {*}
               */
              
            extension(chart: any, domid: string): void {
                //该div用来盛放文本显示内容的，方便对其悬浮位置进行处理
                let chartDom = (document.getElementById(domid) as HTMLElement)
                  .childNodes[1] as HTMLElement;
                chart.on("mouseover", function (param: any) {
                  //注意这里，我是以Y轴显示内容过长为例，如果是x轴的话，需要改为xAxis
                  if (
                    param.componentType == "yAxis" &&
                    param.targetType === "axisLabel" &&
                    param.value.length > 5
                  ) {
                    //设置悬浮文本的位置以及样式
                    let offsetX = param.event.event.offsetX;
                    let offsetY = param.event.event.offsetY;
                    chartDom.innerText = param.value;
                    chartDom.style.position = "absolute";
                    chartDom.style.left = offsetX + "px";
                    chartDom.style.top = offsetY - 30 + "px";
                    // chartDom.style.display = "block";
                    chartDom.style.padding = "5px";
                    chartDom.style.visibility = "visible";
                    chartDom.style.opacity = "1";
                    chartDom.style.boxShadow = " rgb(0 0 0 / 20%) 1px 2px ";
                    chartDom.style.backgroundColor = "rgba(50, 50, 50, 0.7) ";
                    chartDom.style.transition = `opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, 
                        visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, 
                        left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, 
                        top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s`;
                  }
                });
                chart.on("mouseout", function (params: any) {
                  //注意这里，我是以Y轴显示内容过长为例，如果是x轴的话，需要改为xAxis
                  if (params.componentType == "yAxis") {
                    // chartDom.style.display = "none";
                    chartDom.style.visibility = "hidden";
                    chartDom.style.opacity = "0";
                  }
                });
              }

PS:echarts插入canvas后会同时插入一个div作为tooltip提示框，我将Y轴的完整值通过此div显示，并设置样式，鼠标移入Y轴就会显示刻度和你设置的样式，但是可能会存在一些问题：

1.最开始我通过display控制dom显隐，在没有第一次触发tooltip的时候显示正常，但触发之后，div的样式就会被tooltip样式覆盖，它设置了透明度和visibility控制显隐，所以即使display:block也无法显示刻度，最后跟tooltip一样设置这两个属性。

2.因为上面说的样式覆盖问题，刚开始我设置的刻度样式比较简单，没有第一次触发tooltip的时候，刻度样式只有自己设置的那些，但鼠标移入tooltip之后就变成tooltip的样式，所以为了统一，我将刻度样式设置成跟tooltip类似，也可以通过option的调整tooltip样式

最后，肯定还有其它方式可以更好显示，根据需求修改即可