解决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


猜你喜欢
- 本文实例讲述了Go语言中的range用法。分享给大家供大家参考。具体如下:for 循环的 range 格式可以对 slice 或者 map
- 最近一段时间一直比较忙,已经有好几个月没有打理博客了。现将一个最近在项目中制作的一个菜单实例整理出来,共享一下。在后台或OA系统中最常用到的
- 这里是WMP的版本ClassID,从WMP7后ID就成了clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6
- 上次还是CSDN里的朋友回答的,我复制了下来。原文如下 =========================== 利用统计文章字数,然后达到一
- 在使用Python库时,常常会用到matplotlib.pyplot绘图,本文介绍在PyCharm及Jupyter Notebook页面中控
- 代码: import os while True: dynamic = input('输入计算表达式:') if dynam
- 1.安装Apache 在终端中输入下面的命令就可以安装Apache了:sudo yum install httpdsudo的意思是
- 本文实例讲述了Python SVM(支持向量机)实现方法。分享给大家供大家参考,具体如下:运行环境Pyhton3numpy(科学计算包)ma
- MySQL GUI工具很多,本文就常用的Navicat for MySQL与MySQL-Front的特色功能做一个详细介绍与比较。(一)My
- vue后台返回base64图片无法显示关于后台接口返回的图片base64格式页面无法显示的问题,我遇到的原因是因为返回的一串内容里面存在空格
- 在日常的工作中,我们通常会有去探测目标主机是否存活的应用场景,单个的服务器主机可以通过计算机自带的DOS命令来执行,但是业务的存在往往不是单
- 前言若电脑之前已经安装过vue-cli了,但是版本过低,比方说当前vue-cli的版本为2.9.6,然后我想升级到vue-cli的最新版本4
- 本文实例讲述了Python挑选文件夹里宽大于300图片的方法。分享给大家供大家参考。具体分析如下:这段代码需要用到PIL库。代码如下所示:i
- 神经网络模型一般用来做分类,回归预测模型不常见,本文基于一个用来分类的BP神经网络,对它进行修改,实现了一个回归模型,用来做室内定位。模型主
- 前言PyQt是Python语言环境的GUI编程解决方案之一,另外还有PyGTK、wxPython等也较为常用。PyQt作为Qt语言的Pyth
- 一.__eq__方法在我们定义一个类的时候,常常想对一个类所实例化出来的两个对象进行判断这两个对象是否是完全相同的。一般情况下,我们认为如果
- #!#backup.sh##系统名称sysname=gzsyspath=/home/oracle/databak/$sysname/v_da
- 本文实例讲述了python读写二进制文件的方法。分享给大家供大家参考。具体如下:初学python,现在要读一个二进制文件,查找doc只发现
- 前段时间写了一个百度图片下载器,结果发现有很多人需要使用。说实话之前写的那一款百度图片下载器比较LOW,今天刚好有时间就做了一下升级。更新了
- 点击获取后,返回2s后的鼠标位置,显示在文本框(需要用pip命令安装所需的的库)(pip install 模块名比如 安装pyautogui