echarts水球图

echarts 水球图可能开发中也会碰到，当然其也不是很复杂，但也是需要一些时间，echarts 中也有水球图这个东西，可以使用其来实现我们的水球图效果，顺便引出 echart 插件市场，我们可以在里面获取我们需要的效果

echarts水球图文档、echarts扩展社区 需要可以去里面参考

由于是依赖于 echarts 的插件，不属于 echarts默认效果，因此我们要额外导入 echarts-liquidfill

yarn add echarts
yarn add echarts-liquidfill

echarts主要是调整 options，我们设置这个就行了

const chart = useRef<any>(null);

const perc = ...
const options = {
    tooltip: {
        trigger: "item",
    },
    series: [
        {
            type: "liquidFill",
            data: [perc, perc],
            color: [
                "rgba(16, 123, 255, 0.6)",
                "rgba(27, 114, 207, 0.4)",
            ],
            name: "办结满意度",
            radius: "80%",
            outline: { 边上的线
                show: true,
                itemStyle: {
                    borderColor: "#7BB0FF",
                    borderWidth: 1,
                    color: "transparent",
                },
            },
            tooltip: { //hover浮层文本
                valueFormatter: function (value: number) {
                    return value * 100 + " %";
                },
            },
            backgroundStyle: { //背景颜色
                color: "transparent",
            },
            label: {
                //是否显示原本的浮层
                show: false,
            },
            animationDuration: 1000,
        },
    ],
};

if (!chart.current) {
    const chartDom = document.getElementById(
        `shengtaihuanbao-liquidfill-chart`
    );
    chart.current = echarts.init(chartDom!);
}
chart.current.setOption(options);

上面的写法一还要声明chart与释放dispose，很麻烦，可以使用 echarts-for-react组件避免这个问题，当然也可以自己封装一个小组件

import EChartsReact from 'echarts-for-react'

//直接使用我们的 useState 即可，简单方便
<EChartsReact option={options} className="" />