Echarts中,饼图颜色设置透明后的,boeder失效问题

 项目中碰到一个需求,饼图之间的间隔,开始想通过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},

随手记,大佬们有更好的方法,欢迎指点~ 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值