Echarts:水球图（需要外部再引入脚本）

预期效果：

水球图，圆形状态，显示相关信息。

外部脚本：

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