解决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学习笔记(一)(基础入门之环境搭建)
Jun 05 Python
在Python中使用全局日志时需要注意的问题
May 06 Python
使用Mixin设计模式进行Python编程的方法讲解
Jun 21 Python
python 动态加载的实现方法
Dec 22 Python
在Windows中设置Python环境变量的实例讲解
Apr 28 Python
Django+JS 实现点击头像即可更改头像的方法示例
Dec 26 Python
对Python生成器、装饰器、递归的使用详解
Jul 19 Python
Python如何根据时间序列数据作图
May 12 Python
Python新手学习装饰器
Jun 04 Python
pycharm 如何取消连按两下shift出现的全局搜索
Jan 15 Python
python学习之panda数据分析核心支持库
May 07 Python
浅谈Python中的正则表达式
Jun 28 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中用数组的方法设置cookies
2011/04/21 PHP
ThinkPHP写第一个模块应用
2012/02/20 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
两个php日期控制类实例
2014/12/09 PHP
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
利用Jquery实现可多选的下拉框
2014/02/21 Javascript
使用node.js 制作网站前台后台
2014/11/13 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
简介JavaScript中的setDate()方法的使用
2015/06/11 Javascript
jQuery绑定事件的几种实现方式
2016/05/09 Javascript
AngularJS 简单应用实例
2016/07/28 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
2016/11/30 Javascript
3种vue路由传参的基本模式
2018/02/22 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
详解vuex的简单todolist例子
2019/07/14 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
layui关闭层级、简单监听的实例
2019/09/06 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
Python进行数据科学工作的简单入门教程
2015/04/01 Python
Python学习笔记之视频人脸检测识别实例教程
2019/03/06 Python
python爬虫可以爬什么
2020/06/16 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
HTML5对比HTML4的主要改变和改进总结
2016/05/27 HTML / CSS
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
酒店管理专业学生求职信
2013/09/27 职场文书
政府门卫岗位职责
2014/04/29 职场文书
体育口号大全
2014/06/18 职场文书
三严三实对照检查材料
2014/09/22 职场文书
2014年财务部工作总结
2014/11/11 职场文书
十二生肖观后感
2015/06/12 职场文书