echarts水滴百分比效果：

<%@ page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%
	//清除缓存
	response.setHeader("Pragma","No-cache"); 
	response.setHeader("Cache-Control","no-cache"); 
	response.setDateHeader("Expires", 0);
	String ctx = request.getContextPath();
	if ("/".equals(ctx)) {
	    ctx = "";
	}
	request.setAttribute("ctx", ctx);
%>
<div id="main" style="width: 300px;height: 200px;border: 1px solid red;"></div>
<script src="../../js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="../../js/echarts.min.js" type="text/javascript"></script>
<script src="../../js/echarts-liquidfill.min.js" type="text/javascript"></script>
<script>
	$(function(){
		var myChart = echarts.init(document.getElementById('main'));
        var options = [ {
            series: [{
                type: 'liquidFill',
                data: [0.6, 0.5, 0.4, 0.3],
                radius: '100%',//设置水球铺满
                outline: {
                    show: false
                }
            }]
        }];
        myChart.setOption(options[0]);
        myChart.setOption({
			baseOption: options[0],
			media: [{
				query: {
					maxWidth: 300
				},
				option: {
					series: [{
						label: {
							normal: {
								textStyle: {
									fontSize: 46  //调节字体大小
								}
							}
						}
					}]
				}
			}]
		});
	});
</script>

自定义水球的方法：

可以到iconfont寻找实心的图标，然后通过在线svg工具提取svg图片中的图片字符串然后设置水球图option的path即可。

请您注意

·自觉遵守：爱国、守法、自律、真实、文明的原则
·尊重网上道德，遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
·严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的作品
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·您在NoteShare上发表的作品，NoteShare有权在网站内保留、转载、引用或者删除
·参与本评论即表明您已经阅读并接受上述条款