官方文档: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;
页面效果: