解決echarts中餅圖標籤重疊的問題
阿新 • • 發佈:2020-05-18
餅圖中的series有個avoidLabelOverlap屬性,
avoidLabelOverlap:是否啟用防止標籤重疊策略,預設開啟,在標籤擁擠重疊的情況下會挪動各個標籤的位置,防止標籤間的重疊。
當avoidLabelOverlap設定為false時會出現以下情況
改為true之後就不會重疊
程式碼如下
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軸:
祕籍:
程式碼
// 基於準備好的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中餅圖標籤重疊的問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。