The outer ring of this effect changes as the data changes
Not much to say about the code
Api explained
If its type type is type: ' liquidFill' , this will form a water wave ball.
radius: It is possible to control the proportion of the entire water wave map in the div.
backgroundStyle: Set the background color of the water wave ball, which is different from the fill color.
label: The title is not displayed. I didn’t delete the subtitle for the code. I feel that the subtitle is easier to use.
color is the color of the fill, he can choose gradient colorStops this is to set the gradient color.
If the other configurations are required to be a water wave map with an outer ring, you can directly copy the code and change the color.
center is to control the display position of the outer ring. radius is the thickness of the control line. The first item is the inner radius, and the second item is the outer radius.
It’s the first time I write and I don’t know what to say. If you don’t understand something, you can private message me. Hope to bring you help.
question
One problem is that when I wrote this, I checked the information and said that I needed to download the installation package echarts-liquidfill
But I checked that the official website has been closed and only the github source code is still there. When npm downloaded it, it was empty.
But you can still see this file in node_modules. So I tried to import but got an error and couldn't find this
2022.1.13
Now I see that npm already has it 
I later commented out the introduction in the project and found that it did not affect the water wave ball. I do not know why.
import React, { Component, useState, useEffect, useMemo } from 'react';
import * as echarts from 'echarts';
import 'echarts-liquidfill/src/liquidFill.js';
const Liquidill = porps => {
let ReturnTicketRate = porps.ReturnTicketRate
useEffect(() => {
const ballChart = echarts.init(document.getElementById('liquidFillChart2'));
var option = {
title: {
text: '回票率',
left: 'center',
top: '50',
textStyle: {
fontWeight: 'normal',
fontSize: 14,
color: 'white',
},
subtext: `${ReturnTicketRate}%`, //副标题
subtextStyle: {
fontWeight: 'bold',
fontSize: 20,
color: 'white',
},
},
series: [
{
type: 'liquidFill',
radius: '80%',
center: ['50%', '50%'],
data: [(`${ReturnTicketRate}` -0) / 100 ],
backgroundStyle: {
borderWidth: 1,
color: 'rgba(99,135,255,0.7)',
// color: 'rgba(118,104,255,0.7)',
},
label: {
normal: {
show: false, //不显示label 用副标题代替了
formatter: (0.5 * 100).toFixed(0) + '%',
textStyle: {
fontSize: 30,
color: 'white',
},
},
},
color: [
//color一定要是个数组 ，每一项对应一个波浪，可以给每个波浪单独配置颜色
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
itemStyle: {
color: 'rgba(99,135,255,0.7)',
shadowColor: 'rgba(99,135,255,0.7)',
opacity: 0.5,
},
colorStops: [
{
offset: 1,
color: 'rgba(99,135,255,0.7)',
},
{
offset: 0,
color: 'rgba(99,135,255,0.7)',
},
],
globalCoord: false,
},
],
outline: {
show: false,
},
},
//外层线
{
type: 'pie',
center: ['50%', '50%'],
radius: ['92%', '93%'], //外层线粗细
hoverAnimation: false,
data: [
{
name: '',
value: 100,
labelLine: {
show: false,
},
itemStyle: {
color: 'rgba(68,118,255)',
},
emphasis: {
labelLine: {
show: false,
},
itemStyle: {
// color: "#5886f0"
},
},
},
],
},
//进度线
{
type: 'pie',
center: ['50%', '50%'],
radius: ['90%', '95%'], //进度线粗细
hoverAnimation: false,
data: [
{
name: '',
value: `${ReturnTicketRate}` - 0, //进度
labelLine: {
show: false,
},
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 2,
color: 'rgba(68,118,255)',
},
},
emphasis: {
labelLine: {
show: false,
},
itemStyle: {
// color: "#5886f0"
},
},
},
{
//画剩余的刻度圆环
name: '',
value: 100 - (`${ReturnTicketRate}` - 0),
itemStyle: {
color: 'rgba(0,0,0,0)',
},
label: {
show: false,
},
labelLine: {
show: false,
},
emphasis: {
labelLine: {
show: false,
},
itemStyle: {
color: 'rgba(68,118,255)',
},
},
},
],
},
],
};
ballChart.setOption(option);
});
return (
<>
<div
id="liquidFillChart2"
style={
{
width: '160px',
height: '160px',
}}
/>
</>
);
};
export default Liquidill;