1. 程式人生 > 程式設計 >解決echarts中餅圖標籤重疊的問題

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

餅圖中的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',series: [
            {
              name:'組數',type:'bar',barWidth : 20,data:arr2,yAxisIndex: 0,/*   markPoint : {
                data : [
                  {type : 'max',name: '最大值'},{type : 'min',name: '最小值'}
                ]
              }*/
    
            },{
              name:'CMI',data:arr3,yAxisIndex: 1,/*  markPoint : {
                data : [
                  {type : 'max',name: '最小值'}
                ]
              }*/
            }
          ]
        };

以上這篇解決echarts中餅圖標籤重疊的問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。