Echarts横向柱状图title左对齐，超出隐藏鼠标悬浮，宽度自适应

1.左对齐，超出隐藏显示...

超出固定长度截取。

      yAxis: {
        type: 'category',
        triggerEvent: true,
        axisLine: { show: false },
        axisTick: { show: false },
        splitLine: { show: false },
        axisLabel: {
          formatter: function (value, index) {
            if (value.length > 10) {
              value = value.substring(0, 10) + "...";
            }
            return '{text|' + value + '}';
          },
          margin: leftWidth,
          width: leftWidth,
          align: 'left',
          padding: 0,
          rich: {
            text: {
              fontSize: '12px',
            },
          }
        },
        data: yAxisData,
      }

2.鼠标悬浮显示全部

// 处理y轴title鼠标悬浮
  const extensionOne = (chart, data) => {
    // 注意这里，是以X轴显示内容过长为例，如果是x轴的话，需要把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) {
      // console.log('params:', data,params.dataIndex);
      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 == 'yAxis') {
        var elementDiv = document.querySelector('#extension');
        elementDiv.style.cssText = 'display:none';
      }
    })
  };
//初始化echarts实例
var chart = echarts.init(document.getElementById('charts'));
// 将echarts实例和数据data传入方法中 
extensionOne(chart,data); // 

 3.宽度自适应，手动计算字符串宽度

  // 处理字符串的长度
  const countChineseCharacters = (str) => {
    const pattern = /[\u4e00-\u9fa5]/g; // 匹配中文字符的正则表达式
    const matches = str.match(pattern); // 使用 match() 方法找出所有匹配项
    let cnLength = matches ? matches.length : 0;
    if(str.includes('...')){
      return cnLength * 12 + (str?.length - cnLength) * 8
    }else{
      return cnLength * 12 + (str?.length - cnLength) * 8 + 16
    }
  }

  // 计算出图表距离左边的宽度
  const calculativeWidth = (data) => {
    let leftWidthArr = [];
    data.forEach(item => {
      leftWidthArr.push(countChineseCharacters(item.name))
    })
    return leftWidthArr.sort((a, b) => b - a)[0];
  }
  // 拿到最长的title的宽度
  const leftWidth = calculativeWidth(data);
    // 配置项
  option = {
      grid: {
        left: -leftWidth + 40,
        right: 50,
        bottom: '3%',
        top: '0',
        containLabel: true    
      }
  },