这种效果 外环随着数据的变化而变化
话不多说 上代码
Api 解释
他的type类型要是 type: 'liquidFill', 这种就是形成了水波球。
radius:是可以控制水波图的整个在div里占比大小的。
backgroundStyle: 设置水波球的背景颜色 , 和填充色不一样。
label: 标题 就不显示了 我这边没删代码 用的副标题 感觉副标题好用一些。
color 就是填充的颜色 他这个可以选渐变 colorStops 这个是设置渐变色的。
其他的这些配置 如果要求都是带外环的水波图 可以直接把代码复制过去 , 把颜色改一下就ok
center 是控制外环的显示位置 。 radius 是控制线条的粗细 第一项是内半径,第二项是外半径。
第一次写也不知道说什么 有不明白的地方可以私信我 。希望能给大家带来帮助 。
question
有一个问题就是我当时写这个的时候 查资料说需要下载安装包 echarts-liquidfill
但是我查了一下这个官网已经关了 只有github源码还在,当时npm下载的时候是这样 是空的
但是在node_modules中还是可以看到这个文件。 于是我尝试引入 但是报错找不到这个
2022.1.13
现在我看npm 已经是有了的
我后来把项目中的引入这条注释掉了 发现也不影响水波球 。 不知道什么原因。
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;