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值一致 那說明我們可以直接用%來表示 否則后端接口返回的值為 '-' 我們再進行預處理
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的echarts代码格式化_echarts水球图格式化Format使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： lisp 批量文字求差值_Python
- 下一篇： websocket 连接本地端口_聊聊