海報級設計感的旭日圖，就在 ECharts 4.0

時間 2019-11-30

標籤海報設計旭日就在 echarts 4.0 简体版

原文原文鏈接

2018 年 1 月 16 日 ECharts 發佈了 4.0，其中包括一種新的圖表系列——旭日圖。html

普通旭日圖：node

文藝旭日圖：數組

2B 旭日圖——這貨真的長得像個旭日啊 щ(ﾟДﾟщ)：bash

可能你們印象中的旭日圖就只能作到上面「普通旭日圖」的樣子了，很難想象這麼有設計感的做品，竟然能夠是經過配置項寫出來的吧？（羨婆賣瓜~）數據結構

由於這但是 ECharts 家的旭日圖呀！echarts

除了顏值以外，咱們還提供了豐富的功能使得旭日圖更加好用，包括：數據下鑽、視覺映射、多種高亮方式及交互處理等等。咱們力求用（黑）科技讓可視化變得更簡單，只要跟着這篇教程，就能輕鬆上手！ui

（上課鈴聲響起~~~）spa

你們對「旭日圖」（Sunburst）這個名稱可能有些陌生，但事實上在咱們推出旭日圖以前，在 ECharts 做品展現平臺 Gallery 上，已經有用戶使用很是 naive 的方式本身折騰出旭日圖了——設計

用多層餅圖實現的「旭日圖」，來自社區的做品： ECharts Gallery

旭日圖（Sunburst）由多層的環形圖組成，在數據結構上，內圈是外圈的父節點。所以，它既能像餅圖同樣表現局部和總體的佔比，又能像矩形樹圖同樣表現層級關係。
3d

引入相關文件

旭日圖是 ECharts 4.0 新增的圖表類型，在官網下載頁面下載「完整版」 ECharts，並將下載的 JavaScript 文件引入便可建立旭日圖。

最簡單的旭日圖

建立旭日圖須要在 series 配置項中聲明類型爲 'sunburst' 的系列，而且以樹形結構聲明其 data：

var option = {
    series: {
        type: 'sunburst',
        data: [{
            name: 'A',
            value: 10,
            children: [{
                value: 3,
                name: 'Aa'
            }, {
                value: 5,
                name: 'Ab'
            }]
        }, {
            name: 'B',
            children: [{
                name: 'Ba',
                value: 4
            }, {
                name: 'Bb',
                value: 2
            }]
        }, {
            name: 'C',
            value: 3
        }]
    }
};複製代碼

獲得如下結果：

顏色等樣式調整

默認狀況下會使用全局調色盤 color 分配最內層的顏色，其他層則與其父元素同色。在旭日圖中，扇形塊的顏色有如下三種設置方式：

在 series.data.itemStyle 中設置每一個扇形塊的樣式；
在 series.levels.itemStyle 中設置每一層的樣式；
在 series.itemStyle 中設置整個旭日圖的樣式。

上述三者的優先級是從高到低的，也就是說，配置了 series.data.itemStyle 的扇形塊將會覆蓋 series.levels.itemStyle 和 series.itemStyle 的設置。

下面，咱們將總體的顏色設爲灰色 '#aaa'，將最內層的顏色設爲藍色 'blue'，將 Aa、B 這兩塊設爲紅色 'red'。

var option = {
    series: {
        type: 'sunburst',
        data: [{
            name: 'A',
            value: 10,
            children: [{
                value: 3,
                name: 'Aa',
                itemStyle: {
                    color: 'red'
                }
            }, {
                value: 5,
                name: 'Ab'
            }]
        }, {
            name: 'B',
            children: [{
                name: 'Ba',
                value: 4
            }, {
                name: 'Bb',
                value: 2
            }],
            itemStyle: {
                color: 'red'
            }
        }, {
            name: 'C',
            value: 3
        }],
        itemStyle: {
            color: '#aaa'
        },
        levels: [{
            // 留給數據下鑽的節點屬性
        }, {
            itemStyle: {
                color: 'blue'
            }
        }]
    }
};複製代碼

效果爲：

按層配置樣式

旭日圖是一種有層次的結構，爲了方便同一層樣式的配置，咱們提供了 levels 配置項。它是一個數組，其中的第 0 項表示數據下鑽後返回上級的圖形，其後的每一項分別表示從圓心向外層的層級。

例如，假設咱們沒有數據下鑽功能，而且但願將最內層的扇形塊的顏色設爲紅色，文字設爲藍色，能夠這樣設置：

series: {
    // ...
    levels: [
        {
            // 留給數據下鑽點的空白配置
        },
        {
            // 最靠內測的第一層
            itemStyle: {
                color: 'red'
            },
            label: {
                color: 'blue'
            }
        },
        {
            // 第二層 ...
        }
    ]
}複製代碼

在實際使用的過程當中，你會發現按層配置樣式是一個很經常使用的功能，可以很大程度上提升配置的效率。

數據下鑽

旭日圖默認支持數據下鑽，也就是說，當點擊了扇形塊以後，將以該扇形塊的數據做爲根節點，便於進一步瞭解該數據的細節。

當數據下鑽後，中間會出現一個用於返回上一層的圖形，該圖形的樣式能夠經過 levels[0] 配置。

若是不須要數據下鑽功能，能夠經過將 nodeClick 設置爲 false 關閉；或者將其設爲 'link'，並將 data.link 設爲點擊扇形塊對應打開的連接。

高亮相關扇形塊

旭日圖支持鼠標移動到某扇形塊時，高亮相關數據塊的操做，能夠經過設置 highlightPolicy，包括如下幾種高亮方式：

'descendant'（默認值）：高亮鼠標移動所在扇形塊與其後代元素；
'ancestor'：高亮鼠標所在扇形塊與其祖先元素；
'self'：僅高亮鼠標所在扇形塊；
'none'：不會淡化（downplay）其餘元素。

上面提到的「高亮」，對於鼠標所在的扇形塊，會使用 emphasis 樣式；對於其餘相關扇形塊，則會使用 highlight 樣式。經過這種方式，能夠很方便地實現突出顯示相關數據的需求。

具體來講，對於配置項：

itemStyle: {
    color: 'yellow',
    borderWidth: 2,
    emphasis: {
        color: 'red'
    },
    highlight: {
        color: 'orange'
    },
    downplay: {
        color: '#ccc'
    }
}複製代碼

highlightPolicy 爲 'descendant' 或 'ancestor' 的效果分別爲：