水位图

描述:当前是关于Echarts图表中的 水球图 示例。
 
            let value = 0.6
option = {
   //你的代码
    series:{
            type: 'liquidFill', //水位图
            radius: '80%', //显示比例
            center: ['50%', '50%'], //中心点
            shape: 'rect',
            amplitude: 10, //水波振幅
            data: [value, value, value], // data个数代表波浪数
            opacity: 1,
            color: [
                  {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(255,159,127,0.5)", // 0% 处的颜色
                      },
                      {
                        offset: 0.5,
                        color: "rgba(255,159,127,0.2)", // 100% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "rgba(255,159,127,0)", // 100% 处的颜色
                      },
                    ],
                  },
                  {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(163,50,233,0.5)", // 0% 处的颜色
                      },
                      {
                        offset: 0.5,
                        color: "rgba(163,50,233,0.2)", // 100% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "rgba(163,50,233,0)", // 100% 处的颜色
                      },
                    ],
                  },
        ], //波浪颜色
            backgroundStyle: {
                borderWidth: 1, //外边框
                borderColor: '#23cc72', //边框颜色
                color: 'transparent'
            },
            label: {
                //标签设置
                normal: {
                    position: ['50%', '30%'],
                    formatter: value * 100 + '%', //显示文本,
                    textStyle: {
                        fontSize: '28px', //文本字号,
                        color: '#FFFFFF',
                        fontFamily: 'Impact'
                    },
                },
            },
            outline: {
                show: false,//最外层边框显示控制
            },
        },
};