乐趣区

关于vue.js:echarts水球图格式化Format使用

jiezi


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

退出移动版