解决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 相关文章推荐
Python 调用VC++的动态链接库(DLL)
Sep 06 Python
Python httplib模块使用实例
Apr 11 Python
python解决网站的反爬虫策略总结
Oct 26 Python
轻松掌握python设计模式之策略模式
Nov 18 Python
Python使用三种方法实现PCA算法
Dec 12 Python
关于反爬虫的一些简单总结
Dec 13 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
Apr 18 Python
pyqt5之将textBrowser的内容写入txt文档的方法
Jun 21 Python
python绘制评估优化算法性能的测试函数
Jun 25 Python
django models里数据表插入数据id自增操作
Jul 15 Python
Django xadmin安装及使用详解
Oct 26 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
Feb 24 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获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
php面向对象全攻略 (一) 面向对象基础知识
2009/09/30 PHP
php中chdir()函数用法实例
2014/11/13 PHP
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
PDO::errorCode讲解
2019/01/28 PHP
php 利用socket发送GET,POST请求的实例代码
2020/07/04 PHP
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
js+css3制作时钟特效
2016/10/16 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
微信小程序 页面传参实例详解
2016/11/16 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
React快速入门教程
2017/01/17 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
详解Immutable及 React 中实践
2018/03/01 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
vue新建项目并配置标准路由过程解析
2019/12/09 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
Python如何根据时间序列数据作图
2020/05/12 Python
矫正人员思想汇报
2014/01/08 职场文书
亲属关系公证书
2014/04/08 职场文书
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
小学社会实践活动总结
2014/07/03 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
2014年置业顾问工作总结
2014/11/17 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书
python脚本框架webpy的url映射详解
2021/11/20 Python
Python编写冷笑话生成器
2022/04/20 Python