上周有一個需求，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值一致 那說明我們可以直接用%來表示 否則后端接口返回的值為 '-' 我們再進行預處理

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的echarts代码格式化_echarts水球图格式化Format使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。