echarts图表里label文字过长换行的方法
在做一些图标时,有时会出现显示文字过长的问题,需要将其按照指定的字数换行,像下图这样

而echarts没有提供换行的方法,但是可以使用fomatter方法进行设置,代码如下
formatter: function(val) {
var strs = val.split(''); //字符串数组
var str = ''
for(var i = 0, s; s = strs[i++];) { //遍历字符串数组
str += s;
if(!(i % 2)) str += '\n'; //按需要求余
}
return str
}
成功! 此方法可以用在任何支持fomatter方法的设置里

echarts图表里label文字过长换行的方法的更多相关文章
- css 样式 文字过长 换行处理方法
css强制换行.强制不换行及自动换行的写法 css强制不换行 div{white-space:nowrap;} css自动换行 div{ word-wrap: break-word; word-bre ...
- echarts图表X轴文字过长解决解决方案:根据文字长度自动旋转
Echarts 标签中文本内容太长的时候怎么办 ? 关于这个问题搜索一下,有很多解决方案.无非就是 省略(间隔显示).旋转文字方向.竖排展示 前面两种解决方案,就是echarts暴露的: { ax ...
- 关于dl dt dd 文字过长换行在移动端显示对齐的探讨总结
关于dl dt dd 文字过长换行在移动端显示对齐的探讨总结 <dl> <dt>抵押房产:</dt> <dd>1.北京市大兴区兴华大街丽园小区3单大兴 ...
- 关于echarts中的饼状图的label文字显示过长的问题
label: { normal: { fontSize: 14, formatter(v) { let text = v.name let count = text.indexOf('¥') cons ...
- 解决echarts中X轴文字过长的问题。【转】
axisLabel: { interval: , formatter:function(value) { debugger var ret = "";//拼接加\n返回的类目项 ; ...
- echarts统计图Y轴(或X轴)文字过长问题解决
echarts 统计图Y轴文字过长 在使用echarts时,出现数值非常大,Y轴又显示不下的情况就需要压缩Y轴数值刻度. 解决方法: yAxis: { type: 'value', axisLabel ...
- echarts2 饼图处理标签文字过长使之达到指定字数换行的目的
在使用echarts2的过程中,有时会遇到标签文字过长导致显示不完整的问题.例如: 这时候就需要用到 标签里的formatter 回调函数来处理这种情况了. 方式一: formatter : ' { ...
- Echarts中axislabel文字过长导致显示不全或重叠
最近在使用Echarts的时候,遇到点问题就是xAxis文字过长导致x轴的文字显示不全. 解决方案如下: 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HT ...
- 关于IOS中safari下的select下拉菜单,文字过长不换行的问题
今天遇到下图这种问题,文字过长,显示不全.折腾了老半天,在网上搜了半天也找不到解决方案. 于是问了下同事,同事提到了<optgroup>,这个标签厉害. <optgroup> ...
随机推荐
- nginx搭建rtmp协议流媒体服务器总结
最近在 ubuntu12.04+wdlinux(centos)上搭建了一个rtmp服务器,感觉还挺麻烦的,所以记录下. 大部分都是参考网络上的资料. 前提: 在linux下某个目录中新建一个nginx ...
- 关于python中的dir函数
dir函数用于查看python对象的属性,如果所查看的python对象已经定义了__dir__方法,则使用dir会返回定义的__dir__方法的返回值.如果没有定义__dir__方法,则会从__dic ...
- IDLE3.6.3 Mac版不支持中文输入解决办法
最近安装了IDLE 3.6.3版本 但是在IDLE中要输入中文注释时发现虽然输入法切换到了中文,但输入的还是英文.然后我在IDLE外试了下,输入中文没问题,于是就确认应该是IDLE的问题. 网上查询到 ...
- 使用svn 的解决 处理svn状态冲突
当直接只用版本浏览器进行svn的删除操作是,在客户端svn目录里,出现svn版本错误信息提示,使用 svn 解决命令,处理冲突保存 svn resolve --accept=working PATH( ...
- 【JDK1.8】JDK1.8集合源码阅读——LinkedList
一.前言 这次我们来看一下常见的List中的第二个--LinkedList,在前面分析ArrayList的时候,我们提到,LinkedList是链表的结构,其实它跟我们在分析map的时候讲到的Link ...
- Java使用RSA加密算法对内容进行加密
什么是RSA加密算法 RSA是一种典型的非对称性加密算法,具体介绍可参考阮一峰的日志 RSA算法原理 下面是使用RSA算法对传输内容进行加密的一个简要Java案例,主要用到了三个类,大体实现如下: 对 ...
- Flask知识点二
一 模板 1.模板的使用 Flask使用的是Jinja2模板,所以其语法和Django无差别 2.自定义模板方法 Flask中自定义模板方法的方式和Bottle相似,创建一个函数并通过参数的形式传入 ...
- asp.net mvc 5 蛋疼的问题
看图,debugger显示匹配路径没有错. html开源码看 显示没有实现IController. 然而我的确实现了. 关闭vs 重启
- islider结合react的简单实用
我用islider都是结合react来使用,主要运用在移动端,做首页轮播图,或者是手机图片预览,左右滑动 首先需要 npm install islider.js --save 让后在jsx文件头部引入 ...
- zz:linux下rz,sz的安装方法
zz:http://xukaizijian.blog.163.com/blog/static/1704331192011611104631875/ wget http://ohse.de/uwe/re ...