使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行
使用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的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行的更多相关文章
- Excel画的图复制到Word中变形的解决办法
在Excel里画好了图,复制到Word里面经常会变形变的一塌糊涂,面目全非,实在是不理解微软为什么要把自己家的软件搞成这样. 要想保持形状不变,需要这样做: 1. 在Excel里面复制图形,和往常一样 ...
- (转)使用SDWebImage和YYImage下载高分辨率图,导致内存暴增的解决办法
http://blog.csdn.net/guojiezhi/article/details/52033796
- 手动撸个Android雷达图(蜘蛛网图)RadarView
公司产品需要一个雷达图来展示各维度的比重,网上找了一波,学到不少,直接自己上手来撸一记 无图言虚空 简单分析一波,确定雷达图正几边形的--正五边形 int count=5,分为几个层数--4 层 in ...
- echarts 雷达图的个性化设置
echarts 雷达图的个性化设置 function test() { let myChart = echarts.init(document.getElementById('levelImage') ...
- WPF DevExpress 设置雷达图Radar样式
DevExpress中定义的ChartControl很不错,很多项目直接使用这种控件. 本节讲述雷达图的样式设置 <Grid> <Grid.Resources> <D ...
- Chart.js中文文档-雷达图
雷达图或蛛网图(Radar chart) 简介 A radar chart is a way of showing multiple data points and the variation bet ...
- 在Excel中制作雷达图
雷达图的作用 雷达图是专门用来进行多指标体系比较分析的专业图表.从雷达图中可以看出指标的实际值与参照值的偏离程度,从而为分析者提供有益的信息.雷达图一般用于成绩展示.效果对比量化.多维数据对比等等,只 ...
- [2014.01.27]wfRadar 雷达图组件 2.5
全新开发的雷达图组件--wfRadar,使用简单,功能强大,图像处理效果极佳. 组件支持多种图片格式,包括bmp,jpg,gif,wmf,emf,ico,png,pcx,tif,tga,pcx,dcx ...
- 数据可视化:Echart中k图实现动态阈值报警及实时更新数据
1 目标 使用Echart的k图展现上下阈值,并且当真实值超过上阈值或低于下阈值时候,标红报警. 2 实现效果 如下:
随机推荐
- Bitmap到底占多少内存
转至:Android 开发绕不过的坑:你的 Bitmap 究竟占多大内存? Bugly 技术干货系列内容主要涉及移动开发方向,是由 Bugly 邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟 ...
- 【Oracle】查看被锁的表和解锁
--以下几个为相关表SELECT * FROM v$lock;SELECT * FROM v$sqlarea;SELECT * FROM v$session;SELECT * FROM v$proce ...
- DRAM(动态)存储器
一.DRAM的存储元电路 常见的DRAM存储元电路有四管式和单管式两种,它们的共同特点是靠电容存储电荷的原理来存储信息.电容上存有足够多的电荷表示“1”,电容上无电荷表示“0”. 由于电容存储的电荷会 ...
- 使用普通用户set autotrace on报错SP2-0618: Cannot find the Session Identifier
普通用户使用 autotrace,出现如下报错: SQL> set autotrace on SP2-0618: Cannot find the Session Identifier. Che ...
- January 03 2017 Week 1st Tuesday
It is always morning somewhere in the world. 世界上总是有一个地方可以看到阳光. There may be always someone who can e ...
- python 网络编程 -- Tcp协议
Socket是网络编程的一个抽象概念.通常我们用一个Socket表示“打开了一个网络链接”,而打开一个Socket需要知道目标计算机的IP地址和端口号,再指定协议类型即可. 客户端 大多数连接都是可靠 ...
- 5、Node.js 回调函数
内容:回调函数:阻塞/同步.非阻塞.和异步区别:阻塞和非阻塞代码实例 Node.js 回调函数Node.js 异步编程的直接体现就是回调.异步编程依托于回调来实现,但不能说使用了回调后程序就异步化了. ...
- Java虚拟机10:Client模式和Server模式的区别
部分商用虚拟机中,Java程序最初是通过解释器对.class文件进行解释执行的,当虚拟机发现某个方法或代码块运行地特别频繁的时候,就会把这些代码认定为热点代码Hot Spot Code(这也是我们使用 ...
- 【[IOI2014]Wall 砖墙】
好像随便一卡就最优解了 malao告诉我这道题挺不错的,于是就去写了写 这两个操作很有灵性啊,感觉这么有特点的数大概是需要分块维护的吧 但是并没有什么区间查询,只是在最后输出整个序列 于是我们就直接用 ...
- Python中的类(一)
Python中的类(一) 一. 应用场景 如果多个函数中有一些相同的参数时,转换成面向对象. 二. 如何创建类 类是用来描述具有相同的属性和方法的对象的集合.它定义了该集合中每个对象所共有的属性和方法 ...