echarts代码格式化_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值一致 那说明我们可以直接用%来表示 否则后端接口返回的值为 '-' 我们再进行预处理