第四章Echarts詳解GOAL學(xué)習(xí)目標(biāo)1了解前端渲染技術(shù)的基本概念2了解Echarts的基礎(chǔ)架構(gòu)3了解Echarts的常用組件4了解Echarts組件的常用屬性目錄Contents4.1前端渲染技術(shù)4.2Echarts的基礎(chǔ)架構(gòu)4.3Echarts的常用組件4.4Echarts組件的常用屬性4.1前端渲染技術(shù)

Echarts的底層是前端渲染技術(shù)，所謂前端渲染，通俗的解釋就是在瀏覽器上繪制

2D/3D

圖形的技術(shù)，目前主流的解決方案有

Canvas

和SVG（ScalableVectorGraphics，可縮放矢量圖形）兩種。

一般來(lái)說(shuō)，Canvas

適合繪制數(shù)據(jù)量大、圖形元素?cái)?shù)量較多的圖表（如熱力圖、平行坐標(biāo)圖、地圖等）；而

SVG

則更適用于軟硬件性能受限的邊緣設(shè)備。Echarts

對(duì)這兩種渲染器都提供了支持，如何選擇，需要根據(jù)軟硬件環(huán)境、數(shù)據(jù)量、功能需求綜合考慮。4.1前端渲染技術(shù)4.2Echarts的基礎(chǔ)架構(gòu)//使用Canvas渲染器（默認(rèn)）varchart=echarts.init(containerDom,null,{renderer:'canvas'});//等價(jià)于：varchart=echarts.init(containerDom)//使用SVG渲染器varchart=echarts.init(containerDom,null,{renderer:'svg'})4.2Echarts的基礎(chǔ)架構(gòu)渲染器配置參數(shù)“renderer”4.2Echarts的基礎(chǔ)架構(gòu)

為了屏蔽底層技術(shù)的復(fù)雜性，Echarts向上提供了組件、圖類和接口3個(gè)層次的API?；A(chǔ)庫(kù)的上層是組件，包括構(gòu)成圖表的一些通用元素；組件的上層是圖類，即圖表類型，Echarts支持22種圖表；圖類的上層是接口，用于支持圖表混搭、多圖聯(lián)動(dòng)等高級(jí)特性。在使用ECharts制作圖表時(shí)，只需要調(diào)用組件、圖類和接口即可完成開發(fā)任務(wù)。開發(fā)人員可以聚焦于核心業(yè)務(wù)，而不必關(guān)注底層的實(shí)現(xiàn)細(xì)節(jié)，從而提高了開發(fā)效率。4.3Echarts的常用組件

4.3Echarts的常用組件組件說(shuō)明tittle標(biāo)題組件，用于設(shè)置圖表的主標(biāo)題和副標(biāo)題。tooltip提示框組件，在鼠標(biāo)懸停或點(diǎn)擊數(shù)據(jù)時(shí)彈窗顯示詳細(xì)信息。toolbox工具箱組件，包含：保存為圖片、配置項(xiàng)還原、數(shù)據(jù)視圖、數(shù)據(jù)區(qū)域縮放、動(dòng)態(tài)類型切換等五個(gè)工具。legend圖例組件，用于描述數(shù)據(jù)和圖形的關(guān)聯(lián)。grid直角坐標(biāo)系內(nèi)繪圖網(wǎng)格，用于定義直角坐標(biāo)系的布局和樣式。xAxis直角坐標(biāo)系中的橫軸，默認(rèn)為類目型（category）。yAxis直角坐標(biāo)系中的縱軸，默認(rèn)為數(shù)值型（value）。

4.3Echarts的常用組件組件說(shuō)明dataZoom數(shù)據(jù)區(qū)域縮放組件，用于控制數(shù)軸的顯示范圍。series數(shù)據(jù)系列，用于設(shè)置圖表的類型以及數(shù)據(jù)的內(nèi)容。visualMap視覺(jué)映射組件，用于將數(shù)據(jù)映射到顏色、大小等圖形屬性上。calendar日歷坐標(biāo)系組件，用于實(shí)現(xiàn)日歷熱力圖。parallel平行坐標(biāo)系組件，適用于高維數(shù)據(jù)可視化。parallelAxis平行坐標(biāo)系的坐標(biāo)軸組件。4.4Echarts組件的常用屬性

