解决echarts中饼图标签重叠的问题
作者:有蝉 发布时间:2021-10-22 03:33:33
标签:echarts,饼图,标签,重叠
饼图中的series有个avoidLabelOverlap属性,
avoidLabelOverlap:是否启用防止标签重叠策略,默认开启,在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠。
当avoidLabelOverlap设置为false时会出现以下情况
改为true之后就不会重叠
代码如下
var option = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
//orient: "vertical",
x: "0%",
//y: "25%",
//y: "5%",
itemWidth: 14,
itemHeight: 14,
align: "left",
data: xData,
textStyle: {
color: "#fff"
}
},
series: [
{
name: "危险源状态",
type: "pie",
radius: ["25%", "45%"],
center: ["50%", "60%"],
avoidLabelOverlap: true,//对,就是这里avoidLabelOverlap
label: {
normal: {
show: true,
position: "center"
},
emphasis: {
show: true,
textStyle: {
fontSize: "12",
fontWeight: "bold"
}
}
},
labelLine: {
normal: {
show: true
}
},
data: pieData
}
]
};
补充知识:echarts柱状图轻松实现分别采用两个不同单位的y轴
echarts柱状图轻松实现分别采用两个不同单位的y轴:
秘籍:
代码
// 基于准备好的dom,初始化echarts实例
var colors = ['#0089FF','#B865DF',/*'#5ADF63','#FFDD00',*/'#224666', '#675bba'];
// 指定图表的配置项和数据
option = {
/*grid:{
y:'25%'},*/
color: colors,
/* title: {
text: '各医院指标对比情况',
left: 16,
textStyle: {
fontSize: 18,
color:'#0089FF'
}
},*/
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {
data:['组数','CMI'],
x:'80%'
},
xAxis: [
{
type: 'category',
data: arr,
axisPointer: {
type: 'shadow'
},
axisLine: {
show: true,
/* lineStyle: {
color: '#05edfc'
}*/
},
axisLabel: {
show: true,
/* color: '#fff',*/
fontSize: 12,
interval: 0,
formatter:function(value)
{
return value;
}
//fontWeight: 'bold'
}
},
],
yAxis: [
{
type: 'value',
name: '组数整体指标',
position: 'left',
splitLine:{show: true},
axisLine: {
show: false,
/* lineStyle: {
color: '#E7E7E7'
}*/
},
axisLabel: {
show:true,
showMinLabel:true,
showMaxLabel:true,
formatter: '{value}'
},
},
{
type: 'value',
name: 'CMI',
position: 'right',
splitLine:{show: true},
axisLine: {
show: false,
/* lineStyle: {
color: '#E7E7E7'
}*/
},
axisLabel: {
show:true,
showMinLabel:true,
showMaxLabel:true,
formatter: '{value}'
},
},
],
series: [
{
name:'组数',
type:'bar',
barWidth : 20,
data:arr2,
yAxisIndex: 0,
/* markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
}*/
},
{
name:'CMI',
type:'bar',
barWidth : 20,
data:arr3,
yAxisIndex: 1,
/* markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
}*/
}
]
};
来源:https://blog.csdn.net/qq_37899792/article/details/90747057
0
投稿
猜你喜欢
- 最近要做个从 pdf 文件中抽取文本内容的工具,大概查了一下 python 里可以使用 pdfminer 来实现。下面就看看怎样使用吧。PD
- 1.使用iloc对数据进行批量修改使用iloc最简单的就是将数据批量修改为某个特定的值以下是我随便写入的数据:现在将[‘
- Python 中的 timeit 模块可以用来测试一段代码的执行耗时,如一个变量赋值语句的执行时间,一个函数的运行时间等。timeit 模块
- 关于Tensor的数据类型说明1. 32位浮点型:torch.FloatTensora=torch.Tensor( [[2,3],[4,8]
- 看到豆瓣上有网友提了这个问题,看到回答的人不多,忍不住写了下面的内容。工作中最常用到的统计方法有哪些?根据我自己的经验给举些例子。1.通过一
- 〝 古人学问遗无力,少壮功夫老始成 〞python之tkinter库弹窗messagebox,常码字不易,出精品更难,没有特别幸运,那么请先
- 本站收集的js实现的同步动态显示当前日期,时间和星期几的代码,我经常用在自己做的企业网站的后台,方便嘛。效果可以看看本站的首页,呵呵!而且代
- HTTP头中一般断点下载时才用到Range和Content-Range实体头,Range用户请求头中,指定第一个字节的位置和最后一个字节的位
- 平时在写asp代码的时候有很多重复的内容要写,麻烦的要命,比如在收集表单提交的数据时,特别是表单的输入域比较多时,要不断写好多的reques
- 如何用我的国际域名做虚拟域名?config.asp<%Domain_URL = "intels.net&
- CPython implementation detail: 在 CPython 中,由于存在全局解释器锁, 同一时刻只
- 前言由于Django是 * 站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加明显,最简单解决方式是使用:缓存,1.
- 本文进通过实例,讲述通过 prototype 自定义方法的过程,旨在抛砖引玉,如果不对的地方,欢迎指正!prototype 是在 IE 4
- mysql是linux平台下最流行的数据库系统,今天介绍的是mysql的安装及简单的操作方法!groupadd mysql //建立mysq
- 这种方案是通过对代码进行加密,然后利用C语音写解密的PHP扩展。破解难度会有提升,但依然是会被破解的。 从网上找过各种代码加密的开源方案。
- QSS介绍前言QSS即Qt样式表,是用来自定义控件外观的一种机制,QSS大量参考了Css的内容,但QSS的功能要比Css弱得多,体现在选择器
- 本文实例讲述了python通过加号运算符操作列表的方法。分享给大家供大家参考。具体如下:li = ['a', 'b&
- 有时候我们在设计表单的时候不希望用户输入其它字符,只想他在input中输入数字,那么我们就可以使用下面的代码,当然这个比较是客户
- string操作在编程中具有极高的频率,那么string中有哪些有用的方法呢?使用strings直接操作Comparefunc Compar
- 我们可用ADO STREAM来做一个无组件的上传程序。Stream对象包含了许多操作二进制和文本文件的方法,我们现在用Stream对象来操作