上周有一个需要，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值统一 那阐明咱们能够间接用%来示意 否则后端接口返回的值为 '-' 咱们再进行预处理