4.4.1

標(biāo)題組件屬性說(shuō)明text主標(biāo)題文本的內(nèi)容。textStyle主標(biāo)題文本的樣式。subtext副標(biāo)題文本的內(nèi)容。subtextStyle副標(biāo)題文本的樣式。left標(biāo)題組件與容器左側(cè)的距離。top標(biāo)題組件與容器上側(cè)的距離。標(biāo)題組件（title）用于為圖表設(shè)置主、副標(biāo)題

4.4.1

標(biāo)題組件Echarts組件的布局屬性

4.4.2提示框組件屬性說(shuō)明trigger觸發(fā)類型，取值可選：“item”、“axis”或“none”，其中“item”表示數(shù)據(jù)項(xiàng)觸發(fā)，適用于散點(diǎn)圖、餅圖等無(wú)類目軸的圖表；“axis”表示坐標(biāo)軸觸發(fā)，適用于條形圖、折線圖等具備類目軸的圖表；“none”表示不觸發(fā)。formatter格式化器，支持字符串模板和回調(diào)函數(shù)兩種形式。axisPointer坐標(biāo)軸指示器，是指示坐標(biāo)軸當(dāng)前刻度的工具，鼠標(biāo)懸浮時(shí)顯示標(biāo)線和刻度文本。axisPointer.type指示器類型，取值可選：“l(fā)ine”（直線指示器）、“shadow”（陰影指示器）、“cross”（十字準(zhǔn)星指示器）、“none”（無(wú)指示器）。axisPointer.label坐標(biāo)軸指示器的文本標(biāo)簽。axisPointer.label.show是否顯示文本標(biāo)簽，取值可選：“false”（隱藏，默認(rèn)值）或“true”（顯示）。提示框組件（tooltip）用于彈窗顯示提示信息

4.4.3工具欄組件屬性說(shuō)明show是否顯示，取值可選：“true”（顯示）和“false”（隱藏）。itemSize工具欄圖標(biāo)的大小，單位為像素值。feature各種工具的相關(guān)配置，包含若干子屬性。feature.saveAsImage保存為圖片。feature.restore配置項(xiàng)還原。feature.dataView數(shù)據(jù)視圖，展現(xiàn)當(dāng)前圖表所用的數(shù)據(jù)，支持動(dòng)態(tài)更新。feature.dataZoom數(shù)據(jù)區(qū)域縮放，目前只支持平面直角坐標(biāo)系。feature.magicType動(dòng)態(tài)類型切換。工具欄組件（toolbox）提供了五個(gè)工具

4.4.4圖例組件屬性說(shuō)明type圖例類型，取值可選：“plain”（普通）和“scroll”（可滾動(dòng)翻頁(yè)）。orient布局方向，取值可選：“horizontal”（水平）和“vertical”（垂直）。textStyle圖例的公用文本樣式。formatter格式化器，支持字符串模板和回調(diào)函數(shù)兩種形式。data圖例對(duì)應(yīng)的數(shù)據(jù)系列，每個(gè)數(shù)組元素代表一個(gè)系列。若不設(shè)置data，則自動(dòng)從當(dāng)前系列中獲取。圖例組件（legend）用于表達(dá)數(shù)據(jù)與圖形的關(guān)聯(lián)

4.4.5網(wǎng)格組件屬性說(shuō)明show是否顯示網(wǎng)格，取值可選：true（顯示）和false（隱藏，默認(rèn)值）。width網(wǎng)格的寬度，默認(rèn)值為auto（自適應(yīng)）。height網(wǎng)格的高度，默認(rèn)值為auto（自適應(yīng)）。containLable網(wǎng)格區(qū)域是否包含坐標(biāo)軸的刻度標(biāo)簽，常用于防止標(biāo)簽溢出，取值可選：true（包含）和false（不包含，默認(rèn)值）。網(wǎng)格組件（grid）用于定義坐標(biāo)系網(wǎng)格的布局和樣式

