解决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 相关文章推荐
python3实现163邮箱SMTP发送邮件
May 22 Python
tensorflow 打印内存中的变量方法
Jul 30 Python
Python实现提取XML内容并保存到Excel中的方法
Sep 01 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
Oct 31 Python
使用python对文件中的单词进行提取的方法示例
Dec 21 Python
Python利用sqlacodegen自动生成ORM实体类示例
Jun 04 Python
pandas.cut具体使用总结
Jun 24 Python
Anaconda 查看、创建、管理和使用python环境的方法
Dec 03 Python
Python网络爬虫信息提取mooc代码实例
Mar 06 Python
django配置app中的静态文件步骤
Mar 27 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
Jul 20 Python
超级详细实用的pycharm常用快捷键
May 12 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通过ajax实现双击table修改内容
2014/04/28 PHP
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
2011/09/05 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
基于input动态模糊查询的实现方法
2017/12/12 Javascript
vue-cli开发环境实现跨域请求的方法
2018/04/07 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
jQuery实现的简单手风琴效果示例
2018/08/29 jQuery
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
在vue中使用eslint,配合vscode的操作
2020/11/09 Javascript
[35:43]2018DOTA2亚洲邀请赛 4.1 小组赛B组 paiN vs Effect
2018/04/03 DOTA
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
python基础 range的用法解析
2019/08/23 Python
python实现图片插入文字
2019/11/26 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
python中加背景音乐如何操作
2020/07/19 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
HTML5 Geolocation API的正确使用方法
2018/12/04 HTML / CSS
奥地利网上书店:Weltbild
2017/07/14 全球购物
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
大学生大二自我鉴定
2013/10/28 职场文书
电子商务专业自荐信
2014/06/02 职场文书
走群众路线学习心得体会
2014/10/31 职场文书
2014年为民办实事工作总结
2014/12/20 职场文书
初三语文教学反思
2016/03/03 职场文书
浅谈Golang 嵌套 interface 的赋值问题
2021/04/29 Golang