ECharts 中的樣式簡介

  本文主要是大略概述，用哪些方法，可以在ECharts中設定樣式，改變圖形元素或者文字的顏色、明暗、大小等。

之所以用「樣式」這種可能不很符合數據視覺化思維的詞，是因為，比較通俗易懂。

  本文介紹這幾種方式，他們的功能範疇可能會有交叉（即同一種細節的效果可能可以用不同的方式實現），但是他們各有各的場景偏好。

• 顏色主題（Theme）
• 調色盤
• 直接樣式設定（itemStyle、lineStyle、areaStyle、label、...）
• 視覺對映（visualMap）

其他關於樣式的文章，參見：個性化圖表的樣式，數據的視覺對映。

1. 顏色主題（Theme）

  最簡單的更改全域性樣式的方式，是直接採用顏色主題（theme）。

  ECharts4 開始，除了一貫的預設主題外，新內建了兩套主題，分別為 'light' 和 'dark'。可以這麼來使用它們：

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

  或者

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

  其他的主題，沒有內建在 ECharts 中，需要自己載入。這些主題可以在 主題編輯器 (opens new window) 里訪問到。也可以使用這個主題編輯器，自己編輯主題。下載下來的主題可以這樣使用：

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

// 假設主題名稱是 "vintage"
$.getJSON('xxx/xxx/vintage.json', function (themeJSON) {
    echarts.registerTheme('vintage', JSON.parse(themeJSON))
    var chart = echarts.init(dom, 'vintage');
});

  如果儲存為 UMD 格式的 JS 檔案，那麼支援了自注冊，直接引入 JS 檔案即可：

// HTML 引入 vintage.js 檔案后（假設主題名稱是 "vintage"）
var chart = echarts.init(dom, 'vintage');
// ...

• 注：使用js來修改主題樣式的方式對於FastWeb的TUgEChart.Options不適用，因為js是寫在option 區域外的。

2. 調色盤

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

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

option = {
    // 全域性調色盤。
    color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],

    series: [{
        type: 'bar',
        // 此係列自己的調色盤。
        color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
        ...
    }, {
        type: 'pie',
        // 此係列自己的調色盤。
        color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
        ...
    }]
}

3. 直接的樣式設定 itemStyle, lineStyle, areaStyle, label, ...

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

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

  直接樣式設定的另一篇介紹，參見 個性化圖表的樣式。

4. 高亮的樣式：emphasis

  在滑鼠懸浮到圖形元素上時，一般會出現高亮的樣式。預設情況下，高亮的樣式是根據普通樣式自動產生的。但是高亮的樣式也可以自己定義，主要是通過 emphasis 屬性來定製。emphsis 中的結構，和普通樣式的結構相同，例如：

option = {
    series: {
        type: 'scatter',

        // 普通樣式。
        itemStyle: {
            // 點的顏色。
            color: 'red'
        },
        label: {
            show: true,
            // 標籤的文字。
            formatter: 'This is a normal label.'
        },

        // 高亮樣式。
        emphasis: {
            itemStyle: {
                // 高亮時點的顏色。
                color: 'blue'
            },
            label: {
                show: true,
                // 高亮時標籤的文字。
                formatter: 'This is a emphasis label.'
            }
        }
    }
}

  注意：在 ECharts4 以前，高亮和普通樣式的寫法，是這樣的：

option = {
    series: {
        type: 'scatter',

        itemStyle: {
            // 普通樣式。
            normal: {
                // 點的顏色。
                color: 'red'
            },
            // 高亮樣式。
            emphasis: {
                // 高亮時點的顏色。
                color: 'blue'
            }
        },

        label: {
            // 普通樣式。
            normal: {
                show: true,
                // 標籤的文字。
                formatter: 'This is a normal label.'
            },
            // 高亮樣式。
            emphasis: {
                show: true,
                // 高亮時標籤的文字。
                formatter: 'This is a emphasis label.'
            }
        }
    }
}

  這種寫法 仍然被相容，但是，不再推薦。事實上，多數情況下，使用者只會配置普通狀態下的樣式，而使用預設的高亮樣式。所以在 ECharts4 中，支援不寫 normal 的配置方法（即本文開頭的那種寫法），使得配置項更扁平簡單。

5. 通過 visualMap 元件設定樣式

visualMap 元件 能指定數據到顏色、圖形尺寸的對映規則，詳見 數據的視覺對映。