4.4.6坐標(biāo)軸組件屬性說(shuō)明type坐標(biāo)軸類型，取值可選：category（類目型）、value（數(shù)值型）、time（時(shí)間型）和log（對(duì)數(shù)型）。show是否顯示坐標(biāo)軸，取值可選：true（顯示，默認(rèn)值）和false（隱藏）。alignTicks是否開啟自動(dòng)對(duì)齊刻度，取值可選：false（關(guān)閉，默認(rèn)值）和true（開啟）。只對(duì)數(shù)值軸和對(duì)數(shù)軸有效。position坐標(biāo)軸的位置。第一條橫軸默認(rèn)為“bottom”，第一條縱軸默認(rèn)為“l(fā)eft”。name坐標(biāo)軸的名稱。nameTextStyle坐標(biāo)軸名稱的文本樣式。坐標(biāo)軸包括xAxis和yAxis

4.4.6坐標(biāo)軸組件屬性說(shuō)明boundaryGap坐標(biāo)軸兩邊留白策略。類目軸和非類目軸的設(shè)置和表現(xiàn)不同：在類目軸中，取值為true（默認(rèn)）和false，此時(shí)刻度僅作為分隔線。在非類目軸中，是一個(gè)具有兩個(gè)值的數(shù)組，分別表示數(shù)據(jù)最小值和最大值的延伸范圍，可以直接設(shè)置數(shù)值或百分比，在設(shè)置min和max后無(wú)效。min坐標(biāo)軸標(biāo)簽最小值，會(huì)自動(dòng)根據(jù)具體數(shù)值進(jìn)行調(diào)整。max坐標(biāo)軸標(biāo)簽最大值，會(huì)自動(dòng)根據(jù)具體數(shù)值進(jìn)行調(diào)整。splitNumber坐標(biāo)軸的分割段數(shù)，只是一個(gè)預(yù)估值，實(shí)際顯示的段數(shù)會(huì)在此基礎(chǔ)上根據(jù)易讀程度作調(diào)整。在類目軸中無(wú)效。minInterval坐標(biāo)軸刻度的最小間隔，僅對(duì)數(shù)值軸或時(shí)間軸有效。坐標(biāo)軸組件的常用屬性

4.4.6坐標(biāo)軸組件屬性說(shuō)明maxInterval坐標(biāo)軸刻度的最大間隔，僅對(duì)數(shù)值軸或時(shí)間軸有效。axisLabel坐標(biāo)軸刻度標(biāo)簽的相關(guān)設(shè)置，包含若干子屬性。axisLabel.rotate刻度標(biāo)簽旋轉(zhuǎn)的角度，取值范圍是從-90°至90°。axisLabel.showMinLabel.是否顯示最小刻度的標(biāo)簽，默認(rèn)自動(dòng)判定。axisLabel.showMaxLabel.是否顯示最大刻度的標(biāo)簽，默認(rèn)自動(dòng)判定。axisPointer坐標(biāo)軸指示器配置項(xiàng)，包含若干子屬性。axisPointer.label坐標(biāo)軸指示器的文本標(biāo)簽，包含若干子屬性。axisPointer.label.formatter文本標(biāo)簽的格式化器，取值為字符串模板或回調(diào)函數(shù)。data類目數(shù)據(jù)，在類目軸中有效。坐標(biāo)軸組件的常用屬性

4.4.7區(qū)域縮放組件屬性說(shuō)明type組件類型，取值可選：inside（內(nèi)置型）和slider（滑動(dòng)條型）。orient布局方向，取值可選：“horizontal”（水平）和“vertical”（垂直）。xAxisIndex設(shè)置區(qū)域縮放組件控制的x軸，值為坐標(biāo)軸的編號(hào)。yAxisIndex設(shè)置區(qū)域縮放組件控制的y軸，值為坐標(biāo)軸的編號(hào)。start數(shù)據(jù)窗口范圍的起始百分比，范圍是：0%~100%，與end屬性共同決定數(shù)據(jù)窗口的范圍。end數(shù)據(jù)窗口范圍的結(jié)束百分比。范圍是：0%~100%，與start屬性共同決定數(shù)據(jù)窗口的范圍。區(qū)域縮放組件（dataZoom）用于控制數(shù)軸的顯示范圍

4.4.8數(shù)據(jù)系列組件屬性說(shuō)明type圖表的類型，例如：“bar”表示條形圖、“l(fā)ine”表示折線圖、“gauge”表示儀表盤、“parallel”表示平行坐標(biāo)系、“map”表示地圖。name數(shù)據(jù)系列的名稱，用于提示框的顯示