echarts 數據堆疊柱狀圖情況下設置圓角問題

前言

衆所周知,echarts是前端最受歡迎的一個可視化圖標庫,幾乎滿足了前端構建圖表的大部分需求,但是使用框架最大的問題可能就是框架的可擴展性,自定義性。不過主流框架也都很好的解決了這些問題,現在就echarts的柱狀圖數據堆疊怎麼給最上面的數據設置圓角進行說明

屬性說明

  1. 首先我們來看下正常情況下設置圓角:
    在這裏插入圖片描述
    這是官方示例,代碼如下:
    在這裏插入圖片描述
    看下效果:
    在這裏插入圖片描述
  2. 屬性stack
    官方說明:
    在這裏插入圖片描述
    示例代碼:
    在這裏插入圖片描述
    效果:
    在這裏插入圖片描述

問題與解決

現在像上面的柱狀圖堆疊情況下需要設置圓角,因爲不能保證哪個數據是最後出現在柱狀圖中的,所以不能固定給 series-baritemStyle 設置圓角,這是我們注意到官方文檔有這麼一條:
在這裏插入圖片描述
對的,我們可以對數據進行個性化設置,我們只需要進行判斷即可:我們從數組的最後一項,也就是最後一天往前依次去判斷,如果當前項數據爲0,則給當前項設置個性化參數 itemStyle ,如果不爲0,則繼續往前,直到第一項爲止。

  • 好了我們看下示例代碼:
    在這裏插入圖片描述
    最終獲得的數據即爲個性化設置後的,我們使用即可:
    在這裏插入圖片描述

結語

學習與使用echarts必須得學會去看它的配置項文檔,有針對性的去查找跟本身問題相關的屬性說明,一般都會得到問題的答案,希望這篇文章能夠幫到你,有問題歡迎討論與指正