解决echarts中饼图标签重叠的问题
更新时间：2020年05月16日 15:43:27 作者：有蝉
这篇文章主要介绍了解决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: '最小值'}
]
}*/
}
]
};
以上这篇解决echarts中饼图标签重叠的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
今天小编就为大家分享一篇python连接mongodb密码认证实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
Python的Twisted框架上手前所必须了解的异步编程思想
Twisted是Python世界中人气最高的framework之一,异步的工作模式使其名扬天下,这里为大家总结了Python的Twisted框架上手前所必须了解的异步编程思想,需要的朋友可以参考下2016-05-05
这篇文章主要为大家详细介绍了如何通过 Python 和 PyQt5 结合 pandas 库,快速实现一个高效、自动化的 Excel 数据对比工具,感兴趣的小伙伴可以了解下2025-03-03
在编写Python脚本时,了解脚本的执行时间通常是很有用的,特别是在优化代码或评估性能时,Python提供了多种方法来测量脚本的执行时间,从内置模块到第三方库,可以选择适合你需求的方式,本文将介绍计算 Python 脚本执行时间的多种方法,需要的朋友可以参考下2023-11-11
本文主要介绍了pytorch中可视化之hook钩子，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-03-03
将本地Python项目打包成docker镜像上传到服务器并在docker中运行
Docker是一个开源项目,为开发人员和系统管理员提供了一个开放平台,可以将应用程序构建、打包为一个轻量级容器,并在任何地方运行,这篇文章主要给大家介绍了关于将本地Python项目打包成docker镜像上传到服务器并在docker中运行的相关资料,需要的朋友可以参考下2023-12-12
本文我们用到了sorted 如何进行按照键或者值进行排序，解决了字典的排序问题。文中将进一步详细介绍sorted的强大。希望对大家有所帮助2018-09-09
Pytorch实现将label变成one hot编码的两种方式
这篇文章主要介绍了Pytorch实现将label变成one hot编码的两种方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
这篇文章主要介绍了python基于requests库爬取网站信息,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-03-03
这篇文章主要介绍了python实现简单温度转换的方法,涉及Python操作字符串的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
最新评论