使用echarts-liquidfill.js的水球,水球上顯示的文字可以使用chartOption.series[0].label.normal.formatter設置,想顯示什么顯示什么。
水球插件下載地址
https://files.cnblogs.com/files/tong2018/echarts-liquidfill-master.zip
var chartOption = {
title: {
subtext: '',
subtextStyle: {
fontSize : 14,
fontFamily:'serif',
color: '#ffffff'
},
top: '80%',
textAlign: 'center',
left: '50%'
},
series: [{
color: ['#86FDFD'],//水波顏色
type: 'liquidFill',
waveAnimation: false,//是否流動水球
animation: false,
radius: '55%',
waveLength: '80%',//波長
waveHeight: '60',//波長
amplitude: '8%',//振幅
outline: {
show: true,
borderDistance: 4,//內環寬
itemStyle: {
color: '#14297b',//內環色
borderColor: '#86FDFD',//外環色
borderWidth: 7//外環寬
}
},
backgroundStyle: {
color: '#14297b'//水球背景色
},
label: {
normal: {
formatter:"34.34%",//水球上顯示文字,可以設置任意文字
show: true,
textStyle: {
color:'#ffffff',//水球顯示文字顏色
fontSize: '22',
fontFamily:'serif',
fontWeight: '100'
}
}
},
data: [0.34]
}]
};