echarts水球图格式化Format使用

上周有一个需求，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值一致 那说明我们可以直接用%来表示 否则后端接口返回的值为 '-' 我们再进行预处理