項目中需要實現水滴圖 的應用搞了一下，效果還可以，感覺做的還是比較全面的有漸變色，顏色更改等措施。
效果圖：
直接上代碼：
<!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；
希望幫到大家。