ECharts 圖表組成

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

1. 簡介

為了更好地應用 ECharts 做可視化開發(fā)，有必要在深入學習前對圖表的組成做一次簡單的總覽。完整的 ECharts 圖表包含如下部分：

1.1 標題 title

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

1.2 提示框 tooltip

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

1.3 圖例 legend

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

1.4 工具欄 toolbox

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

1.5 視覺映射 visualMap

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

1.6 時間線 timeline

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

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

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

2. 坐標系組件

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

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

3. 小結(jié)

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