echart饼图标签重叠_【eCharts】echarts饼状图data数据小时，导致指示线及显示文字重叠解决方法...

修改前

修改后

不需要什么特殊的算法，只需要加几个\n把空间撑开。

如果觉得文字太过于靠上还可以通过设置label.rich中的padding改变位置，不过有个弊端就是不能再设置背景颜色了。

// 复制代码到 ECharts 查看效果

option = {

tooltip: {

trigger: 'item',

formatter: '{a}
{b}: {c} ({d}%)'

},

legend: {

orient: 'vertical',

left: 10,

data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']

},

series: [

{

name: '访问来源',

type: 'pie',

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

label: {

formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} \n\n',

rich: {

a: {

color: '#999',

lineHeight: 22,

align: 'center'

},

hr: {

borderColor: '#aaa',

width: '100%',

borderWidth: 0.5,

height: 0

},

b: {

fontSize: 16,

lineHeight: 33

},

per: {

color: '#eee',

backgroundColor: '#334455',

padding: [2, 4],

borderRadius: 2

}

}

},

data: [

{value: 335, name: '直达'},

{value: 310, name: '邮件营销'},

{value: 234, name: '联盟广告'},

{value: 135, name: '视频广告'},

{value: 1048, name: '百度'},

{value: 251, name: '谷歌'},

{value: 147, name: '必应'},

{value: 102, name: '其他'}

]

}

]

};

// 设置padding调整文字位置的样式

rich: {

a: {

color: '#999',

lineHeight: 22,

align: 'center',

padding:[-30,0,0,0]

},

// hr: {

// borderColor: '#aaa',

// width: '100%',

// borderWidth: 0.5,

// height: 0

// },

b: {

fontSize: 16,

lineHeight: 33,

padding:[-30,0,0,0]

},

per: {

padding: [2, 4],

// color: '#eee',

// backgroundColor: '#334455',

borderRadius: 2,

padding:[-30,0,0,0]

}

}