echart饼图标签重叠_echart饼图之文字防重叠

步骤

1、最小角度- 防止数据量太小，只显示一条线，所有都挤在一起

minAngle: 5,

2、开启自带的防重叠策略

avoidLabelOverlap: true,

3、将显示的文字缩小

fontSize: '9',

代码

let option = {

tooltip: {

trigger: 'item',

formatter: "{b}"

},

legend: {

// 取消图例上的点击事件，这个看需求

selectedMode: false,

// 分布方式，水平：'horizontal'，垂直：'vertical'

orient: 'horizontal',

// 水平对齐方式，可设置为'left','center','right',number(px)

x: 'center',

// 垂直对齐方式，可设置为'top','center','bottom',number(px)

y: 'top',

// 距顶部的距离，其他同理

top: '75%',

// 距左边的距离，其他同理

// left: '10%',

// 图标大小,宽和高

itemWidth: 12,

itemHeight: 12,

// 显示内容

data: markArr.map((item) => { return item.name }),

},

series: [

{

name:'',

type:'pie',

minAngle: 5, // 1、最小角度- 防止数据量太小

radius: ['40%', '47%'],

center: ['50%', '40%'],

avoidLabelOverlap: true, // 2、开启防重叠策略

hoverAnimation:false,

label: {

normal: {

show: true,

formatter: '{c} ({d}%)', //自定义显示格式(b:name, c:value, d:百分比)

textStyle: {

fontSize: '9', // 3、缩小显示文字的字号

color: 'black'

}

},

},

labelLine:{

normal:{

lineStyle: {

color: "black" // 改变标示线的颜色

}

},

},

data: markArr,

color: ["#7CAFDD", "#F1975A", "#B7B7B7", "#FFCD33", "#698ED0", "#8CC168", "#5B9BD5", "#ED7D31", "#327DC2", "#D26012", "#A5A5A5", "#FFC000", "#4472C4", "#70AD47", "#797979", "#9E480E", "#636363", "#997300", "#264478", "#43682B"],

}

]

}

网站导航