使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行
使用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的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行相关推荐
- Windows安装乌班图(Ubuntu)教程及错误解决办法
前言: 自己在安装时候踩了很多坑,出现很多报错,系统也出现了很多次崩溃.以下总结一下自己的经验. 安装需要的东西: 1. 大于2G的u盘 2. windows电脑 3. ubuntu 系统安装镜像 ( ...
- 安装博图V15时出现缺少.net3.5sp1解决办法
安装博图V15时出现缺少.net3.5sp1问题: 解决办法: win10系统,找到: 自动安装完成即可!
- 大屏---Echart之雷达图
echart版本:5.4.0 当数据区域很小时,series.data.label会叠在一起,可以放到radar.axisName里面 axisName: { // 指示器名称配置项formatter ...
- Excel画的图复制到Word中变形的解决办法
为什么80%的码农都做不了架构师?>>> 在Excel里画好了图,复制到Word里面经常会变形变的一塌糊涂,面目全非,实在是不理解微软为什么要把自己家的软件搞成这样. 要想保持 ...
- win10 开始菜单图标点击右键没反应终极解决办法--非修改注册表
如果网上注册表的方法都尝试过以后均无反应的话...那就是应该是C:\Users\Administrator\AppData\路径下缺少什么文件了,什么优化软件给删除了; 我之前也遇到这个问题,网上基本 ...
- 设置echarts雷达图label标签出现的位置聚拢或发散
目标效果: 用echarts画出雷达图后出现这样的情况 在官网上label标签的 position属性只支持:top / left / right / bottom / inside / inside ...
- 可视化实验十一:利用Python绘制气泡图、雷达图
实验目的: 掌握Python中气泡图.雷达图绘图函数的使用及展示图形的意义 利用上述绘图函数实现数据可视化 实验内容: 练习python中气泡图.雷达图绘图函数的用法,掌握相关参数的概念 根据步骤一绘 ...
- Echart饼图-圆形图修改重新绘制
首先看看默认效果: 代码如下: option = {tooltip: {trigger: 'item'},legend: {top: '5%',left: 'center'},series: [{na ...
- GTASA圣安地列斯大量高清贴图包导致游戏崩溃闪退的解决办法
GTASA圣安地列斯大量高清贴图包导致游戏崩溃闪退的解决办法 记录博文 情况说明 在安装了很多不同的 HD 纹理包之后(例如美化包)&驾驶或飞行了大约10分钟,游戏导致崩溃.不管用啥 stre ...
最新文章
- PyTorch Upsample() 函数实现上采样
- 用html制作3d相册_运动眼镜原型可以用全彩3D打印来制作啦!
- 解决MySQL删除外键时报错Error Code: 1091. Can‘t DROP ‘XXX‘; check that column/key exists
- 两个线程同时从服务器接收消息_一文看懂I/O多路复用技术(mysql线程池)
- Java中使用JNA实现全局监听Linux键盘事件
- ps导出gif颜色不对_PS の手绘《超详细的动态表情包新手绘制指南》
- python表达式3and5_python3 中 and 和 or 运算规律
- Java 多线程详解(三)------线程的同步
- 西门子界面官方精美触摸屏+WINCC程序模板 西门子官方触摸屏程序模板,炫酷的扁平式动画效果
- JPA(hibernate)一对多根据多的一方某属性进行过滤查询
- 学完了Hadoop,我总结了这些重点
- Work20230407
- word里显示的这个向下箭头是什么意思
- 使用tinymce编辑器从word保持原格式复制粘贴的办法
- Android获取设备内存数据信息
- 我国超级计算机型号,中国成功研制千万亿次超级计算机天河一号
- xt6使用技巧_六人花(zuo)样(si)出行指南,教你用各种姿势解锁XT6
- 后一个数 减 前一个数 形成新列表
- 【小贴士】合肥工业大学计科与物联网本科毕业设计“外文翻译”tips
- 使用GameBench进行android性能测试