1. Plug-in official website: https://www.npmjs.com/package/echarts-liquidfill
2. Install echarts and echarts-liquidfill in the project
npm install echarts
npm install echarts-liquidfill
Currently installed version:
[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-bHvx9zrJ-1679034311702)(/upload/2023/03/image-6b5cd80bd2364c31b6aec4ea898d6f00.png)]
3. Create a new WaterChart.tsx file and introduce echarts and echarts-liquidfill
import { FC, useEffect } from 'react';
import * as echarts from 'echarts';
import 'echarts-liquidfill';
import React from 'react';
const LiquidCharts: FC = () => {
useEffect(() => {
initChart();
});
const initChart = () => {
const liquid = document.getElementById('main');
const map = echarts.init(liquid as HTMLDivElement);
const option = {
series: [
{
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3],
animationDuration: 0,
animationDurationUpdate: 2000,
animationEasingUpdate: 'cubicOut',
},
],
};
map.clear()
map.setOption(option);
};
return <div id='main' style={
{ width: 800, height: 800 }} />;
};
export default LiquidCharts;
4. Just import the WaterChart file where it needs to be displayed
import WaterChart from './WaterChart.tsx'
<WaterChart />
5. Results display
[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-iMigiZ45-1679034311703)(/upload/2023/03/image-d6c31d9f276645618e11f7edaad0bc41.png)]
bd78a9fb-6f0c-4e38-83e6-bf45daf2eea3