项目中需要实现水滴图 的应用搞了一下，效果还可以，感觉做的还是比较全面的有渐变色，颜色更改等措施。
效果图：
直接上代码：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="container" style="height: 500px; width: 500px;"></div> </body> <script src="js/echarts.js" type="text/javascript" charset="utf-8"></script> <script src="js/echarts-liquidfill.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; option = null; option = { series: [{ type: 'liquidFill', data: [0.5], radius: '40%', shape: 'circle', center: ['25%', '25%'], outline: { show: false }, itemStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始 [ {offset: 0, color: '#153f4d'}, {offset: 0.5, color: '#19967a'}, {offset: 1, color: '#3feeae'} ] //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置 ) } }, },{ type: 'liquidFill', data: [0.4], radius: '30%', shape: 'circle', center: ['75%', '50%'], itemStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始 [ {offset: 0, color: '#f2694d'}, {offset: 0.5, color: '#f2694d'}, {offset: 1, color: '#f2694d'} ] //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置 ) } }, outline: { show: false }, label:{ normal:{ position:['50%','40%'],//此处调节显示的位置 前者是左右，后者是上下位置// formatter: '{a}n{b} Value: {c}', //{a}表示系列名，{b}为键名，{c}为值 textStyle:{ fontSize:14,//设置字体大小 } } } }] }; if(option && typeof option === "object") { myChart.setOption(option, true); } </script></html>echarts中的echarts.js和echarts-liquidfill.js可能会有出入建议用上传的这两个js。不然渐变色会有出入。
这是引用的js地址：https://pan.baidu.com/s/1Eq-LFuaWiQDQ5IWSJGoliA
提取密码：11h5；
希望帮到大家。