import React, { PureComponent } from 'react';
import echarts from 'echarts/lib/echarts';
import 'echarts-liquidfill';
import styles from './index.less';class LiquidfillChart extends PureComponent {constructor(props) {super(props);this.state = {};}componentDidMount() {const { data } = this.props;this.initLiquidfillChart(data);// 窗口改变重新加装定时器并重绘echartswindow.addEventListener('resize', () => {this.initLiquidfillChart(data);});}componentDidUpdate() {const { data } = this.props;// 数据改变重绘echartsthis.initLiquidfillChart(data);// 窗口改变重新加装定时器并重绘echartswindow.addEventListener('resize', () => {this.initLiquidfillChart(data);});}initLiquidfillChart = (data) => {if (data.length > 0) {const { id, diameter, center, color } = this.props;const myChart = echarts.init(document.getElementById(id));const option = {grid: {left: 0,right: 0,top: 0,bottom: 0,containLabel: true},series: [{type: 'liquidFill',radius: diameter,center: center,color: color,data: data,backgroundStyle: {borderColor: color[0],borderWidth: 2,color: 'transparent'},outline: {borderDistance: 5,itemStyle: {borderColor: color[0],borderWidth: 1,}},label: {show: true,color: '#fff',fontSize: 18,fontWeight: 400,padding: [0, 0, -6, 0],align: 'center',baseline: 'bottom',position: 'inside'},phase: 0,period: 4000,waveLength: '100%',animationDuration: 0,animationDurationUpdate: 2000,animationEasingUpdate: 'cubicOut'}]};myChart.setOption(option);}};render() {const { data, id, width, height } = this.props;return (<div className={styles.contain}><div className={styles.chart} id={id} style={{ width, height }} /></div>);}
}export default LiquidfillChart;LiquidfillChart.defaultProps = {id: 'liquidfillChart',width: '100%',height: '100%',color: ['#DAD44A'],// diameter: '67px', //直径diameter: '97.1%', //直径center: ['50%', '50%'],data: [0.27]
};

.contain {display: flex;align-items: center;width: 100%;height: 100%;.chart {width: 100%;height: 100%;}
}

<LiquidfillChart id='sandboxNczylChart' diameter='100%' color={sandboxNczylColor} data={sandboxNczylData} />