echarts水球图动画加载完出现灰色背景色,如何去除?

echarts水球图如下:

问题:默认配置label文字89%为黑色,加载完动画后,文字显示成白色;水球未到的地方颜色显示成了灰色,而backgroundStyle背景色设置的明明是白色。

解决:

  1. 文字问题在label下增加或修改insideColor为 'transparent',文字即显示成原来设置的颜色;

  1. 水球未到的地方呈现灰色背景,考虑是受到阴影影响,将itemStyle中的shadowBlur:设为0即可。

option = {
  title: [
    {
      ......
      },
  ],
  series: [
    {
      type: "liquidFill",
      radius: "90%",
      center: ["50%", "50%"],
      // 图形样式
      itemStyle: {
        opacity: 0.5, // 波浪的透明度
        shadowBlur: 0 // 波浪的阴影范围 设置为0不会出现底色为灰色的情况
      },
      color: [ // 水球显示的背景颜色
        {
          ......
          },
      ],
      data: [0.9, 0.8], // data个数代表波浪数
      backgroundStyle: {
        color: 'rgba(255,255,255,0)', // 水球未到的背景颜色
      },
      label: {
        normal: {
          insideColor: 'transparent', // 避免文字显示为白色
          textStyle: {
            ......
            },
        },
      },
    },
  ],
};
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值