echart 横轴 上下分开显示

代码:

复制代码
 1 xAxis: [
 2         {
 3             type: 'category',
 4             data:[],
 5             axisLabel: {  
 6                 interval: 0,  
 7                 formatter:function(value)  
 8                 {  
 9                     debugger  
10                     var ret = "";//拼接加\n返回的类目项  
11                     var maxLength = 2;//每项显示文字个数  
12                     var valLength = value.length;//X轴类目项的文字个数  
13                     var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
14                     if (rowN > 1)//如果类目项的文字大于3,  
15                     {  
16                         for (var i = 0; i < rowN; i++) {  
17                             var temp = "";//每次截取的字符串  
18                             var start = i * maxLength;//开始截取的位置  
19                             var end = start + maxLength;//结束截取的位置  
20                             //这里也可以加一个是否是最后一行的判断,但是不加也没有影响,那就不加吧  
21                             temp = value.substring(start, end) + "\n";  
22                             ret += temp; //凭借最终的字符串  
23                         }  
24                         return ret;  
25                     }  
26                     else {  
27                         return value;  
28                     }  
29                 }  
30             },
31         grid: {  
32                 left: '10%',  
33                 bottom:'35%'  
34         }
35 
36         }
37     ],
复制代码

示例图

 

posted @   博二爷  阅读(916)  评论(0编辑  收藏  举报
编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期(2025年3.1-3.9)
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
历史上的今天:
2019-01-31 阅读笔记-人月神话03
点击右上角即可分享
微信分享提示