预期效果：
水球图，圆形状态，显示相关信息。
外部脚本：
1.https://cdn.jsdelivr.net/npm/echarts-liquidfill@3/dist/echarts-liquidfill.min.js
2.https://echarts.baidu.com/resource/echarts-liquidfill-latest/dist/echarts-liquidfill.min.js
效果图：
image.png
var value = 0.9488;
var option = {
title:{
text: '购买数\n达到{a|501}件',
left:'center',
top:'20px',
textStyle: {
fontSize: 16,
lineHeight:30,
color: '#333',
textAlign: 'center',
rich:{
a:{
color: '#5594fa',
fontSize: 24,
padding:[0,10]
}
}
},
},
series: [
{
type: "liquidFill",
radius: "70%",
center: ["50%", "50%"],
color: ["#ecf3fe", "#c8dcfe", "#5594fa"],
data: [value,value,value],
amplitude: 10,
itemStyle: {
opacity: 1, // 波浪的透明度
shadowBlur: 0, // 波浪的阴影范围
},
backgroundStyle: {
borderWidth: 2,
borderColor: "#448af9",
color: "#fff",
},
label: {
show: true,
textStyle: {
color: "#5594fa",
insideColor: "#12786f",
fontSize: 24,
},
formatter: (params) => {
return `${(params.value * 100).toFixed(2)}%`;
},
},
outline: {
show: true,
},
},
],
//在这里是显示一个字段。具体作用：https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-3u872dym.html
//个人并不了解
graphic: [
{
type: "group",
left: "center",
top: "70%",
children: [
{
type: "text",
z: 100,
left: "10",
top: "middle",
style: {
fill: "#f2f2f2",
text: "化解率",
fontSize: 30,
},
},
],
},
]
}
重点说明：
series: [{
//type值
type: "liquidFill"
//color和data的个数对应 代表波浪展示颜色
color: ["#ecf3fe", "#c8dcfe", "#5594fa"]
data: [value,value,value]
//或者
data:[
{value:0.5,name:''},
{value:0.5,name:''},
{value:0.5,name:''}
]
//amplitude 代表波动振幅
amplitude: 10
//默认的状态下，水球图的背景有点灰灰的，使用itemStyle的opacity的修改
itemStyle: {
opacity: 1, // 波浪的透明度
shadowBlur: 0, // 波浪的阴影范围
}
//水球图中间的文字有个酷炫的效果，在水波和背景前的文字颜色是不同的，可以通过 insideColor 设置水波处的文字颜色，color 设置背景处的文字颜色。
label: {
show: true,
textStyle: {
color: "#5594fa",
insideColor: "#12786f"
},
//
//使用 backgroundStyle 修改边框颜色以及内间距
backgroundStyle: {
borderWidth: 2,
borderColor: "#448af9",
color: "#fff",
}
}]
//如果data全部是数值
var data=[0.8,0.8,0.8]
formatter: (params) => {
//只展示数字
return `${(params.value * 100).toFixed(2)}%`;
//增加文字介绍，也有insideColor效果
return `${'化解率'}\n\n${(params.value * 100).toFixed(2)}%`;
},
//如果data值有name值
var data=[
{value:0.8,name:'化解率'},
{value:0.8,name:'化解率'},
{value:0.8,name:'化解率'}
]
formatter: (params) => {
return `${params.name}\n\n${(params.value * 100).toFixed(2)}%`;
},
无insideColor效果.png
有insideColor效果.png
