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> ...
随机推荐
- C#打印杨辉三角
重主要的方法在于: 1.初始化二维数组 2.边界赋值 3.中心值赋值 4.输出 <pre name="code" class="csharp"> c ...
- JPA的基本使用
前提: 创建一个springboot项目 创建一个名为springboottest的MySQL数据库 1 jar包准备 jpa的jar包 mysql驱动的jar包 druid数据库连接池的jar包 l ...
- iptables 命令详解
转载:http://blog.chinaunix.net/uid-26495963-id-3279216.html 一:前言 防火墙,其实说白了讲,就是用于实现Linux下访问控制的功能的,它分为硬件 ...
- asp.net core 2.0+sqlsugar搭建个人网站系列(0)
一些废话 马上就要过年了,回顾这一年最大的收获就是技术有了很大的提升,其他的方面没有什么改变,现在还是单身小屌丝一枚. 这一年来学习的主要重点就是asp.net core,中间也使用 core+EF做 ...
- ioutil包二
ioutil包二 (原创随笔,转载请注明出处 http://www.cnblogs.com/majianguo/p/8016426.html) ioutil包实现了一些I/O实用功能,导出了7个函数和 ...
- Webpack 2 视频教程 011 - Webpack2 中加载 CSS 的相关配置与实战
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
- nginx+apache前后台搭配使用
nginx apache都是web服务器 但是nginx更轻型对静态处理强大,而且nginx也是反向代理服务器,可以作转发 apache比较重型,非常稳定,处理动态WEB程序非常好,但是对静态处理就比 ...
- Perl 中 `cmd` 和system"cmd"的区别
在perl中,调用系统命令有两种形势,`cmd` 和system"cmd",他们主要的区别是`cmd`会获取返回结果,而system"cmd"会直接将结果输出到 ...
- mongodb 的基本函数语法封装
//这个模块里面封装了所有对数据库的常用操作 var MongoClient = require('mongodb').MongoClient; var config = require(" ...
- inline-block元素间留白现象探究
现象说明 最近在项目发布的时候遇到了一个奇怪的问题,在项目使用gulp打包压缩后发现之前一些行内元素间的空白消失了,导致页面中一些布局出现了问题 正常样式如下: 最开始出现这个问题的时候以为是g ...