ECharts 圖表組成

上一節(jié)的學(xué)習(xí)，我們通過(guò)自己的努力完成了一個(gè)簡(jiǎn)單的小案例，大家也再網(wǎng)頁(yè)中看到自己優(yōu)秀的作品。但是可能同學(xué)們會(huì)疑問(wèn)了，為啥我的圖表就光禿禿的，別人的圖表都是內(nèi)容豐富功能齊全呢?這個(gè)小節(jié)我們就看一看“別人的”圖表都有些什么組件吧。但是記得哦~ 別人的不一定是最好的，適合自己的才是最好的，要根據(jù)自己的實(shí)際需求擇優(yōu)選擇。

1. 簡(jiǎn)介

為了更好地應(yīng)用 ECharts 做可視化開(kāi)發(fā)，有必要在深入學(xué)習(xí)前對(duì)圖表的組成做一次簡(jiǎn)單的總覽。完整的 ECharts 圖表包含如下部分：

1.1 標(biāo)題 title

title 組件用于渲染圖表的標(biāo)題，含主標(biāo)題、副標(biāo)題兩部分。 title 組件支持配置位置、文本樣式、鏈接模式等，詳情可參考 Echarts 標(biāo)題 title 一節(jié)。

1.2 提示框 tooltip

當(dāng)鼠標(biāo)懸停在圖表的某點(diǎn)或坐標(biāo)軸的某個(gè)值上時(shí)，以浮層方式展示該點(diǎn)數(shù)據(jù)信息的組件。提示框內(nèi)提示的信息還可以通過(guò)格式化函數(shù)動(dòng)態(tài)指定，詳情可參考 Echarts 提示框 tooltip 一節(jié)。

1.3 圖例 legend

圖例是圖表的輔助視覺(jué)引導(dǎo)組件，用以解釋說(shuō)明圖表中各數(shù)據(jù)序列的含義及圖表中數(shù)據(jù)的篩選。詳情可參考 Echarts 圖例 legend 一節(jié)。

1.4 工具欄 toolbox

圖表操作工具欄，內(nèi)置導(dǎo)出圖片、數(shù)據(jù)視圖、動(dòng)態(tài)圖表類(lèi)型切換、數(shù)據(jù)區(qū)域縮放、重置五種工具，但不支持自定義擴(kuò)展，詳情可參考 Echarts 工具欄 toolbox 一節(jié)。

1.5 視覺(jué)映射 visualMap

視覺(jué)映射組件可將圖表數(shù)據(jù)投影到視覺(jué)通道上，例如通過(guò)連續(xù)變化的顏色反應(yīng)圖表的數(shù)值變化。visualMap 組件還支持用戶選定指定范圍的數(shù)據(jù)進(jìn)行展示，詳情可參考 visualMap。

1.6 時(shí)間線 timeline

timeline 組件提供了一種在多個(gè) option 間連續(xù)切換，重新渲染圖表視圖的能力。通常用在圖表基本配置不變，但圖表數(shù)據(jù)持續(xù)變動(dòng)的場(chǎng)景，詳情可參考 timeline。

1.7 數(shù)據(jù)范圍 dataZoom

dataZoom 組件用于實(shí)現(xiàn)圖表區(qū)域縮放功能，讓用戶能夠自由聚焦在某片數(shù)據(jù)區(qū)域，又或是概覽全局?jǐn)?shù)據(jù)。dataZoom 組件分內(nèi)置型、滑動(dòng)條型、框選型三種，詳情可參考 datazoom。

2. 坐標(biāo)系組件

除上述通用組件外，ECharts 還劃分出一系列組件用于聲明坐標(biāo)系的特征屬性。坐標(biāo)系組件與圖表關(guān)系密切，部分圖表需要有特定的坐標(biāo)系作為容器才能正常渲染，ECharts 目前支持如下坐標(biāo)系：

1. 直角坐標(biāo)系，通過(guò) grid、xAxis、yAxis 組件實(shí)現(xiàn)。
2. 極坐標(biāo)系，通過(guò) polar、angleAxis、radiusAxis 組件實(shí)現(xiàn)，詳情可參考 Echarts 極坐標(biāo)系 一節(jié)。
3. 地圖坐標(biāo)系，通過(guò) geo 組件實(shí)現(xiàn)，詳情可參考 Echarts 地圖坐標(biāo)系 一節(jié)。
4. 平行坐標(biāo)系，通過(guò) parallelAxis、parallel 組件實(shí)現(xiàn)，詳情可參考 parallelAxis。
5. 日歷坐標(biāo)系，通過(guò) calendar 組件實(shí)現(xiàn)，詳情可參考 calendar
6. 雷達(dá)坐標(biāo)系，通過(guò) radar 組件實(shí)現(xiàn)，詳情可參考 radar

3. 小結(jié)

ECharts 組成組件 本節(jié)主要講述 Echarts 圖表的構(gòu)成元素，以及常見(jiàn)的坐標(biāo)體系，這些元素在 Echarts 中被定義為所謂的“組件”，Echarts 正是通過(guò)這些組件形式對(duì)外暴露出豐富而一致的配置邏輯。熟練掌握這些組件的形態(tài)于用法，能夠幫助使用者快速搭建理想的圖表應(yīng)用。