echarts水球图如下:
问题:默认配置label文字89%为黑色,加载完动画后,文字显示成白色;水球未到的地方颜色显示成了灰色,而backgroundStyle背景色设置的明明是白色。
解决:
文字问题在label下增加或修改insideColor为 'transparent',文字即显示成原来设置的颜色;
水球未到的地方呈现灰色背景,考虑是受到阴影影响,将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: {
......
},
},
},
},
],
};