第三方工具 - echarts中 设置x||y轴文案、提示文字等为固定字数,超出显示"..."

简介: 起初看到这种需求的时候,我是这个状态 对,我是拒绝的,人家echats画出来就是一个canvas,你让我怎么加... 但是,作为一个“有点追求的”前端,我得想招试试总结下来,唯一的突破点就是echarts的配置了。

起初看到这种需求的时候,我是这个状态

对,我是拒绝的,人家echats画出来就是一个canvas,你让我怎么加...
       但是,作为一个“有点追求的”前端,我得想招试试
总结下来,唯一的突破点就是echarts的配置了。


       最后果然被我找到了


一、先说x||y轴的文案处理:


       如图,x轴的配置也就都在这里了

       而关于x轴文案的设置,就是这个axisLabel属性了

       而跟内容有关的也就是这个formatter了,他有一个强大的回调函数,其参数value就是轴上显示的文案,

用这个万能的回调函数,还怕什么刁钻的效果是做不出来的!
       于是,一顿操作效果就出来了

       代码如下:

 1 axisLabel : 
 2  {
 3      formatter : function (value)
 4      {
 5          let valueTxt = '';
 6          if (value.length > 3) {
 7              valueTxt = value.substring(0, 4) + '...';
 8          }
 9          else {
10              valueTxt = value;
11          }
12          return valueTxt ;
13      }
14  }

 

二、图表上提示文案加“...”


       后来,饼图的数据提示文案也要求这个设置,这次我不慌了。

       依照这个思路,我就去饼图配置项中找答案去了;

       同理,负责显示文案的是label这个属性,那么提示内容肯定也是归他管的!

果然,让我找到了,这个强大的formatter!

他也有强大的回调函数,返回的参数更是多!

 

 

 

其中,参数params的name属性就是要显示的文案
所以同理又是一段操作,效果也出来了:
       代码如下:

 1 label : 
 2  {
 3      normal : 
 4      {
 5          show : true, position : 'inner',
 6          formatter : function (params)
 7          {
 8              console.log(params) let newName = '';
 9              if (params.name.length > 5) {
10                  newName = params.name.substring(0, 5) + '...';
11              }
12              else {
13                  newName = params.name;
14              }
15              return newName;
16          }
17      }
18  },

 

总结,依照这个思路,以后想要对提示文案啥的做任何"非人类"的创意设置,都是可以的了!

+1+1+1 ^_^

 

声明:

  请尊重博客园原创精神,转载或使用图片请注明:

  博主:xing.org1^

  出处:http://www.cnblogs.com/padding1015/

目录
相关文章
echarts设置单位的偏移
echarts设置单位的偏移
|
3月前
Echarts中横坐标文字显示不全
本文讨论了在ECharts中横坐标文字显示不全的问题,并通过设置`xAxis`的`axisLabel.interval`属性为`0`来解决。这样设置后,横坐标上的所有标签都会显示,而不会根据自动计算的间隔来显示部分标签。文章提供了问题的具体示例图片和解决方法,并附有官方文档链接。
113 4
Echarts中横坐标文字显示不全
|
2月前
|
JavaScript API
Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式
通过上述方法,我们便能够在ECharts中根据数据的正负为每个图例项设置不同的样式,增强了图表的可读性和表现力。这种方法虽然略显间接,但不失为一种灵活的解决方案。
249 2
|
2月前
|
算法 搜索推荐 Java
java 后端 使用 Graphics2D 制作海报,画echarts图,带工具类,各种细节:如头像切割成圆形,文字换行算法(完美实验success),解决画上文字、图片后不清晰问题
这篇文章介绍了如何使用Java后端技术,结合Graphics2D和Echarts等工具,生成包含个性化信息和图表的海报,并提供了详细的代码实现和GitHub项目链接。
156 0
java 后端 使用 Graphics2D 制作海报,画echarts图,带工具类,各种细节:如头像切割成圆形,文字换行算法(完美实验success),解决画上文字、图片后不清晰问题
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
|
7月前
|
数据可视化 前端开发 定位技术
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
158 0
|
7月前
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
622 0
|
7月前
|
JavaScript 数据可视化 前端开发
ECharts 的配置语法:配置选项、数据格式、样式设置
ECharts 的配置语法:配置选项、数据格式、样式设置
530 1
echarts设置多条折线不是你想的那样简单
echarts设置多条折线不是你想的那样简单
echarts去掉y轴线、设置x轴线的颜色、x轴文字颜色
echarts去掉y轴线、设置x轴线的颜色、x轴文字颜色