用Echarts写水波球并且附带外环

这种效果 外环随着数据的变化而变化

话不多说 上代码

---

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;