今天在开发当中遇到一个需求问题,我们使用ECharts的时候,展示饼状图默认2位小数,需要展示4位小数,在网上也没有找到比较好的案例,后来去了ECharts官网读取里面的api文档,现在把自己的代码展示出来,供大家参考,希望能帮到大家:
页面展示效果已经达到了,代码参照如下:
var theSer = {
type: 'liquidFill', // 水波图
data: [ //可以有多个水波
{
value: proportionList[i].bval, //所占比例 0-1
}
],
amplitude: 5, //波的振幅
waveLength: 150, //波长
waveAnimation: true,
animationEasing: 0,
animationEasingUpdate: 0,
animationDuration: 0,
animationDurationUpdate: 0,
radius: 164, //水波图的半径
center: [(i+1)*widthGap+(164/2)+i*164, '50%'], //圆心位置
itemStyle: {
normal: {
color: waterColor //水波的颜色
}
}, //波线的阴影
backgroundStyle: {
color: '#fff', //背景色
borderColor: '#fff',
borderWidth: 1,
shadowColor: '#ffffff',
shadowBlur: 20
}, //球状的背景颜色
outline: {
show: true, //true显示水波图上的文字
borderDistance: 6,
itemStyle: {
color: '#ffffff',
borderColor: waterColor,
borderWidth: 2,
shadowBlur: 30,
shadowColor: '#ffffff'
}
},
label: {
show: true,
color: '#294D99',
insideColor: '#fff',
fontSize: 50,
fontWeight: 'bold',
align: 'center',
baseline: 'middle',
position: 'inside',
normal: {
textStyle: {
color: waterColor, //本来的颜色
insideColor: 'white', //被淹没的颜色
fontSize: 30
},
show: true,
// formatter: '{c} ({d}%)', //自定义显示格式(b:name, c:value, d:百分比)
// formatter: '{c}%' //自定义显示格式(b:name, c:value, d:百分比)
formatter: function (a, b, c) {
console.log(a)
// console.log(b)
// console.log(c)
if(a.data.value == 1){
return 100+"%";
}else{
return parseFloat(a.data.value).toFixed(4)+"%";
}
},
},
},
};