随笔 - 135  文章 - 0  评论 - 2  阅读 - 18万

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

　　Y轴

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
yAxis: {
      type: 'category',
      data: nameList,
      axisLine: {
        show: false // 是否显示坐标轴
      },
      axisTick: {
        show: false // 是否显示坐标轴刻度
      },<br>　　　　　　// 必须要进行设置
      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轴

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
xAxis: {
  type: 'category',
  data: nameList,<br>　　　　　　　// 必须进行设置
  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'
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// 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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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
   }
 },

　　

 

posted on   稳住别慌  阅读(1947)  评论(0)  编辑  收藏  举报
相关博文：
·  echarts给balel加圆圈
·  el-select改下拉箭头
·  Y轴刻度标签太长显示省略号，鼠标经过显示完整内容
·  echarts Y轴名称显示不全，称位置调整 === X轴名称位置调整
·  echarts X轴字数太长显示不全，使用省略显示全部内容
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

Powered by: 博客园 Copyright © 2025 稳住别慌
Powered by .NET 9.0 on Kubernetes
点击右上角即可分享
微信分享提示
AI IDE Trae