上周，有需求。echarts的水球图要显示出来，因为后台数据可能会返回'-'，所以需要动态显示。首先会有四个返回值，分别代表本周/月和本周的百分比。/本月具体值因此，对该产品提出了需求。如果后台接口返回本周的'-'，则显示本周的具体值。这个月也是如此。因为对这种水球了解不多，所以现在想到了一种方法，写两个小球，在-的时候用v-if/v-show显示隐藏，但是这个方法控制的太很多，所以有bug！所以，我直接格式化数据。先看代码：waterInit(paramUp){//上升水球图letwaterUp=this.$echarts.init(document.querySelector("#water-polo-map-up"));让optionUp={系列：[{类型：“liquidFill”，数据：[{value：paramUp=='-'？this.txDataCount.txNumByNowWeek:paramUp/100,//百分比方向:"left",itemStyle:{normal:{color:"#226BE2"}}}],//图像填充整个画布半径:"99%",backgroundStyle:{borderWidth:2,borderColor:"#226BE2",color:"#F0F0F0"},outline:{show:false},label:{normal:{formatter:function(param){让paramVal=String((param.data.value*100));if(paramVal==paramUp){//如果值相同，则表示需要%符号if((String(paramVal).length>4)){returnparamVal.slice(0,4)+'+%';}else{返回`${paramVal}%`；}}else{letparamVal=String((param.data.value));//取值不一致如果表示需要+号，不需要百分号，事务数不需要百分比if(String(paramVal).length>4){returnparamVal.slice(0,4)+'+';}else{返回`${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是因为水球图默认自动转换成百分比）因为之前还有其他需求，这里需要多做处理。4??我们还有一个要求，如果多了只能显示4位，用最后的+号，所以我会比较判断初始值（paramUp和echatrs图片中实际渲染的值）5??通过比较，如果初始值和实际渲染值一样，说明我们可以直接用%来表示，否则后端接口返回的值为'-'，我们会进行预处理
