最近在写看板，经常用到下面的百分率的展示形式。也可能是用饼图展示的。
看板中经常用到下图中的水球样式：其实就是个百分率的展示；
水球样式和饼图的区分：
水球里面是有个水波纹的动效的，除此之外，基本都是一样的。
分析一下上图中的水球：
1.外面的一圈：其实是通过border来实现的2.里面的圆圈+百分比+波纹展示：通过echarts中的水球样式可以实现
1.引入jq+echarts+echarts-liquidfill文件——请百度后自行下载以下的文件
如果需要以下的文件，可以留个邮箱，我看到后会发到指定邮箱里面
<script src="/Scripts/jquery-3.4.1.min.js"></script><script src="/Content/plugins/echarts.min.5.0.js"></script><script src="~/Content/plugins/echarts-liquidfill.min.js"></script>
2.html代码
<li class="ballChartsListItem"><div class="fl_txt"><span>当月<br>毛利率</span></div><div class="fr" id="ballCharts_s1"></div></li>
3.css代码
.ballChartsListItem {display: flex;justify-content: space-around;align-items: center;width:100%;}.fl_txt {font-size: 24px;color: #f90;font-weight: bold;}.fr{width: 128px; height: 128px; border-radius: 50%; border: 10px solid #533924; margin: 0 5px;}
4.jq代码
入参如下：
1. id:显示水球的dom元素的id2. data:展示的百分比数值，比如30%,传入0.3即可
使用方法：
ballCharts('ballCharts_s1', 0.17);
封装的方法如下：
ballCharts(id, data) {var ball = echarts.init(document.getElementById(id));let obj = {backgroundColor: 'transparent',title: [{text: (data * 100).toFixed(0) + '%',left: '50%',top: '40%',textAlign: 'center',textStyle: {fontSize: '20',fontWeight: '400',color: '#fff',textAlign: 'center',textBorderColor: 'rgba(0, 0, 0, 0)',textShadowColor: '#000',textShadowBlur: '0',textShadowOffsetX: 0,textShadowOffsetY: 1,},},],polar: {radius: ['82%', '80%'],center: ['50%', '50%'],},angleAxis: {max: 100,clockwise: false,axisLine: {show: false,},axisTick: {show: false,},axisLabel: {show: false,},splitLine: {show: false,},},radiusAxis: {type: 'category',show: true,axisLabel: {show: false,},axisLine: {show: false,},axisTick: {show: false,},},series: [{type: 'liquidFill',radius: '80%',z: 1,center: ['50%', '50%'],amplitude: 10,color: {type: 'linear',x: 0,y: 0,x2: 1,y2: 1,colorStops: [{offset: 0,color: '#f90',},{offset: 1,color: 'rgba(68,144,144,.5)',},],globalCoord: false,},data: [data,{value: data,direction: 'left',},],backgroundStyle: {borderWidth: 1,color: 'transparent',},label: {normal: {formatter: '',},},outline: {show: true,itemStyle: {borderWidth: 0,},borderDistance: 0,},},{name: '',type: 'bar',roundCap: true,showBackground: true,backgroundStyle: {color: '#15181e',},data: [150],coordinateSystem: 'polar',color: "#f90",},],}ball.setOption(obj);};
完成！！！多多积累，多多收获！
