React G2Plot 水波图

官方文档：https://antv-g2plot-v1.gitee.io/zh/docs/manual/introduction

安装依赖

npm install @antv/g2plot

或

yarn add @antv/g2plot

应用

新建 LiquidChart.js 文件：

import { useEffect, useState } from 'react';
import { Liquid } from '@antv/g2plot';
//唯一id，颜色，数值，文本，大小
const LiquidPlot = ({ ids, color, percent, textinfo, size }) => {
    const [liquidPlot, setLiquidPlot] = useState(null)
    useEffect(() => {
        //数值更新销毁重绘
        if (liquidPlot !== null) {
            liquidPlot.destroy()
        }
        const liquidPlot1 = new Liquid('lqchart' + ids, {    //新建
            percent: percent,  //百分比
            width: size,
            height: size,
            liquidStyle: {    //水波样式
                lineWidth: 10,
                strokeOpacity: 0.7,
                lineDash: [3, 5],
                fill: color,
                stroke: color
            },
            statistic: {      // 文本配置
                title: {
                    formatter: (v) => {
                        return v.percent * 100 + '%'
                    },
                    style: {
                        fontSize: size / 9,
                        color: '#093049'
                    }
                },
                content: {
                    content: textinfo,
                    style: {
                        fontSize: size / 15,
                        color: '#093049'
                    }
                }
            }
        });
        liquidPlot1.render();
        setLiquidPlot(liquidPlot1)
    }, [color, percent, textinfo, size])
    return <div id={'lqchart' + ids}></div>
}
export default LiquidPlot 

在 App.js 中引入 LiquidChart.js 文件：

import './assets/css/App.css';
import LiquidPlot from './components/LiquidChart'

function App () {
  return (
    <div className="App">
      <LiquidPlot
        ids={1}
        color={"#A595FE"}
        percent={0.1}
        textinfo={"当前进度"}
        size={220}
      >
      </LiquidPlot>
    </div>
  );
}
export default App;

页面效果：