项目中碰到一个需求,饼图之间的间隔,开始想通过border来操作,但是boder颜色设为透明后直接失效了,后通过加入新的数据项,将其设为透明,解决需求
option = {
tooltip: {
trigger: "item",
formatter: function(params) {
// 判断是否应该隐藏 tooltip
if (params.data.name === '1') {
return ''; // 返回空字符串则不显示 tooltip
}
// 对于其他项,正常显示 tooltip
return params.name + ' : ' + params.value + ' (' + params.percent + '%)';
}
},
graphic: {
elements: [
{
type: "image",
style: {
width: 85,
height: 85,
},
left: "center",
top: "center",
},
],
},
// 内部阴影
series: [
{
name:'',
type: "pie",
radius: ["65", "75"],
top: "center",
left: "center",
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
itemStyle: {
borderRadius: 20,
borderColor: '#fff',
borderWidth: 2
},
emphasis: {
disabled: true
},
labelLine: {
show: false,
},
hoverAnimation: false,
data:[{name: "食品饮料26",value: 360.53},
{name: "1",itemStyle:{normal:{color:"rgba(0,0,0,0)"}},value: 160.53},
{name: "食品饮料3",value: 260.53},
{name: "1",itemStyle:{normal:{color:"rgba(0,0,0,0)"}},value: 60.53},
{name: "食品饮5料",value: 30.53},
{name: "1",itemStyle:{normal:{color:"rgba(0,0,0,0)"}},value: 310.53},
{name: "食品饮7料",value: 160.53},
{name: "1",itemStyle:{normal:{color:"rgba(0,0,0,0)"}},value: 140.53},
{name: "食品饮0-料",value: 230.53},
{name: "1",itemStyle:{normal:{color:"rgba(0,0,0,0)"}},value: 150.53}
],
color: ['#dbc5a1', '#b3693e', '#d4a145', '#359184', '#3f81cc'],
},
{
name:'',
type: "pie",
radius: ["58", "65"],
top: "center",
left: "center",
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
labelLine: {
show: false,
},
hoverAnimation: false,
data:[{name: "食品饮料",value: 360.53},
{name: "食品饮料2",value: 160.53},
{name: "食品饮料3",value: 260.53},
{name: "食品饮4料",value: 60.53},
{name: "食品饮5料",value: 30.53},
{name: "食品饮6料",value: 310.53},
{name: "食品饮7料",value: 160.53},
{name: "食品饮9料",value: 140.53},
{name: "食品饮0-料",value: 230.53},
{name: "食品饮9料",value: 150.53}
],
itemStyle: {
normal: { color: "#2f6099" }
}
},
],
}
通过加入新的展示数据,设置为透明
{name: "食品饮料2",itemStyle:{normal:{color:"rgba(0,0,0,0)"}},value: 160.53},
随手记,大佬们有更好的方法,欢迎指点~