echarts图表标签(axisLabel)折行
在项目中遇到了一个echarts图表标签过长需折行的需求,so引出这篇总结,啦啦啦有帮助就多多支持啦,撒花撒花撒花~~~~
在此不对echarts其他用法做解释,详细见echarts文档(点击前往)
附:此文章效果图
标注:
yAxis.axisLabel.formatter 回调函数 实现标签过长的换行处理 通过设置provideNumber,控制每行显示的字数 格式如下: yAxis: {//其余属性在此省略
axisLabel:{
interval: 0,//标签设置为全部显示
formatter : function(params){
//在此写入折行函数
}
}
}
/*
折行函数
*/
function(params){
var newParamsName = "";// 最终拼接成的字符串
var paramsNameNumber = params.length;// 实际标签的个数
var provideNumber = 2;// 每行能显示的字的个数
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 计算行数,向上取整
//判断是否需要换行
if (paramsNameNumber > provideNumber) {
//循环得到每行的显示内容,p代表行
for (var p = 0; p < rowNumber; p++) {
var tempStr = "";// 表示每一次截取的字符串
var start = p * provideNumber;// 开始截取的位置
var end = start + provideNumber;// 结束截取的位置
if (p == rowNumber - 1) {
// 最后一次不换行
tempStr = params.substring(start, paramsNameNumber);
} else {
// 每一次拼接字符串并换行
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;// 最终拼成的字符串
}
} else {
// 将旧标签的值赋给新标签
newParamsName = params;
}
return newParamsName
}
我默默的认为自己的排版实在太丑,but望大家凑合欣赏吧。
如果疑问欢迎联系,留言评论。
>>>>>>>>>>
echarts图表标签(axisLabel)折行的更多相关文章
- 提示标签title折行
使用代码换行共两种代码,均可实现html标签内title内容显示时换行.换行代码符分别为:“ ”和“ ”以上符合数字输入均必须英文半角模式输入.使用时候,在需要换行地方任选一种(组)换行符号代码即可.
- p标签不折行的问题
问题描述: 一个固定宽度的div里面包了一个p元素,由于p元素中的文字比较长并且没有换行,最终看到的效果就是p中的 文字“跑”了出来. 问题复现: <div style="width: ...
- Vue自定义标签页,并且在其中渲染Echarts图表
目录 一.需求说明 二.标签页功能实现 一.需求说明 1.点击标签按钮切换不同的echarts图表,考虑用Ant Design Vue,但是其样式无法自定义 2.div的整体布局样式使用tailwin ...
- echarts之bootstrap选项卡不能显示其他标签echarts图表
在echarts跟bootstrap选项卡整合的时候,默认第一个选中选项卡可以正常加载echarts图表,但是切换其他选项的时候不能渲染出其他选项卡echarts图表. 解决方法: 在js中添加代码: ...
- ECharts图表中级入门之formatter:夜谈关于ECharts图表内的数据格式化方法
来源于:http://www.ithao123.cn/content-3751220.html 格式化之所以存在,主要是因为我们想把一些不够人性化的内容通过某种处理让其变得人性化,便于用户更好地理解内 ...
- Echarts图表常用功能配置,Demo示例
先看下效果图: 就如上图所示,都是些常用的基本配置. Legend分页,X轴设置,Y轴设置,底部缩放条设置, 数值显示样式设置,工具箱设置,自定义工具按钮, 绑定点击事件等等.这些配置代码中都做了简单 ...
- echarts图表x,y轴的设置
https://www.cnblogs.com/cjh-strive/p/11065005.html xAxis属性代表echarts图表的x轴设置代码如下 xAxis : [ { type : 'c ...
- echarts图表X轴文字过长解决解决方案:根据文字长度自动旋转
Echarts 标签中文本内容太长的时候怎么办 ? 关于这个问题搜索一下,有很多解决方案.无非就是 省略(间隔显示).旋转文字方向.竖排展示 前面两种解决方案,就是echarts暴露的: { ax ...
- ***ECharts图表入门和最佳实践
ECharts数据图表系统? 5分钟上手! [ECharts简介] ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动, ...
随机推荐
- μC/OS-Ⅲ系统中的任务种类及基本状态
在μC/OS-Ⅲ系统中,任务自身一共有五种状态. 1.休眠态 调用函数OSTaskCreate()创建任务后,任务就可以接受μC/OS-Ⅲ的管理.处于休眠态的任务代码实际上已经写入代码空间中了,但是μ ...
- 怎么将Android studio 的“ build:gradle改低一点”
参考来源:http://bbs.qcloud.com/thread-17193-1-1.html Error:Execution failed for task ':xxxx:compileDebug ...
- 使用Word发表博客
使用浏览器编辑博客,会让你感到非常不方便,如果在没有网络的时候,就不能打开编辑器页面了,只能先写在word或其他编辑软件中.可以设置word使用word编辑并直接发布到博客. 文件 - 新 ...
- Paths_Quartz2D
Paths中的几个重要元素 Points void CGContextMoveToPoint ( CGContextRef c, CGFloat x, CGFloat y ); 指定 ...
- Linux学习 : 裸板调试 之 配置UART
1.UART原理说明 发送数据时,CPU将并行数据写入UART,UART按照一定的格式在一根电线上串行发出:接收数据时,UART检测另一根电线上的信号,串行收集然后放在缓冲区中,CPU即可读取UART ...
- SQL Server中cursor的使用步骤
参考文章: http://www.cnblogs.com/knowledgesea/p/3699851.html http://www.cnblogs.com/moss_tan_jun/archive ...
- JavaScript之全局变量和隐式全局变量
通过var创建的全局变量(任何函数之外的程序中创建)是不能被删除的. 无var创建的隐式全局变量(无视是否在函数中创建)是能被删除的.
- Google Authentication 机制原理
Google Authenticator,谷歌身份认证器,Google公司推出的一款动态口令工具,旨在解决大家Google账户遭到恶意攻击的问题.该工具主要基于TOTP(Time-Based One- ...
- Session阻塞 读写锁引发的小问题
引子 我们来看两个ajax方法,先后的问题,会有什么样的结果? Javascript: $(function () { //第一个 $.ajax({ type: "POST&qu ...
- Spark源码学习1.3——TaskSetManager.scala
TaskSetManager.scala TaskSet是指一系列被提交的task,一般是代表特定的stage中丢失的partition.TaskSetManager通过一个TaskScheduler ...