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

桃扇骨 2022-09-04 07:44 228阅读 0赞

**实现方法：**  
*在y轴配置中定义：*

yAxis: { 
              type: 'value',
              // max: '1200',
              axisLine: { 
                show: false,
                lineStyle: { 
                  color: 'white'
                }
              },
              axisTick: { 
                show: false// 去除刻度
              },
              splitLine: { 
                show: true,
                lineStyle: { 
                  color: '#203557'
                }
              },
            triggerEvent: true,
              axisLabel: { 
                formatter: param => { 
                  var template = param .toString()//由于是number类型，所以转字符串
                  if (template .length > 3) {  // 要显示的字符数
                    template = template .substring(0, 3) + '...'//字符串截取
                  }
                  return template 
                }
              }
            },

***效果图：***  
![在这里插入图片描述][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]: /images/20220829/fd4c164e061648449b7c102f2bf77e10.png

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关 echarts自定义y轴刻度信息

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>

朱雀/ 2023年07月17日 06:05/ 0 赞/ 257 阅读

相关 Echarts设置y轴的刻度只显示整数

![20210422114619391.png][] ![20210422114632558.png][] > minInterval: 1,//y轴的刻度只

Dear 丶/ 2023年01月15日 10:24/ 0 赞/ 353 阅读

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

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

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

相关 echarts 隐藏y轴x轴刻度

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

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

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

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

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

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

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

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

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

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

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

相关【Vue】21.vue项目中ECharts图表双Y轴

安装ECharts图表插件 npm install echarts --save 实例效果： ![watermark_type_ZmFuZ3poZW5naGVpd

╰半夏微凉°/ 2022年04月24日 15:24/ 0 赞/ 473 阅读

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

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

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