VUE之Echarts图表x轴y轴提示文字过长处理为省略号

心已赠人 2022-10-19 15:59 195阅读 0赞

只需对显示文字格式修改即可

yAxis: { 
              type: 'category',
              axisLine: { 
                show: false // 轴线
              },
              axisTick: { 
                show: false// 去除刻度
              },
              axisLabel: { 
                formatter: function(params) { 
                  const index = params.indexOf('#')
                  const newParams = params.slice(0, index)
                  var newParamsName = newParams.substring(0, 5) + '...'
                  return newParamsName
                }
              },
              data: []
            },

前后对比图：这样看起来清爽多了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhblhpYW9YaV95ZWFs_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhblhpYW9YaV95ZWFs_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhblhpYW9YaV95ZWFs_size_16_color_FFFFFF_t_70_pic_center]: /images/20221004/4705d3cf46d748ba86a711f817fc595a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhblhpYW9YaV95ZWFs_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221004/06f2c9e2b4124e90b260ade221b3de87.png

发表评论取消回复

表情：

评论列表（有 0 条评论，195人围观）

还没有评论，来说两句吧...

相关阅读

相关 echarts---x轴过长滑动显示

子： option = \{ title : \{ text: ‘某地区蒸发量和降水量’, subtext: ‘纯属虚构’ \}, tooltip...

男娘i/ 2024年04月19日 15:33/ 0 赞/ 15 阅读

相关 echarts----X轴文本过长处理方法

.截取名称用省略号替代，设置一个隐藏域用来显示完整的名称（个人推荐方式）先在**xAxis**中添加属性 xAxis: \{ triggerEvent: t...

ゞ浴缸里的玫瑰/ 2024年04月19日 15:22/ 0 赞/ 13 阅读

相关 echarts x/y轴坐标文字过长解决办法-换行

/ Created by HanSon on 2016/1/24. / function newline(option, number,

柔情只为你懂/ 2022年12月10日 07:20/ 0 赞/ 293 阅读

相关 echarts 隐藏y轴x轴刻度

效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

以你之姓@/ 2022年12月09日 01:54/ 0 赞/ 370 阅读

相关 Vue echarts 修改 X轴、Y轴样式以及文字样式

前言：做数据统计图的时候总结了一下修改样式的东西 x轴 ------xAxis y轴 ------yAxis 数据 -----series 先来样式对

淡淡的烟草味﹌/ 2022年11月12日 14:52/ 0 赞/ 1119 阅读

相关 echarts X轴Y轴鼠标滑动放大缩小

option = { title: { text: '' }, tooltip: {

朱雀/ 2022年10月23日 08:12/ 0 赞/ 404 阅读

相关 VUE之Echarts图表x轴y轴提示文字过长处理为省略号

只需对显示文字格式修改即可 yAxis: { type: 'category', axisLine: {

心已赠人/ 2022年10月19日 15:59/ 0 赞/ 196 阅读

相关 echarts统计图Y轴（或X轴）文字过长问题解决

echarts 统计图Y轴文字过长在使用echarts时，出现数值非常大，Y轴又显示不下的情况就需要压缩Y轴数值刻度。 ![744482-20190227182035

不念不忘少年蓝@/ 2022年10月02日 14:43/ 0 赞/ 293 阅读

相关 VUE之Echarts图表y轴刻度提示文字过长显示为省略号

实现方法：在y轴配置中定义： yAxis: { type: 'value', // max: '120

桃扇骨/ 2022年09月04日 07:44/ 0 赞/ 189 阅读

相关 echarts统计图Y轴（或X轴）文字过长问题解决

echarts 统计图Y轴文字过长在使用echarts时，出现数值非常大，Y轴又显示不下的情况就需要压缩Y轴数值刻度。 ![744482-20190227182035

深藏阁楼爱情的钟/ 2022年01月06日 12:55/ 0 赞/ 809 阅读