使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行

前几天项目中有一个图表的是用echart生成的,遇到一个问题,就是在手机端显示的售时候,如果文字太长就会超出div,之前的效果如图所示:

后来查资料,发现这个标签的文字是可以自定义的,定义方式如下:

 1 formatter: function(text){
 2                             var strlength = text.length;
 3                             if(strlength % 2 == 1){
 4                                 text = text.replace(/\S{2}/g,function(match){
 5                                     console.log(match);
 6                                     return match + '\n'
 7                                 })
 8                             }else{
 9                                 text = text.replace(/\S{2}/g,function(match){
10                                     console.log(match);
11                                     return match + '\n'
12                                 })
13                                 strlength = text.length;
14                                 text = text.substring(0,strlength - 1);
15                             }
16                             return text
17                         },

完整配置如下:

 1 var option = {
 2                 title: {
 3                     text: ''
 4                 },
 5                 tooltip: {},
 6                 legend: {
 7                      x : 'right',
 8                      y : 'top',
 9                     data: ['测评结果', ]
10                 },
11                 radar: {
12                     // shape: 'circle',
13                     name: {
14                         textStyle: {
15                             color: '#fff',
16                             backgroundColor: '#999',
17                             borderRadius: 3,
18                             padding: [3, 5]
19                        },
20                         formatter: function(text){
21                             var strlength = text.length;
22                             if(strlength % 2 == 1){
23                                 text = text.replace(/\S{2}/g,function(match){
24                                     console.log(match);
25                                     return match + '\n'
26                                 })
27                             }else{
28                                 text = text.replace(/\S{2}/g,function(match){
29                                     console.log(match);
30                                     return match + '\n'
31                                 })
32                                 strlength = text.length;
33                                 text = text.substring(0,strlength - 1);
34                             }
35                             return text
36                         },
37                     },
38                     indicator: weidu
39                 },
40                 series: [{
41                     name: '测评结果',
42                     type: 'radar',
43                     // areaStyle: {normal: {}},
44                     data : [
45                         {
46                             value : fenshu,
47                             name : '测评结果'
48                         },
49                     ]
50                 }]
51             };

最后效果如下:

文字超过2个的会自动换行了

转载于:https://www.cnblogs.com/zizaiwuyou/p/10637179.html

使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行相关推荐

  1. Windows安装乌班图(Ubuntu)教程及错误解决办法

    前言: 自己在安装时候踩了很多坑,出现很多报错,系统也出现了很多次崩溃.以下总结一下自己的经验. 安装需要的东西: 1. 大于2G的u盘 2. windows电脑 3. ubuntu 系统安装镜像 ( ...

  2. 安装博图V15时出现缺少.net3.5sp1解决办法

    安装博图V15时出现缺少.net3.5sp1问题: 解决办法: win10系统,找到: 自动安装完成即可!

  3. 大屏---Echart之雷达图

    echart版本:5.4.0 当数据区域很小时,series.data.label会叠在一起,可以放到radar.axisName里面 axisName: { // 指示器名称配置项formatter ...

  4. Excel画的图复制到Word中变形的解决办法

    为什么80%的码农都做不了架构师?>>>    在Excel里画好了图,复制到Word里面经常会变形变的一塌糊涂,面目全非,实在是不理解微软为什么要把自己家的软件搞成这样. 要想保持 ...

  5. win10 开始菜单图标点击右键没反应终极解决办法--非修改注册表

    如果网上注册表的方法都尝试过以后均无反应的话...那就是应该是C:\Users\Administrator\AppData\路径下缺少什么文件了,什么优化软件给删除了; 我之前也遇到这个问题,网上基本 ...

  6. 设置echarts雷达图label标签出现的位置聚拢或发散

    目标效果: 用echarts画出雷达图后出现这样的情况 在官网上label标签的 position属性只支持:top / left / right / bottom / inside / inside ...

  7. 可视化实验十一:利用Python绘制气泡图、雷达图

    实验目的: 掌握Python中气泡图.雷达图绘图函数的使用及展示图形的意义 利用上述绘图函数实现数据可视化 实验内容: 练习python中气泡图.雷达图绘图函数的用法,掌握相关参数的概念 根据步骤一绘 ...

  8. Echart饼图-圆形图修改重新绘制

    首先看看默认效果: 代码如下: option = {tooltip: {trigger: 'item'},legend: {top: '5%',left: 'center'},series: [{na ...

  9. GTASA圣安地列斯大量高清贴图包导致游戏崩溃闪退的解决办法

    GTASA圣安地列斯大量高清贴图包导致游戏崩溃闪退的解决办法 记录博文 情况说明 在安装了很多不同的 HD 纹理包之后(例如美化包)&驾驶或飞行了大约10分钟,游戏导致崩溃.不管用啥 stre ...

最新文章

  1. PyTorch Upsample() 函数实现上采样
  2. 用html制作3d相册_运动眼镜原型可以用全彩3D打印来制作啦!
  3. 解决MySQL删除外键时报错Error Code: 1091. Can‘t DROP ‘XXX‘; check that column/key exists
  4. 两个线程同时从服务器接收消息_一文看懂I/O多路复用技术(mysql线程池)
  5. Java中使用JNA实现全局监听Linux键盘事件
  6. ps导出gif颜色不对_PS の手绘《超详细的动态表情包新手绘制指南》
  7. python表达式3and5_python3 中 and 和 or 运算规律
  8. Java 多线程详解(三)------线程的同步
  9. 西门子界面官方精美触摸屏+WINCC程序模板 西门子官方触摸屏程序模板,炫酷的扁平式动画效果
  10. JPA(hibernate)一对多根据多的一方某属性进行过滤查询
  11. 学完了Hadoop,我总结了这些重点
  12. Work20230407
  13. word里显示的这个向下箭头是什么意思
  14. 使用tinymce编辑器从word保持原格式复制粘贴的办法
  15. Android获取设备内存数据信息
  16. 我国超级计算机型号,中国成功研制千万亿次超级计算机天河一号
  17. xt6使用技巧_六人花(zuo)样(si)出行指南,教你用各种姿势解锁XT6
  18. 后一个数 减 前一个数 形成新列表
  19. 【小贴士】合肥工业大学计科与物联网本科毕业设计“外文翻译”tips
  20. 使用GameBench进行android性能测试

热门文章

  1. 【AI白身境】学AI必备的python基础
  2. 传统外贸不好做,为什么不来做跨境电商?
  3. 统计每日单量MySQL语句
  4. 数据库文档生成数据库脚本工具
  5. PHP获取IP地址所在的地理位置
  6. Codeforces 468C/469E 易错点
  7. 春节书单:优秀的产品经理们都在读什么?
  8. PMCAFF产品经理与融资7500万的故事
  9. 比iPhone8更重要的新App Store,给内容产品的未来指出明路
  10. PMCAFF | 为什么我们必须关注95后市场?