解决echarts中饼图标签重叠的问题


Posted in Python onMay 16, 2020

饼图中的series有个avoidLabelOverlap属性,

avoidLabelOverlap:是否启用防止标签重叠策略,默认开启,在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠。

当avoidLabelOverlap设置为false时会出现以下情况

解决echarts中饼图标签重叠的问题

改为true之后就不会重叠

解决echarts中饼图标签重叠的问题

代码如下

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轴:

解决echarts中饼图标签重叠的问题

秘籍:

解决echarts中饼图标签重叠的问题

代码

// 基于准备好的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 相关文章推荐
在Django中管理Users和Permissions以及Groups的方法
Jul 23 Python
python 实现红包随机生成算法的简单实例
Jan 04 Python
一张图带我们入门Python基础教程
Feb 05 Python
Python使用pylab库实现画线功能的方法详解
Jun 08 Python
python实现批量修改文件名代码
Sep 10 Python
Linux下多个Python版本安装教程
Aug 15 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
Aug 23 Python
Python pandas.DataFrame 找出有空值的行
Sep 09 Python
Django REST Framework之频率限制的使用
Sep 29 Python
Python 转换RGB颜色值的示例代码
Oct 13 Python
python PIL/cv2/base64相互转换实例
Jan 09 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
Jan 16 Python
实现ECharts双Y轴左右刻度线一致的例子
May 16 #Python
在echarts中图例legend和坐标系grid实现左右布局实例
May 16 #Python
Python如何使用PIL Image制作GIF图片
May 16 #Python
pyecharts调整图例与各板块的位置间距实例
May 16 #Python
通过Python实现一个简单的html页面
May 16 #Python
Python批量处理csv并保存过程解析
May 16 #Python
基于Python测试程序是否有错误
May 16 #Python
You might like
php中实现字符串翻转的方法
2017/02/22 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
Tab页界面,用jQuery及Ajax技术实现
2009/09/21 Javascript
浅谈Javascript事件处理程序的几种方式
2012/06/27 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
ES6新特性之函数的扩展实例详解
2017/04/01 Javascript
Vue2.0 从零开始_环境搭建操作步骤
2017/06/14 Javascript
一步步教你利用Canvas对图片进行处理
2017/09/19 Javascript
浅谈vue,angular,react数据双向绑定原理分析
2017/11/28 Javascript
vue实现选项卡及选项卡切换效果
2018/04/24 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
2018/11/30 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
关于vue 结合原生js 解决echarts resize问题
2020/07/26 Javascript
[55:56]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
python中星号变量的几种特殊用法
2016/09/07 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
python实现三壶谜题的示例详解
2020/11/02 Python
python在协程中增加任务实例操作
2021/02/28 Python
HTML5和CSS3实例教程总结(推荐)
2016/07/18 HTML / CSS
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
公司出纳岗位职责
2013/12/07 职场文书
修理厂厂长岗位职责
2014/01/30 职场文书
老师的检讨书
2014/02/23 职场文书
护士实习求职信
2014/06/22 职场文书
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
大学运动会加油稿
2015/07/22 职场文书