echarts水波球特效,根据data值改变颜色

echarts水波球特效

效果图

cdn

    <script src="http://echarts.baidu.com/resource/echarts-liquidfill-1.0.4/dist/echarts-liquidfill.js" type="text/javascript" charset="utf-8"></script>

代码

    var num1=['0.7']
    var borderColor1='#0d6393' //蓝色
	var color1='#173b66' //蓝色
	var bgColor1='#098fc2'//蓝色
	var borderColor2='#208e77' //绿色
	var color2='#1e4c65' //绿色
	var bgColor2='#2e9180'//绿色
	var borderColor3='#7c4465' //红色
	var color3='#4a476a' //红色
	var bgColor3='#a77575'//红色
function typeEcharts1(num1) {
		var myChart = echarts.init(document.getElementById('type_echarts1'));
		// 指定图表的配置项和数据
		var bgcolor=''
		var borcolor=''
		var color=''
		var num=Number(num1[0])
		if(num<0.5){
			bgcolor=bgColor3
			borcolor=borderColor3
			color=color3
		}
	    if(num>=0.5 && num<0.8){
			bgcolor=bgColor1
			borcolor=borderColor1
			color=color1
		}
		if(num>=0.8){
			bgcolor=bgColor2
			borcolor=borderColor2
			color=color2
		}
		var option = {
			series: [{
				type: 'liquidFill',
				data: num1,
				radius:'70%',
				color:bgcolor,
				backgroundStyle: {
					color: color,
					borderWidth: 2,
					borderColor: borcolor,
				},
				outline: {
					show: false
				},
				label: {
					normal: {
						position: ['38%', '40%'],
						formatter: function() {
							return '';
						},
						textStyle: {
							fontSize: 40,
							color: '#D94854'
						}
					}
				}
			}]
		};

		myChart.setOption(option);
	}
	typeEcharts1(num1)

data为数组

https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~query=liquidFill~author=all

这里面有很多花里胡哨的特效