Echarts饼状图视觉引导线设置
·
如何设置饼状图引导线位置
我们在使用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
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)