水波图

效果如下： 可复制代码粘贴到 该地址里看效果： https://gallery.echartsjs.com/editor.html?c=xQO4HL3lp2

var arrVal = [0.26]
option = {
    title: {
        top: '33%',
        left: 'center',
        text: '剩余未发',
        textStyle: {
            color: 'rgba(0, 0, 0, 0.45)',
            fontWeight: 'normal',
            fontSize: 14
        },
        subtext: arrVal[0],
        subtextStyle: {
            color: 'rgba(0, 0, 0, 0.85)',
            fontSize: 18,
        }
    },
    series: [{
        type: 'liquidFill',
        radius: '90px',
        data: arrVal,
        color: ['#1890FF'], // 水波颜色
        label: {
            show: false
        },
        outline: {
            show: true,
            borderDistance: 1,
            itemStyle: {
                borderColor: '#1890FF',
                borderWidth: 2
            }
        },
        backgroundStyle: {
            color: '#fff' // 球内背景色
        }
    }]
};

 vue 使用方式：

那么如何引入vue项目，博主默认查阅本文的访客已在项目中安装了Echarts：

1）项目中作为项目依赖，安装到项目当中

npm install echarts-liquidfill --save

2）在需要使用水晶球的组件或页面里引入liquidFill.js

import 'echarts-liquidfill/src/liquidFill.js'; //在这里引入

html： 

<!-- 剩余未发 -->
<div id="Unissued" style=" 120px; height:130px;"></div>

  调用方法：  

  this.drawChart2('Unissued', [0.4])

方法： 
drawChart2 (id, data) {
        let _echarts = echarts.init(document.getElementById(id))
        _echarts.setOption({
          title: {
            top: '33%',
            left: 'center',
            text: '剩余未发',
            textStyle: {
              color: 'rgba(0, 0, 0, 0.45)',
              // fontWeight: 'normal',
              fontSize: 14
            },
            subtext: data[0],
            subtextStyle: {
              color: 'rgba(0, 0, 0, 0.85)',
              fontSize: 18
            }
          },
          series: [{
            type: 'liquidFill',
            radius: '90px',
            data: data,
            color: ['#1890FF'],
            label: {
              show: false
            },
            outline: {
              show: true,
              borderDistance: 1,
              itemStyle: {
                borderColor: '#1890FF',
                borderWidth: 2
              }
            },
            backgroundStyle: {
              color: '#fff'
            }
          }]
        })
      }