echarts图表X轴或Y轴文字过长换行超出两行...

效果图

1. <div v-if="flag" ref="chart" class="charts-box" />
   更改option的formatter配置

option: {
      // backgroundColor: new this.$echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
      //   offset: 0,
      //   color: '#f7f8fa'
      // }, {
      //   offset: 1,
      //   color: '#cdd0d5'
      // }]),
      
      // title: {
      //   text: '检索热词',
      //   left: '0',
      //   top: '3%',
      //   textStyle: {
      //     height: 80,
      //     color: '#606266',
      //     fontSize: 18,
      //     fontWeight: 400,
      //     fontFamily: "Microsoft YaHei"
      //   }
      // },
      color:['#FF9514', '#3F9BF6', '#33A07B','#A776E4','#FFD491','#B3D8FF','#F78989','#FBC4C4','#A6D8CA','#FFD800','#8BA6FF','#DC4640'],
      legend: {
        // right: '10%',
        // top: '3%',
        data: []
      },
      grid: {
        left: '8%',
        top: '10%',
        height:'75%',
        // width:'80%'
      },
      xAxis: {
        type: 'category',
        splitLine: {
          interval: 0,
          lineStyle: {
            type: 'dashed'
          }
        },
        interval: 0,
        axisTick: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#DCDFE6',
            //这里是为了突出显示加上的
            //横轴信息全部显示
          }
        },
        axisLabel: {
          fontWeight: 400,
          fontFamily: 'Microsoft YaHei',
          fontSize: 18,
          color: '#303133',
          margin: 20,
          showMinLabel: true,
          showMaxLabel: true,
          align: 'left',
          interval: 0,//使x轴文字显示全
          rotate:-30,
        },
        // scale: false,
        data: []
      },
      // visualMap: {
      //   show: false,
      //   inRange: {
      //     symbolSize: [20, 50]
      //   }
      // },
      yAxis: {
        type: 'category',
        //重点一定要设置y轴的点击事件
        triggerEvent: true,
        axisTick: {
          show: false
        },
        interval: 0,
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed'
          }
        },
        axisLine: {
          lineStyle: {
            color: '#DCDFE6',
            //这里是为了突出显示加上的
            //横轴信息全部显示
          }
        },
        axisLabel: {
          fontWeight: 400,
          fontFamily: 'Microsoft YaHei',
          fontSize: 18,
          color: '#303133',
          showMinLabel: true,
          showMaxLabel: true,
          // align: 'left',
          interval: 0,//使x轴文字显示全
          margin:20,
          //此处是重点实现文字实现换行以及过长...
          formatter: function (params) {
              var newParamsName = "";
              var paramsNameNumber = params.length;
              var provideNumber = 6;  //一行显示几个字
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
              if (paramsNameNumber > provideNumber) {
              	//两行展示
                  for (var p = 0; p < 2; p++) {
                      var tempStr = "";
                      var start = p * provideNumber;
                      var end = start + provideNumber;
                      if (p == rowNumber - 1) {
                          tempStr = params.substring(start, paramsNameNumber);
                      } else {
                          tempStr = params.substring(start, end) + "\n";
                      }
                      newParamsName += tempStr;  
                  }
                  //换行时....
                  newParamsName = newParamsName.substring(0, newParamsName.length-1)+'...'+' '
              } else {
                  newParamsName = params;
              }
              //调取生成浮窗的函数
              that.extension(that.chart)
              return newParamsName
          },
        },
        data: [],
        scale: false
      },
      series: {
        type: 'scatter',
        // data: []
      }
      // SDATA.map((d, i) => {
      //     return {
      //       type: 'scatter',
      //       label: {
      //         show: true,
      //         // formatter: function (params) {
      //         //   return data[params.seriesIndex].num;
      //         // }
      //       },
      //       symbolSize:d[2]*5,
      //       data:d,
      //     	itemStyle:{
      // 				color:this.getColor(d[0])
      // 			}
      //     //   data: [
      //     //     [
      //     //       xData.indexOf(d.tech),
      //     //       yData.indexOf(d.business)
      //     //     ]
      //     //   ]
      //     }
      //   })
    }

生成toolTip的函数

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') {
       //用来判断需要toolTip的时候，文字长度大于11时才会出现
         if(params.value.length > 11) {
           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
            //  console.log('22', xx)
             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'
        }
      })
    },