第三方工具 - echarts中 设置x||y轴文案、提示文字等为固定字数，超出显示"..."
起初看到这种需求的时候，我是这个状态
对，我是拒绝的，人家echats画出来就是一个canvas，你让我怎么加...
但是，作为一个“有点追求的”前端，我得想招试试
总结下来，唯一的突破点就是echarts的配置了。
echarts配置项网址：http://echarts.baidu.com/option.html
最后果然被我找到了
一、先说x||y轴的文案处理：
如图，x轴的配置也就都在这里了
而关于x轴文案的设置，就是这个axisLabel属性了
而跟内容有关的也就是这个formatter了，他有一个强大的回调函数，其参数value就是轴上显示的文案，
用这个万能的回调函数，还怕什么刁钻的效果是做不出来的！
于是，一顿操作效果就出来了
代码如下：
axisLabel :
{
formatter : function (value)
{
let valueTxt = '';
if (value.length > 3) {
valueTxt = value.substring(0, 4) + '...';
}
else {
valueTxt = value;
}
return valueTxt ;
}
}
二、图表上提示文案加“...”
后来，饼图的数据提示文案也要求这个设置，这次我不慌了。
依照这个思路，我就去饼图配置项中找答案去了；
同理，负责显示文案的是label这个属性，那么提示内容肯定也是归他管的！
果然，让我找到了，这个强大的formatter！
他也有强大的回调函数，返回的参数更是多！
其中，参数params的name属性就是要显示的文案
所以同理又是一段操作，效果也出来了：
代码如下：
label :
{
normal :
{
show : true, position : 'inner',
formatter : function (params)
{
console.log(params) let newName = '';
if (params.name.length > 5) {
newName = params.name.substring(0, 5) + '...';
}
else {
newName = params.name;
}
return newName;
}
}
},
总结，依照这个思路，以后想要对提示文案啥的做任何"非人类"的创意设置，都是可以的了！
+1+1+1 ^_^
声明：
请尊重博客园原创精神，转载或使用图片请注明：
博主：xing.org1^
出处：http://www.cnblogs.com/padding1015/
第三方工具 - echarts中 设置x||y轴文案、提示文字等为固定字数，超出显示"..."的更多相关文章
- highchart 设置双Y轴坐标 双x轴坐标方法
我们的图表一旦引入了两种不同单位或者数量级相差很大的数据以后,这时候需要两种坐标对其进行计量. 下面以设置双Y轴为例, y轴坐标的参数设置成: yAxis: [{ title: { text: '坐标 ...
- echarts图表x，y轴的设置
https://www.cnblogs.com/cjh-strive/p/11065005.html xAxis属性代表echarts图表的x轴设置代码如下 xAxis : [ { type : 'c ...
- Winform中自定义添加ZedGraph右键实现设置所有Y轴刻度的上下限
场景 Winforn中实现ZedGraph自定义添加右键菜单项(附源码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...
- 关于echarts中的饼状图的label文字显示过长的问题
label: { normal: { fontSize: 14, formatter(v) { let text = v.name let count = text.indexOf('￥') cons ...
- Winform中设置ZedGraph多条Y轴时坐标轴左右显示设置
场景 Winform中实现ZedGraph的多条Y轴(附源码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1001322 ...
- echarts Y轴名称显示不全（转载）
转载来源:https://blog.csdn.net/qq8241994/article/details/90720657今天在项目的开发中遇到的一个问题,echarts Y轴左侧的文字太多了,显示不 ...
- echarts 中 柱图 、折线图、柱图层叠
app.title = '折柱混合'; option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: ...
- Flash图表控件FusionCharts自定义图表y轴最大/最小值
自定义图表y轴的最大值和最小值 用户可以使用FusionCharts图表中<chart>元素的yAxisMaxValue和yAxisMinValue属性设置图表限制. 示例: <ch ...
- fusioncharts Y轴不显示中文的解决方法（转载）
使用fusionChart主要是被其界面吸引了,各类图表都很好看,下载以后文档也很周全,支持的语言也很多种 ,容易上手.fusionChart工作原理主要是通过后台传xml数据源给报表前台flash ...
随机推荐
- dfs练习
不给提示,练习. 题意: 蒜头的数学实在是太差了,于是老师把他关到小黑屋让他闭门修炼.老师跟他一张纸,上面一排写着1, 2, 3...N这N个数,中间用空白分隔.老师让他在空白处填上加号或者减号.他让 ...
- java8在Collection中新增加的方法removeIf
记得我在以前找工作的经历中,遇到过一个面试官问过我一个很基础的问题.问题是:有一个List中有10个元素,我现在想从中删除3个元素,请问怎么做?我当时也没想,就直接说,List的有自带的remove方 ...
- js数据类型的判断方法
判断js中的数据类型有一下几种方法:typeof.instanceof. constructor. prototype. $.type()/jquery.type(),接下来主要比较一下这几种方法的异 ...
- 胖虎都看得懂的CSS入门
CSS入门 CSS是什么 摘自维基百科 层叠样式表(英语:Cascading Style Sheets,简写CSS),又称串样式列表.级联样式表.串接样式表.层叠样式表.階層式樣式表,一种用来为结构化 ...
- 基于全志H3芯片的ARM开发环境搭建
基于全志H3芯片的ARM开发环境搭建 最近买了个友善之臂的NanoPi M1板子,又在网上申请了个NanoPi NEO板子,这两个都是基于全志H3芯片的Crotex-A7四核ARM开发板,两个板子可以 ...
- mongodb一些使用技巧或注意事项记录
1.有的时候需要删除指定字段那一列,使用update操作.例如要删除name这一列: query json: {"name":{$exists:true}} update jso ...
- CSS3之background-origin
1.属性简介 background-origin:border|content|padding|!important border:从border区域开始显示背景: content:从content区 ...
- 新工具︱微软Microsoft Visual Studio的R语言模块下载试用Ing...（尝鲜）
笔者:前几天看到了以下的图片,着实一惊.作为R语言入门小菜鸟,还是觉得很好看,于是花了一点时间下载下来试用了一下,觉得还是挺高大上的. 就是英文不好是硬伤.下面贴给小白,我当时的下载步骤与遇见的问题. ...
- Unhandled event loop exception Java heap space
1 错误描述 2 错误原因 3 解决办法
- 前端框架Vue入门
1.Vue简介 Vue是一套构建用户界面的渐进性框架.Vue采用自底向上增量开发的设计,其关注点在图层,与angular的区别就在这里,它关注的是图层,而angular注释的是数据. 2.与React ...