解决echarts中饼图标签重叠的问题
作者:有蝉 时间:2021-10-22 03:33:33
饼图中的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
标签:echarts,饼图,标签,重叠
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
oracle数据库冷备份的方法
2023-07-19 09:51:19
Python查询IP地址归属完整代码
2022-10-18 16:39:07
django自带的server 让外网主机访问方法
2023-06-03 22:59:50
PJBlog3优化——单击自动输入验证码
2009-05-17 11:03:00
ORACLE 如何查询被锁定表及如何解锁释放session
2023-07-02 11:59:39
再谈 Web 字体的现状与未来[译]
2009-11-24 13:55:00
![](https://img.aspxhome.com/file/UploadPic/200911/24/webfonts_example-thumb-640xauto-7429-10s.png)
python如何让类支持比较运算
2022-07-07 13:02:52
走中国特色的网站重构道路
2010-04-08 16:10:00
python求pi的方法
2023-04-04 06:49:17
VBScript中变量作用域
2007-11-02 10:03:00
php下防止单引号,双引号在接受页面转义的设置方法
2023-11-15 02:37:01
运行SQL Server的计算机间移动数据库
2009-01-20 13:07:00
比较详细PHP生成静态页面教程
2023-10-14 18:54:31
XML入门的常见问题(二)
2008-09-05 17:20:00
pandas || df.dropna() 缺失值删除操作
2023-07-10 06:51:06
Python多线程编程(八):使用Event实现线程间通信
2023-05-07 15:25:50
python time.strptime格式化实例详解
2022-03-25 19:13:02
15行Python代码实现免费发送手机短信推送消息功能
2023-11-01 10:20:51
![](https://img.aspxhome.com/file/2023/7/97187_0s.jpg)
精心整理总结的Python自动化测试面试题
2022-07-27 08:13:00
![](https://img.aspxhome.com/file/2023/4/91934_0s.png)
必须知道的10个不常用HTML标签[译]
2009-03-31 13:19:00