用echarts实现水滴图效果

老规矩，看效果先：（这里的水滴是动态的）

注意，这里是使用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