共计 1518 个字符,预计需要花费 4 分钟才能阅读完成。
上周有一个需要,echarts 的水球图要做展现,因为后盾数据有可能值会返回 ’-‘,所以须要动静展现,首先返回值会有四个,别离示意本周 / 本月百分率以及本周 / 本月具体数值所以,产品提了一个需要当后端接口如果返回本周 ’-‘ 那就展现本周具体数值,本月也是一样的情理
因为对这种水球不太理解,所以当下想了一个办法,再写两个小球,当为 - 的时候用 v -if/v-show 来做显示暗藏~然而这种办法管制的太多了,所以有 bug!于是乎,我间接将数据格式化
咱们先来看代码:
waterInit(paramUp) {
// 回升的水球图
let waterUp = this.$echarts.init(document.querySelector("#water-polo-map-up")
);
let optionUp = {
series: [
{
type: "liquidFill",
data: [
{
value:paramUp == '-' ? this.txDataCount.txNumByNowWeek:paramUp/100, // 百分比
direction: "left",
itemStyle: {
normal: {color: "#226BE2"}
}
}
],
// 图像占满整个画布
radius: "99%",
backgroundStyle: {
borderWidth: 2,
borderColor: "#226BE2",
color: "#F0F0F0"
},
outline: {show: false},
label: {
normal:{formatter:function(param){let paramVal = String((param.data.value*100));
if(paramVal == paramUp){
// 值统一的话 就阐明须要 % 号
if((String(paramVal).length > 4)){return paramVal.slice(0, 4) + '+%';
}
else{return `${paramVal}%`;
}
}else{let paramVal = String((param.data.value));
// 值不统一的话 就阐明须要 + 号 不须要百分号 事务数不须要百分比
if(String(paramVal).length > 4){return paramVal.slice(0, 4) + '+';
}
else{return `${paramVal}`;
}
}
},
textStyle: {
show: true,
color: "#294D99",
insideColor: "#fff",
fontSize: 24,
fontWeight: "400",
align: "center",
baseline: "top",
position: "inside"
}
},
}
}
]
};
waterUp.setOption(optionUp);
当初来梳理一下代码逻辑(本代码示意本周的水球图):
1⃣️ 首先调用 waterInit
办法 参数为 paramUp 示意本周返回的百分比 后端接口可能返回是百分比也可能返回 ‘-‘
2⃣️ 咱们在 data 的 value 属性中:来用三元表达式判断如果为 ’-‘ 的话就显示具体值 否则就显示失常的百分比(至于为什么要 /100 是因为水球图主动默认会转换成百分比)因为之前还有别的需要 所以我这边须要多解决
3⃣️ 在 formatter 接管参数 获取到 data 的值 就是水波图显示的失常数值
4⃣️ 咱们还有个需要就是只能显示 4 位数 多余的话用前面拼接 + 号 所以我这边会判断初始值(paramUp 与实在渲染在 echatrs 图里的 value 值)通过比照
5⃣️ 通过比照如果初始值与实在渲染的 value 值统一 那阐明咱们能够间接用 % 来示意 否则后端接口返回的值为 ‘-‘ 咱们再进行预处理
正文完