如何设置饼状图引导线位置
我们在使用Echarts绘制饼状图时,经常需要确定引导线位置,官网给出的示例并未明确哪些属性决定了引导方式及位置,例如:
如下外部引导线方式:
有内部引导线方式
如何设置这两种引导方式呢?
首先要明确,管控内部显示还是外部显示的属性是: series下的label和labelLine。
方式一:外部显示:
label下的position: 'outside’即表示文本显示位置为外部; labelLine下的 show为true, 即表示显示引导线
series: [{
type:'pie',
label: { //展示文本设置
normal: {
show: true, //展示
position: 'outside' // outside表示文本显示位置为外部
},
emphasis: { //文本样式
show: true, //展示
textStyle: { //文本样式
fontSize: '14',
fontWeight: '600',
}
}
},
labelLine: { //引导线设置
normal: {
show: true, //引导线显示
}
},
}]
方式二:内部显示:
label下的position: 'center’即表示文本显示位置为内部; labelLine下的 show为false, 即表示隐藏引导线
series: [ {
type:'pie',
label: { //文本设置
normal: {
show: false, //设为false
position: 'center' //center表示文本显示位置为内部
},
emphasis: { //文本样式设置
show: true,
textStyle: {
fontSize: '14',
fontWeight: '600',
}
}
},
labelLine: { //引导线设置
normal: {
show:false, //引导线不显示
}
},
}]
另外,还有引导线长度等属性可进行设置。
参考:Echarts官网配置项:https://echarts.apache.org/zh/option.html#series-pie.labelLine