ECharts實現動態切換主題樣式

2021-10-02 19:14:52 字數 419 閱讀 3463

echarts4 開始,除了一貫的預設主題外,新內建了兩套主題,分別為'light''dark'。使用方法如下:

var chart = echarts.init(dom, 'light');

主題可以在 主題編輯器裡面找到,也可以自己定義主題。如果主題儲存為 json 檔案,那麼可以自行載入和註冊(參考文件)。

動態修改主題方法如下:

利用主題實現,預設有二種,也可自定義主題,或者利用官網提供的主題工具實現

調色盤,修改預設的樣式顏色

直接的樣式設定 itemstyle, linestyle, areastyle, label等

高亮的樣式:emphasis>

參考文件

Web 站點動態主題切換實現

最近調研 web 站點動態主題切換的實現,記錄如下 站點維護多套主題,動態替換不同主題檔案 在客戶端載入 less 通過的 less 的 modifyvars 在瀏覽器中動態修改主題 在入口 index.html 引入 less.min.js 在入口 index.html 引入主題色檔案 theme...

easyui動態切換主題

easyui換主題,並記錄在cookie 首先將easyui的樣式檔案加入乙個id,這裡命名為easyuitheme,然後在樣式檔案下面加入乙個js檔案 changeeasyuitheme.js檔案的內容是 function changethemefun themename katex parse ...

nz zorro 主題切換 動態

npm i less d less plugin clean css d以黑暗主題為例,使用less編譯應用的樣式入口檔案,並且在modifyvars引數中替換樣式變數,並輸出到目標位置。在目錄下建立theme.js檔案,然後拷貝如下 中的path需要修改為,專案的路徑,可以是相對路徑,不過我用的絕...