ECharts 樣式設定介紹

導讀	ECharts 可以透過樣式設定來改變圖形元素或者文字的顏色、明暗、大小等。

ECharts4 開始，除了預設主題外，內建了兩套主題，分別為 light 和 dark。

使用方式如下：

例項

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

另外，我們也可以在官方的 主題編輯器 選擇自己喜歡的主題下載。

目前主題下載提供了 JS 版本和 JSON 版本。
如果你使用 JS 版本，可以將 JS 主題程式碼儲存一個 主題名.js 檔案，然後在 HTML 中引用該檔案，最後在程式碼中使用該主題。
比如上圖中我們選中了一個主題，將 JS 程式碼儲存為 wonderland.js。

例項

-- 引入主題 --

如果主題儲存為 JSON 檔案，那麼可以自行載入和註冊。

比如上圖中我們選中了一個主題，將 JSON 程式碼儲存為 wonderland.json。

例項

主題名稱是 wonderland
$.getJSON,  themeJSON

調色盤可以在 option 中設定。

調色盤給定了一組顏色，圖形、系列會自動從其中選擇顏色。

可以設定全域性的調色盤，也可以設定系列自己專屬的調色盤。

option

全域性調色盤例項：

例項

series

直接的樣式設定是比較常用設定方式。縱觀 ECharts 的 option 中，很多地方可以設定 itemStyle、lineStyle、areaStyle、label 等等。這些的地方可以直接設定圖形元素的顏色、線寬、點的大小、標籤的文字、標籤的樣式等等。

一般來說，ECharts 的各個系列和元件，都遵從這些命名習慣，雖然不同圖表和元件中，itemStyle、label 等可能出現在不同的地方。

直接樣式設定的另一篇介紹，參見 ECharts 餅圖。

在滑鼠懸浮到圖形元素上時，一般會出現高亮的樣式。預設情況下，高亮的樣式是根據普通樣式自動生成的。

如果要自定義高亮樣式可以透過 emphasis 屬性來定製：

例項

emphasis 
    itemStyle 
        
        color 
    
    label 
        show 
        
        formatter

原文來自 ：