安装
npm install echarts
npm install echarts-liquidfill
import
import * as echarts from 'echarts';
import 'echarts-liquidfill'
示例demo
const chart = echarts.init(document.getElementById("app"));
chart.setOption({
series: [
{
type: "liquidFill",
outline: {
show: false //隐藏outline
},
data: [
{
value: 0.65,
itemStyle: {
color: "#FFD3EB"
}
},
{
value: 0.6,
itemStyle: {
color: {
type: "linear",
x: 0,
y: 1,
colorStops: [
{
offset: 0,
color: "#E346FF" // 0% 处的颜色
},
{
offset: 1,
color: "#E1277E" // 100% 处的颜色
}
]
}
}
}
],
center: ["50%", "50%"],
amplitude: "6%",
itemStyle: {
opacity: 0.95, //液体填充部分透明度
shadowColor: "rgba(0,0,0,0)" //液体填充部分阴影颜色
},
label: {
normal: {
textStyle: {
fontSize: 16,
color: "#FFD3EB"
}
}
},
radius: "75%",
backgroundStyle: {
borderColor: "#FFD3EB",
borderWidth: 1,
shadowBlur: 4,
shadowColor: "#FFD3EB",
color: "#FFFFFF" //填充背景
}
}
]
});
demo.png
问题简记
- 问题描述
需求要求 填充背景是白色，但是 设置“backgroundStyle.color ” 为白色的时候，还是会有点灰色，无法完全变白色：如下图
demo1.png
- 解决方案
改变一下思路，其实不是背景填充的原因，灰色是由于液体填充部分的阴影色导致的，所以改变液体填充部分的阴影色值就可以了。
itemStyle: {
opacity: 0.95, //液体填充部分透明度
shadowColor: "rgba(0,0,0,0)" //液体填充部分阴影颜色
},
参考文档
echart水滴图api：https://github.com/ecomfe/echarts-liquidfill#api
