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

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

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

 formatter: function(text){
var strlength = text.length;
if(strlength % 2 == 1){
text = text.replace(/\S{2}/g,function(match){
console.log(match);
return match + '\n'
})
}else{
text = text.replace(/\S{2}/g,function(match){
console.log(match);
return match + '\n'
})
strlength = text.length;
text = text.substring(0,strlength - 1);
}
return text
},

完整配置如下:

 var option = {
title: {
text: ''
},
tooltip: {},
legend: {
x : 'right',
y : 'top',
data: ['测评结果', ]
},
radar: {
// shape: 'circle',
name: {
textStyle: {
color: '#fff',
backgroundColor: '#999',
borderRadius: 3,
padding: [3, 5]
},
formatter: function(text){
var strlength = text.length;
if(strlength % 2 == 1){
text = text.replace(/\S{2}/g,function(match){
console.log(match);
return match + '\n'
})
}else{
text = text.replace(/\S{2}/g,function(match){
console.log(match);
return match + '\n'
})
strlength = text.length;
text = text.substring(0,strlength - 1);
}
return text
},
},
indicator: weidu
},
series: [{
name: '测评结果',
type: 'radar',
// areaStyle: {normal: {}},
data : [
{
value : fenshu,
name : '测评结果'
},
]
}]
};

最后效果如下:

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

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

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

    在Excel里画好了图,复制到Word里面经常会变形变的一塌糊涂,面目全非,实在是不理解微软为什么要把自己家的软件搞成这样. 要想保持形状不变,需要这样做: 1. 在Excel里面复制图形,和往常一样 ...

  2. (转)使用SDWebImage和YYImage下载高分辨率图,导致内存暴增的解决办法

    http://blog.csdn.net/guojiezhi/article/details/52033796

  3. 手动撸个Android雷达图(蜘蛛网图)RadarView

    公司产品需要一个雷达图来展示各维度的比重,网上找了一波,学到不少,直接自己上手来撸一记 无图言虚空 简单分析一波,确定雷达图正几边形的--正五边形 int count=5,分为几个层数--4 层 in ...

  4. echarts 雷达图的个性化设置

    echarts 雷达图的个性化设置 function test() { let myChart = echarts.init(document.getElementById('levelImage') ...

  5. WPF DevExpress 设置雷达图Radar样式

      DevExpress中定义的ChartControl很不错,很多项目直接使用这种控件. 本节讲述雷达图的样式设置 <Grid> <Grid.Resources> <D ...

  6. Chart.js中文文档-雷达图

    雷达图或蛛网图(Radar chart) 简介 A radar chart is a way of showing multiple data points and the variation bet ...

  7. 在Excel中制作雷达图

    雷达图的作用 雷达图是专门用来进行多指标体系比较分析的专业图表.从雷达图中可以看出指标的实际值与参照值的偏离程度,从而为分析者提供有益的信息.雷达图一般用于成绩展示.效果对比量化.多维数据对比等等,只 ...

  8. [2014.01.27]wfRadar 雷达图组件 2.5

    全新开发的雷达图组件--wfRadar,使用简单,功能强大,图像处理效果极佳. 组件支持多种图片格式,包括bmp,jpg,gif,wmf,emf,ico,png,pcx,tif,tga,pcx,dcx ...

  9. 数据可视化:Echart中k图实现动态阈值报警及实时更新数据

    1 目标 使用Echart的k图展现上下阈值,并且当真实值超过上阈值或低于下阈值时候,标红报警. 2 实现效果 如下:

随机推荐

  1. Bitmap到底占多少内存

    转至:Android 开发绕不过的坑:你的 Bitmap 究竟占多大内存? Bugly 技术干货系列内容主要涉及移动开发方向,是由 Bugly 邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟 ...

  2. 【Oracle】查看被锁的表和解锁

    --以下几个为相关表SELECT * FROM v$lock;SELECT * FROM v$sqlarea;SELECT * FROM v$session;SELECT * FROM v$proce ...

  3. DRAM(动态)存储器

    一.DRAM的存储元电路 常见的DRAM存储元电路有四管式和单管式两种,它们的共同特点是靠电容存储电荷的原理来存储信息.电容上存有足够多的电荷表示“1”,电容上无电荷表示“0”. 由于电容存储的电荷会 ...

  4. 使用普通用户set autotrace on报错SP2-0618: Cannot find the Session Identifier

    普通用户使用 autotrace,出现如下报错: SQL> set autotrace on SP2-0618: Cannot find the Session Identifier.  Che ...

  5. January 03 2017 Week 1st Tuesday

    It is always morning somewhere in the world. 世界上总是有一个地方可以看到阳光. There may be always someone who can e ...

  6. python 网络编程 -- Tcp协议

    Socket是网络编程的一个抽象概念.通常我们用一个Socket表示“打开了一个网络链接”,而打开一个Socket需要知道目标计算机的IP地址和端口号,再指定协议类型即可. 客户端 大多数连接都是可靠 ...

  7. 5、Node.js 回调函数

    内容:回调函数:阻塞/同步.非阻塞.和异步区别:阻塞和非阻塞代码实例 Node.js 回调函数Node.js 异步编程的直接体现就是回调.异步编程依托于回调来实现,但不能说使用了回调后程序就异步化了. ...

  8. Java虚拟机10:Client模式和Server模式的区别

    部分商用虚拟机中,Java程序最初是通过解释器对.class文件进行解释执行的,当虚拟机发现某个方法或代码块运行地特别频繁的时候,就会把这些代码认定为热点代码Hot Spot Code(这也是我们使用 ...

  9. 【[IOI2014]Wall 砖墙】

    好像随便一卡就最优解了 malao告诉我这道题挺不错的,于是就去写了写 这两个操作很有灵性啊,感觉这么有特点的数大概是需要分块维护的吧 但是并没有什么区间查询,只是在最后输出整个序列 于是我们就直接用 ...

  10. Python中的类(一)

    Python中的类(一) 一. 应用场景 如果多个函数中有一些相同的参数时,转换成面向对象. 二. 如何创建类 类是用来描述具有相同的属性和方法的对象的集合.它定义了该集合中每个对象所共有的属性和方法 ...