解決echarts中餅圖標簽重疊的問題

更新時間：2020年05月16日 15:43:27 作者：有蟬

這篇文章主要介紹了解決echarts中餅圖標簽重疊的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

餅圖中的series有個avoidLabelOverlap屬性，

avoidLabelOverlap:是否啟用防止標簽重疊策略，默認開啟，在標簽擁擠重疊的情況下會挪動各個標簽的位置，防止標簽間的重疊。

當avoidLabelOverlap設置為false時會出現以下情況

改為true之后就不會重疊

代碼如下

var option = {
    tooltip: {
     trigger: "item",
     formatter: "{a} <br/> : {c} (vvxyksv9kd%)"
    },
    legend: {
     //orient: "vertical",
     x: "0%",
     //y: "25%",
     //y: "5%",
     itemWidth: 14,
     itemHeight: 14,
     align: "left",
     data: xData,
     textStyle: {
      color: "#fff"
     }
    },
    series: [
     {
      name: "危險源狀態(tài)",
      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: '各醫(yī)院指標對比情況',
         	    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中餅圖標簽重疊的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: