老规矩，看效果先：(这里的水滴是动态的)
注意，这里是使用echarts,除了原先的echarts.js外还得引入一个水滴图用的js===echarts-liquidfill.js
可以官网也可以等到最下面，会有网盘地址，去提取下：
var arrWatter1={};
arrWatter1.warterId = 'water_echarts_hd';
arrWatter1.data=[
{"newdata":"5555","toldata":"10000"}
];
var myChart = echarts.init(document.getElementById(arr.warterId));
var value = arr.data[0].newdata;//水滴中间显示的数据
var toldata = arr.data[0].toldata;//该水滴的总数据
var num = parseFloat(value/toldata);
var data = [];
data.push(num);
option = {
series: [{
type: 'liquidFill',
data: data,
radius: '80%',
center: ['50%', '50%'],//所在位置
// shape: 'pin'气球效果 ;'roundRect'方形效果;'diamond',菱形效果
backgroundStyle: {
// borderWidth: 10,//内边框粗细
// borderColor: 'red',//内边框颜色
color: '#013044'//底色
},
itemStyle: {
normal: {
color: '#18a0d9'
}
},
label: {
normal: {
// formatter: value * 100 + '%',//显示所有小数位
formatter: function (val) {
return val.data*toldata;
},
textStyle: {
fontSize: 50, //字体大小
color: '#fff',
// insideColor: "red",
}
}
},
outline: {
show: true//边框
}
// waveAnimation: false, // 禁止左右波动
}]
};
myChart.setOption(option);
有问题欢迎来一起交流
附带：echarts-liquidfill.js
网盘地址：https://pan.baidu.com/s/1anuPNk3eFO_Dey2kPT4NuA? ? 提取码：hzig
另外：附带官网有关水滴图的地址：https://www.echartsjs.com/download-extension.html
15450798