echarts水球图-动态波纹百分比数据显示

最近帮助朋友根据ued图学习设计了一个echarts水球图，觉得还蛮有意思的，在这记录一下（注意：下方有调试入口）

---

具体效果：

废话不多说，在这先给大家看一下是什么样子的效果，会不会是你以后也会用到的：

 看看，这种带比例的echarts是不是很像个水球，随着比例变动水位不断变化，再看看那一圈圈涟漪（ps：就这些‘涟漪’开始麻烦死了……）

---

进入正题：

废话不多说，直接上代码，希望对你有帮助：

function Pie() {
  let dataArr = [];
  for (var i = 0; i < 150; i++) {
      if (i % 2 === 0) {
          dataArr.push({
              name: (i + 1).toString(),
              value: 50,
              itemStyle: {
                  normal: {
                      color: "#00AFFF",
                      borderWidth: 0,
                      borderColor: "rgba(0,0,0,0)",
                  }
              }
          })
      } else {
          dataArr.push({
              name: (i + 1).toString(),
              value: 100,
              itemStyle: {
                  normal: {
                      color: "rgba(0,0,0,0)",
                      borderWidth: 0,
                      borderColor: "rgba(0,0,0,0)"
                  }
              }
          })
      }
  }
  return dataArr
}
 options：{
    backgroundColor: 'transparent', // 画布背景色
    // title: {
    //   text: '',
    //   textStyle: {
    //     fontWeight: 'normal',
    //     fontSize: 25,
    //     color: 'rgb(97, 142, 205)'
    //   }
    // },
    series: [
      {
        // value: 50, //  内容 配合formatter
        type: 'liquidFill',
        radius: '70%', // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
        center: ['50%', '50%'],
        data: [0.87, {
          value: 0.87,
          direction: 'left', //波浪方向
        }], // data个数代表波浪数
        backgroundStyle: {
          borderWidth: 1,
          color: 'rgba(62, 208, 255, 1)' // 球体本景色
        },
        amplitude: '6  %',//波浪的振幅
        // 修改波浪颜色
        // color: ['#0286ea', 'l#0b99ff'], // 每个波浪不同颜色，颜色数组长度为对应的波浪个数
        color: [{
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 1,
              color: '#6CDEFC',
            },
            {
              offset: 0,
              color: '#429BF7',
            },
          ],
          globalCoord: false,
        },
        ],
        label: {
          normal: {
            // formatter: 0.87 * 100 + '\n%',
            formatter: 0.87 * 100+'\n{d|%}',
            //  formatter: function(params){
            //     return params.value* 100 + " \n%";
            // },
            rich: {
              d: {
                fontSize: 20,
              }
            },
            textStyle: {
              fontSize: 36,
              color: '#fff'
            }
          },

        },
        outline: {
          show: false
        }
      },
      {
        type: 'pie',
        z: 1,
        center: ['50%', '50%'],
        radius: ['72%', '73.5%'], // 控制外圈圆的粗细
        hoverAnimation: false,
        data: [
          {
            name: '',
            value: 500,
            labelLine: {
              show: false
            },
            itemStyle: {
              color: '#00AFFF'
            },
            emphasis: {
              labelLine: {
                show: false
              },
              itemStyle: {
                color: '#00AFFF'
              }
            }
          }
        ]
      },
      { //外发光
        type: 'pie',
        z: 1,
        zlevel: -1,
        radius: ['70%', '90.5%'],
        center: ["50%", "50%"],
        hoverAnimation: false,
        clockWise: false,
        itemStyle: {
          normal: {
            borderWidth: 20,
            color: 'rgba(224,242,255,1)',
          }
        },
        label: {
          show: false
        },
        data: [100]
      },
      { //底层外发光
        type: 'pie',
        z:1,
        zlevel: -2,
        radius: ['70%', '100%'],
        center: ["50%", "50%"],
        hoverAnimation: false,
        clockWise: false,
        itemStyle: {
          normal: {
            borderWidth: 20,
            color: 'rgba(224,242,255,.4)',
          }
        },
        label: {
          show: false
        },
        data: [100]
      },
      // 虚点
      {
        type: 'pie',
        zlevel: 0,
        silent: true,
        radius: ['78%', '80%'],
        z: 1,
        label: {
            normal: {
                show: false
            },
        },
        labelLine: {
            normal: {
                show: false
            }
        },
        data: Pie()
    },
    ]
  }

具体的根据自己的项目需求找到对应的参数字段进行配置，进行修改

ps：水球涟漪，一层一层……自己看着搞

附调试地址：Echarts Demo

---

都这么直接了，拿去用，不用谢，具体的一些配置参数，可以去echarts官网查阅

实在不明白欢迎骚扰交流

往期echarts相关文章：

​​​​​​Vue echarts初始化实例Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined“_一往直“前”，直上云“端”-CSDN博客

https://www.isqqw.com/echartsdetail?id=16212

水球图

彩虹桥-多层级仪表盘进度

多层级半圆形进度条