echarts实现X轴或Y轴名称过长展示省略号，并鼠标移入展示全称

标签：elementDiv return extension 省略号 show 展示 value true echarts

　　Y轴

    yAxis: {
          type: 'category',
          data: nameList,
          axisLine: {
            show: false // 是否显示坐标轴
          },
          axisTick: {
            show: false // 是否显示坐标轴刻度
          },
　　　　　　// 必须要进行设置
          triggerEvent: true,
          splitLine: { show: false }, // 去除网格线
            axisLabel: {
              show: true,
              fontSize: 10,
              width: 65,
              formatter: function (value) {
                if (value.length > 8) {
                  return `${value.slice(0, 8)}...`
                }
                return value
              }
            }
        },

　　X轴

          xAxis: {
            type: 'category',
            data: nameList,
　　　　　　　// 必须进行设置
            triggerEvent: true,
            axisLabel: {
              // x轴文字的配置
              show: true,
              interval: 0, // 使x轴文字显示全
              fontSize: 10,
              rotate: '18',
              width: 65,
              formatter: function (value) {
                if (value.length > 6) {
                  return `${value.slice(0, 6)}...`
                }
                return value
              }
              // overflow: 'truncate'
            }
          },

　　设置X轴或者Y轴的时候，要自己创建tooltip

   import { extension } from './util'

setOptions ({ nameList, valueList } = {}) {
      this.chart.setOption({
        backgroundColor: '#FFFFFF', // 背景色，默认无背景。
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          left: 10
        },
        grid: {
          top: 20,
          left: '3%',
          right: '10%',
          bottom: '6%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          show: false
        },
        yAxis: {
          type: 'category',
          data: nameList,
          axisLine: {
            show: false // 是否显示坐标轴
          },
          axisTick: {
            show: false // 是否显示坐标轴刻度
          },
          triggerEvent: true,
          splitLine: { show: false }, // 去除网格线
            axisLabel: {
              show: true,
              fontSize: 10,
              width: 65,
              formatter: function (value) {
                if (value.length > 8) {
                  return `${value.slice(0, 8)}...`
                }
                return value
              }
            }
        },
        series: [
          {
            data: [
              {
                value: valueList[0],
                itemStyle: {
                  color: '#78a75f'
                },
                label: {
                  show: true,
                  position: 'right'
                }
              },
              {
                value: valueList[1],
                itemStyle: {
                  color: '#4376b8'
                },
                label: {
                  show: true,
                  position: 'right'
                }
              },
              {
                value: valueList[2],
                itemStyle: {
                  color: '#e8c62a'
                },
                label: {
                  show: true,
                  position: 'right'
                }
              }
            ],
            barWidth: 13,
            type: 'bar'
          }
        ]
      }, true)
       extension(this.chart, 'yAxis')
    }

　　utils

// echarts X轴或者Y轴溢出省略，鼠标移入展示全部名称
export function extension (chart, axis) {
  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 === axis) {
      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 === axis) {
      var elementDiv = document.querySelector('#extension')

      elementDiv.style.cssText = 'display:none'
    }
  })
}

　　legend

         legend: {
            orient: 'vertical',
            right: 2,
            top: 10,
            bottom: 20,
            data: nameList,
            itemHeight: 15,
            itemWidth: 15,
            formatter: function (value) {
              if (value.length > 6) {
                return `${value.slice(0, 6)}...`
              }
              return value
            },
            tooltip: {
              show: true
            }
          },

　　

 

标签：elementDiv,return,extension,省略号,show,展示,value,true,echarts
From： https://www.cnblogs.com/hwy6/p/17204392.html