echarts水球图

Question

echarts水球图，怎么样做成这种效果

let data = [16131];
 option = {
   title: [
        {
            text: '当前库存',
            x: '47%',
            y: '70%',
            textStyle: {
                fontSize: 14,
                fontWeight: '100',
                color: '#5dc3ea',
                lineHeight: 16,
                textAlign: 'center',
            },
        }
    ],
        series: [
          {
            type: "liquidFill",
            data: data,
            direction: "false", //波浪方向或者静止
            radius: "30%",
            // 水球颜色
            color: [
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 1,
                            color: '#5293ab', //下
                        },
                        {
                            offset: 0,
                            color: '#69457b',
                        },
                    ],
                    globalCoord: false,
                },
            ],
            center: ["50%", "50%"], //水球位置
            // outline  外边
            outline: {
              // show: false
              borderDistance: 0, //内环padding值
              itemStyle: {
                borderWidth: 8, //圆边线宽度
                borderColor: "#d3a345",
              }
            },
            backgroundStyle: {
                // borderWidth: 5,
                // borderColor: 'rgb(255,0,255,0.9)',
                color: 'rgb(255,0,255,0.01)'
            },
            label: {
              show: false
            }
          }
        ]
      };

Answer 1

直接用canvas画还快一些

Echarts水球图(Liquid Fill Chart) - 简书 水球图(Liquid Fill Chart)是Echarts的一个插件(在官方文档中没有)，可以用来优雅的展示百分比数据。 安装 HTML中引入水球图: 其中这两个文件都可以... https://www.jianshu.com/p/172b79fa33fe

这个专门画水球的，参考一下