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
这里面有很多花里胡哨的特效