项目中需要实现水滴图 的应用搞了一下，效果还可以，感觉做的还是比较全面的有渐变色，颜色更改等措施。
效果图：
直接上代码：
<!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；
希望帮到大家。
68251051