Web數(shù)據(jù)可視化教程（基于ECharts）模塊2熟知ECharts的圖表結(jié)構(gòu)與基本組件2.3認(rèn)知ECharts圖表組件及常用術(shù)語(yǔ)2.3認(rèn)知ECharts圖表組件及常用術(shù)語(yǔ)ECharts圖表組件及常用術(shù)語(yǔ)如下。1．標(biāo)題標(biāo)題（title）指圖表的標(biāo)題。標(biāo)題組件包含主標(biāo)題和副標(biāo)題。在ECharts2.x中，單個(gè)ECharts實(shí)例最多只能擁有一個(gè)標(biāo)題組件。但是在ECharts3中，單個(gè)ECharts實(shí)例可以擁有任意多個(gè)標(biāo)題組件，這在需要對(duì)標(biāo)題進(jìn)行排版，或者單個(gè)實(shí)例中的多個(gè)圖表都需要標(biāo)題時(shí)會(huì)比較有用。掃描二維碼，瀏覽電子活頁(yè)2-1中的內(nèi)容，熟悉標(biāo)題組件的主要屬性及其設(shè)置。2.3認(rèn)知ECharts圖表組件及常用術(shù)語(yǔ)2．圖例圖例（legend）指圖表的圖例。圖例組件展現(xiàn)了不同系列的標(biāo)記（symbol）、顏色和名稱?？梢酝ㄟ^單擊圖例控制哪些系列不顯示。ECharts3中單個(gè)ECharts實(shí)例可以擁有多個(gè)圖例組件，便于布局多個(gè)圖例。當(dāng)圖例數(shù)量過多時(shí)，可以使用垂直滾動(dòng)圖例或水平滾動(dòng)圖例。掃描二維碼，瀏覽電子活頁(yè)2-2中的內(nèi)容，熟悉圖例組件的屬性及設(shè)置。2.3認(rèn)知ECharts圖表組件及常用術(shù)語(yǔ)3．提示框提示框標(biāo)簽（tooltip.axisPointer.label）是指提示框坐標(biāo)軸指示器的文字。提示框坐標(biāo)軸指示器的樣式包括線條樣式（tooltip.axisPointer.lineStyle）和十字線樣式（tooltip.axisPointer.crossStyle）。提示框組件可以設(shè)置在以下多處位置。①可以設(shè)置在全局，即tooltip。②可以設(shè)置在坐標(biāo)系中，即grid.tooltip、polar.tooltip、single.tooltip。③可以設(shè)置在系列中，即series.tooltip。④可以設(shè)置在系列的每個(gè)數(shù)據(jù)項(xiàng)中，即series.data.tooltip。掃描二維碼，瀏覽電子活頁(yè)2-3中的內(nèi)容，熟悉提示框組件的屬性及設(shè)置。2.3認(rèn)知ECharts圖表組件及常用術(shù)語(yǔ)4．坐標(biāo)軸（1）x軸直角坐標(biāo)系中的x軸由x軸線（xAxis.axisLine）、x軸刻度（xAxis.axisTick）、x軸刻度標(biāo)簽（xAxis.axisLabel）、x軸標(biāo)題4個(gè)部分組成。一般情況下，單個(gè)grid組件最多只能放上、下兩個(gè)x軸。x軸多于兩個(gè)時(shí)，需要對(duì)offset屬性進(jìn)行配置，以防止多個(gè)x軸重疊。掃描二維碼，瀏覽電子活頁(yè)2-4中的內(nèi)容，熟悉直角坐標(biāo)系中x軸（xAxis）的屬性及設(shè)置。2.3認(rèn)知ECharts圖表組件及常用術(shù)語(yǔ)4．坐標(biāo)軸（2）y軸直角坐標(biāo)系中的y軸（yAxis）由y軸線（yAxis.axisLine）、y軸刻度（yAxis.axisTick）、y軸刻度標(biāo)簽（yAxis.axisLabel）、y軸標(biāo)題4個(gè)部分組成。掃描二維碼，瀏覽電子活頁(yè)2-5中的內(nèi)容，熟悉直角坐標(biāo)系grid中的y軸（yAxis）的屬性及設(shè)置。直角坐標(biāo)系中的第2個(gè)y軸默認(rèn)顯示在右邊，y軸可以通過nameLocation改變位置。一般情況下，單個(gè)grid組件最多只能放左、右兩個(gè)y軸。y軸多于兩個(gè)時(shí)需要對(duì)offset屬性進(jìn)行配置，以防止多個(gè)y軸重疊。2.3認(rèn)知ECharts圖表組件及常用術(shù)語(yǔ)4．坐標(biāo)軸（3）坐標(biāo)軸分割線除坐標(biāo)軸分割線（yAxis.splitLine）之外，還可以使用splitArea設(shè)置背景色分割。2.3認(rèn)知ECharts圖表組件及常用術(shù)語(yǔ)5．系列的圖形樣式系列的圖形樣式（series.itemStyle）對(duì)不同類型的圖表有不同的意義。對(duì)折線圖而言，這個(gè)配置項(xiàng)用于設(shè)置拐點(diǎn)處圖形的樣式；對(duì)柱狀圖而言，這個(gè)配置項(xiàng)用于設(shè)置矩形條的樣式。該配置項(xiàng)是對(duì)整個(gè)系列的圖形做設(shè)置，如果要對(duì)其中的某一個(gè)特定數(shù)據(jù)點(diǎn)做設(shè)置，應(yīng)使用series.data.itemStyle。2.3認(rèn)知ECharts圖表組件及常用術(shù)語(yǔ)6．工具欄工具欄（toolbox）用于提供操作圖表的工具，可以自定義。工具欄組件如圖2-1所示，其內(nèi)置數(shù)據(jù)區(qū)域縮放、數(shù)據(jù)區(qū)域縮放還原、數(shù)據(jù)視圖、圖表類型切換、重置、保存為圖片等工具。掃描二維碼，瀏覽電子活頁(yè)2-6中的內(nèi)容，熟悉工具欄組件的屬性及設(shè)置。圖2-1工具欄組件2.3認(rèn)知ECharts圖表組件及常用術(shù)語(yǔ)7．時(shí)間軸時(shí)間軸（timeline）用于實(shí)現(xiàn)多個(gè)option的切換，展現(xiàn)不同時(shí)間段的數(shù)據(jù)。timeline組件提供了在多個(gè)option間進(jìn)行切換、播放等操作的功能。timeline和其他組件有些不同，它需要操作“多個(gè)option”，把傳入setOption的第1個(gè)參數(shù)，稱為ECOption，稱傳統(tǒng)的ECharts單個(gè)option為ECUnitOption。沒有設(shè)置timeline和mediaquery時(shí)，ECUnitOption就是ECOption。設(shè)置了timeline或mediaquery時(shí)，ECOption由幾個(gè)ECUnitOption組成；ECOption的各個(gè)根屬性形成一個(gè)ECUnitOption，叫作baseOption，它代表各種默認(rèn)設(shè)置；2.3認(rèn)知ECharts圖表組件及常用術(shù)語(yǔ)7．時(shí)間軸options數(shù)組每項(xiàng)形成一個(gè)ECUnitOption，為了方便也稱為switchableOption，它代表每個(gè)時(shí)間粒度對(duì)應(yīng)的option。baseOption和switchableOption會(huì)用來計(jì)算finalOption，圖表就是根據(jù)這個(gè)最終結(jié)果繪制的。初始化的時(shí)候，對(duì)應(yīng)當(dāng)前時(shí)間的switchableOption會(huì)被合并（merge）到baseOption，形成finalOption。每當(dāng)時(shí)間變化時(shí)，對(duì)應(yīng)新時(shí)間的switchableOption會(huì)被合并到finalOption。掃描二維碼，瀏覽電子活頁(yè)2-7中的內(nèi)容，熟悉時(shí)間軸組件的主要屬性及其設(shè)置。2.3認(rèn)知ECharts圖表組件及常用術(shù)語(yǔ)8．?dāng)?shù)據(jù)區(qū)域縮放數(shù)據(jù)區(qū)域縮放（dataZoom）用來放大一部分?jǐn)?shù)據(jù)，從而突出數(shù)據(jù)信息的細(xì)節(jié)，幫助概覽數(shù)據(jù)整體，或者去除離群點(diǎn)的影響。掃描二維碼，瀏覽電子活頁(yè)2-8中的內(nèi)容，熟悉數(shù)據(jù)區(qū)域縮放組件的屬性及設(shè)置。9．刷選刷選（Brush）是區(qū)域選擇組件，用戶可以利用它選擇圖中一部分?jǐn)?shù)據(jù)，從而查看被選中的數(shù)據(jù)，或者它們的一些統(tǒng)計(jì)計(jì)算結(jié)果。掃描二維碼，瀏覽電子活頁(yè)2-9中的內(nèi)容，熟悉刷選組件的屬性及設(shè)置。2.3認(rèn)知ECharts圖表組件及常用術(shù)語(yǔ)10．視覺映射視覺映射（visualMap）可以將數(shù)據(jù)值映射為圖形的形狀、大小、顏色等。visualMap組件用于進(jìn)行“視覺編碼”，也就是將數(shù)據(jù)映射到視覺元素（視覺通道）。2.3認(rèn)知ECharts圖表組件及常用術(shù)語(yǔ)10．視覺映射visualMap組件中可以使用的視覺元素如下。①symbol：圖形類別。②symbolSize：圖形大小。③color：顏色。④colorAlpha：顏色的透明度。⑤opacity：透明度。⑥colorLightness：顏色的明暗度。⑦colorSaturation：顏色的飽和度。⑧colorHue：顏色的色調(diào)。2.3認(rèn)知ECharts圖表組件及常用術(shù)語(yǔ)10．視覺映射visualMap組件可以定義多個(gè)，從而同時(shí)對(duì)數(shù)據(jù)中的多個(gè)維度進(jìn)行視覺映射。visualMap組件分為分段型（visualMapPiecewise）和連續(xù)型（visualMapContinuous），通過type來區(qū)分。2.3認(rèn)知ECharts圖表組件及常用術(shù)語(yǔ)10．視覺映射【示例代碼2-8】option={visualMap:[{type:'continuous',…},{type:'piecewise',…}],…};2.3認(rèn)知ECharts圖表組件及常用術(shù)語(yǔ)11．標(biāo)注、標(biāo)線、標(biāo)域ECharts使用markPoint設(shè)置標(biāo)記點(diǎn)，使用markLine設(shè)置標(biāo)記線，使用markArea設(shè)置標(biāo)記區(qū)域。（1）圖表標(biāo)注（series-line.markPoint）markPoint用于設(shè)置圖表標(biāo)注。掃描二維碼，瀏覽電子活頁(yè)2-10中的內(nèi)容，熟悉圖表標(biāo)注的主要屬性及其設(shè)置。2.3認(rèn)知ECharts圖表組件及常用術(shù)語(yǔ)11．標(biāo)注、標(biāo)線、標(biāo)域（2）圖表標(biāo)線（series-line.markLine）markLine用于設(shè)置圖表標(biāo)線。掃描二維碼，瀏覽電子活頁(yè)2-11中的內(nèi)容，熟悉圖表標(biāo)線的主要屬性及其設(shè)置。（3）圖表標(biāo)域（series-line.markArea）markArea用于設(shè)置圖表標(biāo)域，常用于標(biāo)記圖表中某個(gè)范圍的數(shù)據(jù)，如標(biāo)出某段時(shí)間投放了廣告。掃描二維碼，瀏覽電子活頁(yè)2-12中的內(nèi)容，熟悉圖表標(biāo)域的主要屬性及其設(shè)置。2.3