Web數(shù)據(jù)可視化教程（基于ECharts）模塊1初識數(shù)據(jù)可視化與Echarts1.1認知數(shù)據(jù)可視化1.1.1數(shù)據(jù)可視化的定義數(shù)據(jù)可視化是指將數(shù)據(jù)通過圖形、圖表、圖像、動畫等視覺元素呈現(xiàn)出來，以便理解、分析和傳達信息的過程或技術(shù)。數(shù)據(jù)可視化的核心目標是簡化復雜數(shù)據(jù)，幫助人們更迅速地理解和處理大量的信息。通過將數(shù)據(jù)轉(zhuǎn)化為直觀的視覺形式，可以更容易地識別和解釋數(shù)據(jù)中的模式和趨勢，從而提高工作效率和決策的準確性。1.1.1數(shù)據(jù)可視化的定義數(shù)據(jù)可視化有多種形式，常見的形式包括折線圖、柱狀圖、餅圖、散點圖、雷達圖、熱力圖、地圖等。每種形式都有其特定的應用場景和優(yōu)缺點。數(shù)據(jù)可視化在各個領(lǐng)域（如商業(yè)分析、醫(yī)療診斷、科學研究等都有廣泛的應用，可以幫助人們更好地理解和分析數(shù)據(jù)，發(fā)現(xiàn)數(shù)據(jù)中的規(guī)律和趨勢，從而做出更準確的決策和判斷。1.1.2數(shù)據(jù)可視化的作用數(shù)據(jù)可視化在各個領(lǐng)域都發(fā)揮著重要的作用，其主要作用如下。（1）簡化復雜數(shù)據(jù)（2）提高決策效率（3）提高決策準確性（4）增強數(shù)據(jù)的吸引力（5）促進溝通與協(xié)作（6）提升數(shù)據(jù)價值（7）輔助教學與培訓（8）優(yōu)化用戶體驗1.1.3數(shù)據(jù)可視化的特性數(shù)據(jù)可視化主要包括以下幾個特性。（1）直觀性（2）易讀性（3）交互性（4）動態(tài)更新與實時性（5）適應性（6）可擴展性（7）跨平臺性與兼容性（8）美觀性（9）逼真性（10）安全性1.1.4數(shù)據(jù)可視化的基本流程數(shù)據(jù)可視化是一個系統(tǒng)的過程，涵蓋從數(shù)據(jù)收集到最終的可視化展示和結(jié)果解讀等多個環(huán)節(jié)。詳細的數(shù)據(jù)可視化基本流程如下。（1）明確目標與需求界定問題：明確數(shù)據(jù)可視化需要解決的問題或達成的目標。了解受眾：確定可視化結(jié)果的受眾群體，了解他們的需求和期望。（2）數(shù)據(jù)收集來源多樣：數(shù)據(jù)可以有多種來源，包括內(nèi)部業(yè)務數(shù)據(jù)、外部公開數(shù)據(jù)、調(diào)查問卷等。確保質(zhì)量：注意數(shù)據(jù)的真實性和可靠性，以及數(shù)據(jù)的隱私和合規(guī)性問題。1.1.4數(shù)據(jù)可視化的基本流程（3）數(shù)據(jù)預處理清洗數(shù)據(jù)：處理缺失值、刪除重復值、轉(zhuǎn)換數(shù)據(jù)格式等，確保數(shù)據(jù)的準確性和一致性。整理歸納：將數(shù)據(jù)整理為適合可視化的格式，可能包括數(shù)據(jù)的歸納、聚合等步驟。（4）數(shù)據(jù)分析理解數(shù)據(jù)：通過統(tǒng)計分析、數(shù)據(jù)挖掘等方法，了解數(shù)據(jù)的主要特征和趨勢。探索關(guān)系：分析數(shù)據(jù)中的變量，探索變量之間的關(guān)系。1.1.4數(shù)據(jù)可視化的基本流程（5）選擇合適的可視化工具與模式工具選擇：根據(jù)數(shù)據(jù)的類型和可視化的目標，選擇合適的可視化工具，如ECharts、Excel、Tableau、PowerBI等。模式匹配：根據(jù)數(shù)據(jù)類型和展示需求，選擇合適的可視化模式，如柱狀圖、折線圖、餅圖等。（6）設計圖表與布局選擇圖表類型：根據(jù)數(shù)據(jù)的特點選擇合適的圖表類型。設計布局：考慮圖表的顏色、大小、形狀、位置等布局因素，以優(yōu)化數(shù)據(jù)的呈現(xiàn)效果。1.1.4數(shù)據(jù)可視化的基本流程（7）進行可視化輸入數(shù)據(jù)：在選擇的工具中輸入清洗和整理后的數(shù)據(jù)。調(diào)整格式：根據(jù)設計的圖表和布局，調(diào)整數(shù)據(jù)的格式、顏色、標簽等。添加元素：添加標題、標簽、圖例等必要的元素，使圖表更加完整和易于理解。（8）結(jié)果解讀與呈現(xiàn)解讀數(shù)據(jù)：對可視化結(jié)果進行深入解讀，分析數(shù)據(jù)的規(guī)律和趨勢。呈現(xiàn)結(jié)果：將解讀結(jié)果以報告或圖表形式呈現(xiàn)給用戶，幫助他們更好地理解和利用數(shù)據(jù)。1.1.4數(shù)據(jù)可視化的基本流程（9）反饋與迭代收集反饋：獲取用戶對可視化結(jié)果的反饋意見。優(yōu)化迭代：根據(jù)反饋意見對可視化結(jié)果進行優(yōu)化和迭代，以提高其效果和用戶體驗。1.1.5常用的數(shù)據(jù)可視化工具（1）EChartsECharts是一個使用JavaScript實現(xiàn)的開源可視化庫。它支持自定義，能夠滿足網(wǎng)頁和移動端的數(shù)據(jù)可視化需求；提供了豐富的圖表類型和交互功能；具有良好的跨瀏覽器兼容性。它適用于前端開發(fā)、數(shù)據(jù)分析等場景。1.1.5常用的數(shù)據(jù)可視化工具（2）ExcelExcel是一款功能強大的電子表格軟件，內(nèi)置了豐富的數(shù)據(jù)可視化工具。操作簡單易上手，適合初學者使用；提供了多種圖表類型，如柱狀圖、折線圖、餅圖等；具備數(shù)據(jù)透視表等高級數(shù)據(jù)分析功能。它適用于日常辦公、數(shù)據(jù)分析報告制作等場景。1.1.5常用的數(shù)據(jù)可視化工具（3）Tableau（4）PowerBI（5）Dycharts（6）山海鯨可視化（7）Plotly（8）D3.js快樂學習高效學習祝學習進步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊1初識數(shù)據(jù)可視化與Echarts1.2認知ECharts1.2.1什么是EChartsECharts是一款由百度團隊推出和維護的、使用JavaScript開發(fā)的開源可視化圖表庫，它支持創(chuàng)建各種交互式、動態(tài)和美觀的圖表，適用于數(shù)據(jù)可視化展示和數(shù)據(jù)分析應用。它提供簡單而強大的方式來創(chuàng)建交互式、可定制的圖表（如折線圖、柱狀圖、散點圖、餅圖等），以及更復雜的圖表（如地圖、熱力圖、雷達圖等）。ECharts支持多種數(shù)據(jù)格式，并允許用戶通過簡單的配置項自定義圖表的外觀和行為。1.2.1什么是EChartsECharts是一個功能強大、靈活可定制的數(shù)據(jù)可視化圖表庫，提供了豐富的圖表類型和強大的數(shù)據(jù)展示功能，適用于各種數(shù)據(jù)可視化場景，如數(shù)據(jù)分析、實時監(jiān)控、大屏展示、地理信息可視化等。無論是簡單的數(shù)據(jù)展示還是復雜的數(shù)據(jù)分析，ECharts都能夠提供滿足需求的解決方案。1.2.1什么是EChartsECharts可以流暢地運行在PC和移動設備上，兼容當前絕大部分瀏覽器，包括且不限于IE9/10/11、Chrome、Firefox、Safari等，這意味著用戶幾乎使用任何瀏覽器訪問包含ECharts圖表的網(wǎng)頁，都能正常查看和操作圖表。ECharts底層依賴輕量級的矢量圖形庫ZRender，提供直觀、交互豐富、可個性化定制的數(shù)據(jù)可視化圖表。1.2.3ECharts的主要功能與技術(shù)特點ECharts提供了一個簡單而直觀的方式來創(chuàng)建交互式、可定制的圖表，廣泛應用于數(shù)據(jù)可視化領(lǐng)域。（1）豐富的圖表類型（2）高度的可定制性（3）強大的交互功能（4）強大的數(shù)據(jù)處理能力（5）跨瀏覽器、跨平臺支持與移動端優(yōu)化（6）響應式設計和優(yōu)化1.2.3ECharts的主要功能與技術(shù)特點（7）開源和社區(qū)支持（8）強大的擴展性（9）服務端渲染和多渲染方案（10）無障礙訪問（11）動畫與特效（12）圖表混搭與多圖表聯(lián)動（13）向后兼容性強1.2.4ECharts的使用場景ECharts廣泛應用于各個領(lǐng)域、適用于各種數(shù)據(jù)可視化場景，具體如下。（1）數(shù)據(jù)分析和報告（2）實時監(jiān)控（3）大屏展示（4）地理信息可視化（5）商業(yè)智能分析（6）科研與教育培訓數(shù)據(jù)展示（7）網(wǎng)站與App數(shù)據(jù)可視化快樂學習高效學習祝學習進步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊1初識數(shù)據(jù)可視化與Echarts1.3認知ECharts支持的圖表類型1.3認知ECharts支持的圖表類型ECharts支持多種圖表類型以滿足不同的數(shù)據(jù)展示需求，可以根據(jù)具體的數(shù)據(jù)展示需求選擇合適的圖表類型來呈現(xiàn)數(shù)據(jù)。1.3.1ECharts支持的圖表按功能進行分類（1）常規(guī)圖表：用于展示不同類型的數(shù)據(jù)和趨勢，如折線圖、柱狀圖、散點圖、餅圖、K線圖等。（2）統(tǒng)計圖表：用于展示數(shù)據(jù)的分布情況，如盒須圖。（3）地理數(shù)據(jù)可視化：用于展示地理空間數(shù)據(jù)，如地圖、熱力圖、線圖。（4）關(guān)系數(shù)據(jù)可視化：用于展示數(shù)據(jù)之間的關(guān)系和層次結(jié)構(gòu)，如關(guān)系圖、矩形樹圖、旭日圖。（5）多維數(shù)據(jù)可視化：用于展示多維數(shù)據(jù)，如平行坐標圖。（6）商業(yè)智能圖表：用于商業(yè)智能分析，如漏斗圖、儀表盤。1.3.2ECharts支持的常見圖表按數(shù)據(jù)性質(zhì)和展示需求進行分類ECharts是一個強大的數(shù)據(jù)可視化庫，它支持多種類型的圖表，這些圖表可以根據(jù)數(shù)據(jù)的性質(zhì)和展示需求進行分類，常見分類方式如下。1.3.2ECharts支持的常見圖表按數(shù)據(jù)性質(zhì)和展示需求進行分類1．基礎(chǔ)圖表基礎(chǔ)圖表是ECharts中常用的圖表類型，它們適用于大多數(shù)基本的數(shù)據(jù)展示和分析場景。（1）折線圖（2）柱狀圖/條形圖（3）餅圖/環(huán)形圖（4）散點圖（5）區(qū)域面積圖1.3.2ECharts支持的常見圖表按數(shù)據(jù)性質(zhì)和展示需求進行分類2．高級圖表高級圖表提供了更復雜的數(shù)據(jù)展示和分析功能，適用于需要深入挖掘數(shù)據(jù)關(guān)系的場景。（1）K線圖（2）雷達圖（3）盒須圖（4）熱力圖（5）儀表盤（6）地圖1.3.2ECharts支持的常見圖表按數(shù)據(jù)性質(zhì)和展示需求進行分類3．特殊圖表（1）關(guān)系圖（2）樹圖（3）矩形樹圖（4）旭日圖（5）平行坐標圖（6）桑基圖（7）漏斗圖（8）主題河流圖（9）事件河流圖（10）水球圖（11）詞云圖（12）極坐標圖4．自定義圖表快樂學習高效學習祝學習進步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊1初識數(shù)據(jù)可視化與Echarts1.4初識ECharts5.x1.4.1什么是ECharts5.xECharts5.x是一個功能強大、靈活易用、高度可定制且性能優(yōu)越的數(shù)據(jù)可視化庫。ECharts5.x提供了豐富的圖表類型和強大的交互功能，支持高度定制化開發(fā)。同時，ECharts5.x在性能、交互功能、視覺設計和動畫效果等方面都進行了多項優(yōu)化和升級，為用戶提供了更加優(yōu)質(zhì)的數(shù)據(jù)可視化體驗。ECharts5.x通過增強的動態(tài)敘事能力、優(yōu)化的默認主題、新的標簽功能以及增強的交互能力等，為用戶提供了更加豐富和直觀的數(shù)據(jù)可視化體驗。同時，其技術(shù)亮點（如TypeScript重構(gòu)、更強的數(shù)據(jù)處理能力和國際化支持等）也進一步提升了其競爭力和實用性。1.4.2ECharts5.x的新特性與改進（1）性能和交互體驗優(yōu)化（2）數(shù)據(jù)處理能力增強（3）交互能力增強（4）視覺設計優(yōu)化（5）動態(tài)敘事能力和動畫效果優(yōu)化（6）更好地開發(fā)體驗和可訪問性1.4.2ECharts5.x的新特性與改進（7）優(yōu)化的默認主題（8）新的標簽功能（9）時間軸和提示框改進（10）儀表盤升級（11）扇形圓角1.4.3ECharts5.x有哪些不足ECharts5.x是一個強大的數(shù)據(jù)可視化庫，在多個方面表現(xiàn)出色，但它也存在一些不足。（1）復雜圖表自定義難度較高（2）性能瓶頸（3）移動端適配問題（4）交互局限性（5）瀏覽器兼容性限制1.4.3ECharts5.x有哪些不足（6）學習曲線較陡（7）文檔更新滯后（8）插件和擴展的局限性（9）視覺樣式的優(yōu)先級調(diào)整（10）文檔和社區(qū)資源有限快樂學習高效學習祝學習進步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊1初識數(shù)據(jù)可視化與Echarts1.8使用ECharts進行數(shù)據(jù)可視化和數(shù)據(jù)分析1.8.1使用ECharts進行數(shù)據(jù)可視化使用ECharts進行數(shù)據(jù)可視化的一般步驟如下。1．準備開發(fā)環(huán)境確保開發(fā)環(huán)境中已經(jīng)安裝了ECharts，如果未安裝可以通過npm、yarn等包管理工具安裝。2．引入ECharts如果是通過npm或cnpm安裝的ECharts，可以在JavaScript文件中通過import語句引入ECharts。如果是直接下載的源代碼文件，則需要在HTML文件中通過<script>標簽引入ECharts的JavaScript文件。也可以通過CDN引入ECharts的腳本文件。1.8.1使用ECharts進行數(shù)據(jù)可視化3．準備HTML容器創(chuàng)建HTML文件test0103.html，在該HTML文件中，為ECharts準備一個具有寬度和高度的DOM元素作為圖表的容器。HTML代碼如下：<divid="main"style="width:600px;height:400px;"></div>4．初始化ECharts實例在JavaScript文件中，通過echarts.init方法初始化ECharts實例，并將其綁定到之前準備的DOM元素上。1.8.1使用ECharts進行數(shù)據(jù)可視化JavaScript代碼如下：varmyChart=echarts.init(document.getElementById('main'));也可以寫成以下形式：varchartDom=document.getElementById('main');varmyChart=echarts.init(chartDom);1.8.1使用ECharts進行數(shù)據(jù)可視化5．指定圖表配置項和數(shù)據(jù)ECharts的圖表配置是通過一個名為option的JavaScript對象或JSON格式的數(shù)據(jù)對象來完成的。option對象包括標題、坐標軸、數(shù)據(jù)系列等。6．渲染圖表通過調(diào)用ECharts實例的setOption方法，將準備好的option對象應用到圖表上，從而渲染出圖表。1.8.1使用ECharts進行數(shù)據(jù)可視化7．更新圖表數(shù)據(jù)（可選）如果需要更新圖表數(shù)據(jù)，可以修改option對象中相應的數(shù)據(jù)，并再次調(diào)用setOption方法。ECharts會自動根據(jù)新的數(shù)據(jù)更新圖表。8．監(jiān)聽圖表事件（可選）ECharts提供了豐富的事件機制，允許監(jiān)聽圖表的各種交互事件（如單擊、懸停等），并執(zhí)行相應的邏輯。9．使用ECharts的擴展和插件（可選）ECharts的社區(qū)提供了豐富的擴展和插件，如三維可視化擴展（EChartsGL）、地圖擴展（BMap、AMap）等?？梢愿鶕?jù)需要引入這些擴展和插件，以實現(xiàn)更高級的數(shù)據(jù)可視化效果。1.8.2使用ECharts進行數(shù)據(jù)分析使用ECharts進行數(shù)據(jù)分析通常涉及數(shù)據(jù)可視化操作，即將數(shù)據(jù)以圖表的形式直觀地展示出來，以便更好地理解和分析數(shù)據(jù)。其基本步驟如下。1．準備數(shù)據(jù)收集或準備要分析的數(shù)據(jù)。這些數(shù)據(jù)可以是任何類型的，如時間序列數(shù)據(jù)、分類數(shù)據(jù)、地理數(shù)據(jù)等。確保數(shù)據(jù)的質(zhì)量和準確性，因為這將直接影響數(shù)據(jù)分析的結(jié)果。1.8.2使用ECharts進行數(shù)據(jù)分析2．選擇合適的圖表類型根據(jù)數(shù)據(jù)的類型和分析目標，選擇合適的ECharts圖表類型。ECharts提供了豐富的圖表類型，如折線圖、柱狀圖、餅圖、散點圖、雷達圖、地圖等。每種圖表類型都有其特定的應用場景和優(yōu)勢，因此選擇合適的圖表類型對于數(shù)據(jù)可視化至關(guān)重要。1.8.2使用ECharts進行數(shù)據(jù)分析3．配置圖表選項在選擇了圖表類型之后，需要配置圖表的選項（option），包括設置圖表的標題、圖例、坐標軸、數(shù)據(jù)系列等?？梢酝ㄟ^ECharts的API自定義圖表的樣式、布局和交互行為。1.8.2使用ECharts進行數(shù)據(jù)分析4．初始化ECharts實例并渲染圖表在HTML文件中準備一個具備寬度和高度的DOM元素作為圖表的容器。然后，使用ECharts提供的echarts.init方法初始化ECharts實例，并將配置好的option對象傳遞給實例的setOption方法以渲染圖表。1.8.2使用ECharts進行數(shù)據(jù)分析5．分析圖表一旦圖表渲染出來，就可以開始分析數(shù)據(jù)了。通過觀察圖表的形狀、趨勢、顏色等，可以發(fā)現(xiàn)數(shù)據(jù)中的模式、異常值和關(guān)聯(lián)關(guān)系等。此外，ECharts還提供了豐富的交互功能，如鼠標指針懸停、縮放、拖曳等，這些功能可以幫助用戶更深入地探索數(shù)據(jù)。1.8.2使用ECharts進行數(shù)據(jù)分析6．導出和分享圖表如果需要將分析結(jié)果分享給他人，可以將圖表導出為圖片或PDF等格式。ECharts提供了導出圖片的功能，可以通過調(diào)用實例的getDataURL方法來獲取圖表的圖片URL，并將其嵌入網(wǎng)頁或下載到本地。1.8.2使用ECharts進行數(shù)據(jù)分析7．結(jié)合其他工具進行數(shù)據(jù)分析ECharts可以與其他數(shù)據(jù)分析工具結(jié)合使用，以獲得更全面的分析結(jié)果。例如，可以使用Python、R語言等進行數(shù)據(jù)預處理和統(tǒng)計分析，然后使用ECharts可視化結(jié)果?？鞓穼W習高效學習祝學習進步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊2熟知ECharts的圖表結(jié)構(gòu)與基本組件2.1定義圖表容器及指定圖表大小2.1.1初始化圖表1．在HTML文件中定義有寬度和高度的父容器（推薦）通常來說，需要在HTML文件中定義一個<div>節(jié)點，并且通過CSS為該節(jié)點指定寬度和高度。初始化的時候，傳入該節(jié)點，圖表的大小默認為該節(jié)點的大小，除非聲明了opts.width或opts.height。2.1.1初始化圖表【示例代碼2-1】<divid="main"style="width:600px;height:400px;"></div><scripttype="text/javascript">varmyChart=echarts.init(document.getElementById('main'));</script>需要注意的是，使用這種方法調(diào)用echarts.init時，需保證容器具備寬度和高度。2.1.1初始化圖表2．指定圖表的大小如果圖表容器不存在寬度和高度，或者希望圖表的大小不等于容器的大小，也可以在初始化的時候指定圖表的大小。2.1.1初始化圖表【示例代碼2-2】<divid="main"></div><scripttype="text/javascript">varmyChart=echarts.init(document.getElementById('main'),null,{width:600,height:400});</script>2.1.2圖表大小和實例管理1．監(jiān)聽圖表容器的大小并改變圖表的大小在有些場景下，當容器大小改變時，需要圖表的大小也相應地改變。例如，圖表容器是一個高度為400px、寬度為頁面寬度的100%的節(jié)點，在瀏覽器頁面寬度改變時，需要保持圖表寬度始終是頁面寬度的100%。為此，可以監(jiān)聽頁面的resize事件，以便在瀏覽器頁面大小改變時，調(diào)用echartsInstance.resize改變圖表的大小。2.1.2圖表大小和實例管理【示例代碼2-3】<style>#main,html,body{width:100%;}#main{height:400px;}</style>2.1.2圖表大小和實例管理【示例代碼2-3】<divid="main"></div><scripttype="text/javascript">varmyChart=echarts.init(document.getElementById('main'));window.addEventListener('resize',function(){myChart.resize();});</script>2.1.2圖表大小和實例管理2．為圖表設置特定的大小除了直接調(diào)用不含參數(shù)的resize方法自動改變圖表的大小，還可以在resize方法中指定圖表的寬度和高度，實現(xiàn)圖表大小不等于容器大小的效果。2.1.2圖表大小和實例管理【示例代碼2-4】myChart.resize({width:800,height:400});2.1.2圖表大小和實例管理3．銷毀和重建圖表實例假設頁面中存在多個標簽頁，每個標簽頁都包含一些圖表。當選中一個標簽頁的時候，其他標簽頁的內(nèi)容在DOM中被移除了。這樣，當用戶再選中這些標簽頁的時候，就會發(fā)現(xiàn)圖表“不見”了。本質(zhì)上，這是圖表的容器節(jié)點被移除導致的。即使之后重新添加容器節(jié)點，圖表所在的節(jié)點也已經(jīng)不存在了。2.1.2圖表大小和實例管理正確的做法是，在圖表容器被銷毀之后，調(diào)用echartsInstance.dispose銷毀圖表實例，在重新添加圖表容器后，再次調(diào)用echarts.init初始化圖表實例?？鞓穼W習高效學習祝學習進步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊2熟知ECharts的圖表結(jié)構(gòu)與基本組件2.2認知與使用ECharts的坐標系在ECharts中，坐標系是圖表繪制的基礎(chǔ)，它決定了數(shù)據(jù)如何在圖表上展示。ECharts提供了多種類型的坐標系以滿足不同的數(shù)據(jù)可視化需求，用戶可以根據(jù)實際情況選擇合適的坐標系類型并進行相應的配置，以實現(xiàn)最佳的可視化效果。2.2.1認知直角坐標系1．基本概念直角坐標系（grid）是ECharts中常用的坐標系，它包含x軸和y軸，通常用于繪制柱狀圖、折線圖、散點圖（氣泡圖）等。2.2.1認知直角坐標系2．x軸和y軸x軸和y軸都由軸線、刻度、刻度標簽、軸標題4個部分組成。普通的二維坐標系都有x軸和y軸，通常情況下，x軸顯示在圖表的底部，y軸顯示在圖表的左側(cè)。x軸常用來標示數(shù)據(jù)的維度，y軸常用來標示數(shù)據(jù)的數(shù)值。2.2.1認知直角坐標系3．屬性配置在ECharts中，可以通過配置項自定義x軸和y軸的屬性，如坐標軸標題、軸線樣式、刻度樣式、標簽樣式等。例如，可以設置坐標軸標題的位置、字體樣式、顏色等，可以設置軸線的顏色、寬度、類型（實線、虛線等），可以設置刻度的顯示間隔、長度、樣式等，還可以設置標簽的顯示間隔、旋轉(zhuǎn)角度、字體樣式等。2.2.1認知直角坐標系4．多軸配置在ECharts直角坐標系內(nèi)，單個grid組件最多只能放兩個x軸或y軸，x或y軸多于兩個時，需要對offset屬性進行配置，以防止同一位置多個軸發(fā)生重疊。配置兩個x軸時，它們分別顯示在上、下兩側(cè)；配置兩個y軸時，它們分別顯示在左、右兩側(cè)。2.2.1認知直角坐標系5．直角坐標系的主要屬性及其設置直角坐標系的主要屬性及其設置如下。（1）grid.idstring類型，表示組件id。默認不指定，指定后可用于在option或者API中引用組件。（2）grid.showboolean類型，用于設置是否顯示直角坐標系網(wǎng)格。2.2.1認知直角坐標系5．直角坐標系的主要屬性及其設置（3）grid.zlevelnumber類型，用于設置所有圖形的zlevel值，zlevel用于Canvas分層（一種常見的優(yōu)化手段），不同zlevel值的圖形會放置在不同的Canvas中。我們可以把一些圖形變化頻繁（如有動畫）的組件設置成單獨的zlevel。需要注意的是，過多的Canvas會增加內(nèi)存開銷，在手機端上需要謹慎使用。zlevel值大的Canvas會放在zlevel值小的Canvas的上面。2.2.1認知直角坐標系5．直角坐標系的主要屬性及其設置（4）grid.znumber類型，用于設置組件所有圖形的z值。z值可以控制圖形的前后順序，z值小的圖形會被z值大的圖形覆蓋。相比zlevel值，z值的優(yōu)先級更低，而且不會創(chuàng)建新的Canvas。2.2.1認知直角坐標系5．直角坐標系的主要屬性及其設置（5）grid.leftstring或number類型，用于設置grid組件離容器左側(cè)的距離。left的值可以是像20這樣的具體像素值，可以是像'20%'這樣相對于容器寬度的百分比，也可以是'left'、'center'、'right’。如果left的值為'left'、'center'、'right'，組件會根據(jù)相應的位置自動對齊。2.2.1認知直角坐標系5．直角坐標系的主要屬性及其設置（6）grid.topstring或number類型，用于設置grid組件離容器頂部的距離。top的值可以是像20這樣的具體像素值，可以是像'20%'這樣相對于容器高度的百分比，也可以是'top'、'middle'、'bottom’。如果top的值為'top'、'middle'、'bottom'，組件會根據(jù)相應的位置自動對齊。2.2.1認知直角坐標系5．直角坐標系的主要屬性及其設置（7）grid.rightstring或number類型，用于設置grid組件離容器右側(cè)的距離。right的值可以是像20這樣的具體像素值，也可以是像'20%'這樣相對于容器寬度的百分比。（8）grid.bottomstring或number類型，用于設置grid組件離容器底部的距離。bottom的值可以是像20這樣的具體像素值，也可以是像'20%'這樣相對于容器高度的百分比。2.2.1認知直角坐標系5．直角坐標系的主要屬性及其設置（9）grid.widthstring或number類型，用于設置grid組件的寬度，默認為自適應（'auto'）。（10）grid.heightstring或number類型，用于設置grid組件的高度，默認為自適應（'auto'）。（11）grid.containLabelboolean類型，用于設置grid區(qū)域是否包含坐標軸的刻度標簽。2.2.1認知直角坐標系5．直角坐標系的主要屬性及其設置（12）grid.backgroundColorColor類型，用于設置網(wǎng)格背景色，默認為透明（'transparent’）。顏色可以使用RGB表示，如'rgb(128,128,128)’。如果想要加上alpha通道，可以使用RGBA，如'rgba(128,128,128,0.5)’。也可以使用十六進制格式，如'#ccc'。（13）grid.borderColorColor類型，用于設置網(wǎng)格的邊框顏色，支持的顏色格式同backgroundColor。2.2.1認知直角坐標系5．直角坐標系的主要屬性及其設置（14）grid.borderWidthnumber類型，用于設置網(wǎng)格的邊框線寬。（15）grid.shadowBlurnumber類型，用于設置圖形陰影的模糊大小，該屬性與shadowColor、shadowOffsetX、shadowOffsetY配合使用共同控制圖形的陰影效果。【示例代碼2-5】{shadowColor:'rgba(0,0,0,0.5)',shadowBlur:10}2.2.1認知直角坐標系5．直角坐標系的主要屬性及其設置（16）grid.shadowColorColor類型，用于設置陰影顏色，支持的顏色格式同grid.backgroundcolor。（17）grid.shadowOffsetXnumber類型，用于設置陰影水平方向上的偏移距離。（18）grid.shadowOffsetYnumber類型，用于設置陰影垂直方向上的偏移距離。（19）grid.tooltipObject類型，為本坐標系特定的提示框設定。2.2.2認知極坐標系ECharts的極坐標系（Polar）是一種使用極角和極徑描述二維平面上點的坐標系，每個極坐標系擁有一個角度軸和一個半徑軸。極坐標系可用于繪制散點圖和折線圖等。1．極角與極徑在極坐標系中，每個點的位置由極角和極徑兩個值確定。極角表示點與某個參考方向（通常是x軸正方向）之間的夾角，通常以弧度表示；極徑表示點到坐標原點的距離。2.2.2認知極坐標系2．應用場景極坐標系常用于表示圓形、周期性和徑向的數(shù)據(jù)。它特別適用于展示數(shù)據(jù)的循環(huán)性和周期性關(guān)系，以及數(shù)據(jù)點在一個圓形或極坐標網(wǎng)格上的分布情況。2.2.2認知極坐標系3．極坐標系的主要屬性及其設置極坐標系的主要屬性及其設置如下。（1）polar.idstring類型，用于設置組件id，默認不指定，指定后可用于在option或者API中引用組件。（2）polar.zlevelnumber類型，用于設置所有圖形的zlevel值。2.2.2認知極坐標系3．極坐標系的主要屬性及其設置（3）polar.znumber類型，用設置組件所有圖形的z值。（4）polar.centerArray類型，極坐標系的中心（圓心）坐標，數(shù)組的第一項是橫坐標，第二項是縱坐標。支持設置成百分比，設置成百分比時，第一項是相對于容器寬度的百分比，第二項是相對于容器高度的百分比。2.2.2認知極坐標系3．極坐標系的主要屬性及其設置【示例代碼2-6】center:[400,300]center:['50%','50%']2.2.2認知極坐標系3．極坐標系的主要屬性及其設置（5）polar.radiuspolar.radius用于設置極坐標系的半徑，值可以為如下類型。①number：直接指定外半徑值。②string：例如'20%'，表示外半徑為可視區(qū)尺寸（容器高度和寬度中較小的一項）的20%。③Array：數(shù)組的第一項是內(nèi)半徑，第二項是外半徑。2.2.2認知極坐標系3．極坐標系的主要屬性及其設置（6）polar.tooltipObjectpolar.tooltip相應坐標系特定的提示框設定，值為Object類型。2.2.3認知地理坐標系1．基本概念地理坐標系（geo）是ECharts中用于展示地圖數(shù)據(jù)的坐標系。它將現(xiàn)實世界的地理平面映射為二維平面，通過經(jīng)緯度系統(tǒng)實現(xiàn)坐標定位，可以展示地理分布、地域熱力、行政區(qū)劃等數(shù)據(jù)。2．地圖數(shù)據(jù)ECharts提供了一些常用的地圖數(shù)據(jù)，如全國各省市的邊界、世界各個國家的邊界等，用戶也可以根據(jù)需要自定義地圖數(shù)據(jù)。2.2.3認知地理坐標系3．屬性配置地理坐標系通過geo屬性進行配置，可以設置地圖類型、是否開啟鼠標縮放和平移漫游、視角中心點、地圖長寬比、縮放比例等屬性。例如，可以設置geo.map屬性來指定地圖類型，設置geo.roam屬性來開啟或關(guān)閉鼠標縮放和平移漫游功能。2.2.3認知地理坐標系4．數(shù)據(jù)展示在地理坐標系上，可以使用散點圖、熱力圖、線圖等圖表來展示地圖數(shù)據(jù)。數(shù)據(jù)通常通過series屬性進行配置，數(shù)據(jù)格式一般為對象數(shù)組，每個對象包含地名和對應的值。2.2.4認知平行坐標系1．基本概念平行坐標系是ECharts中用于可視化高維數(shù)據(jù)的坐標系。它可以同時展示多個變量之間的關(guān)系，并且可以通過調(diào)整軸的順序和縮放來探索不同的數(shù)據(jù)視角。2.2.4認知平行坐標系2．坐標軸配置在平行坐標系中，每個變量都對應一個坐標軸。這些坐標軸是平行的，并且可以通過線條將不同軸上的數(shù)據(jù)點連接起來。用戶可以通過配置parallelAxis屬性自定義坐標軸的屬性，如坐標軸標題、軸線樣式、刻度樣式等。2.2.4認知平行坐標系3．數(shù)據(jù)展示在平行坐標系中，數(shù)據(jù)通過線條的形式展示。每條線代表一個數(shù)據(jù)點，線條上的不同位置對應不同的變量值。用戶可以通過觀察線條的形狀和走向來分析數(shù)據(jù)點之間的關(guān)系和趨勢。2.2.5認知單軸單軸（SingleAxis）可以應用到散點圖中，展現(xiàn)一維數(shù)據(jù)。2.2.6認知日歷坐標系ECharts是通過日歷坐標系（Calendar）來實現(xiàn)日歷圖效果的，可以在熱力圖、散點圖、關(guān)系圖中使用日歷坐標系。快樂學習高效學習祝學習進步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊2熟知ECharts的圖表結(jié)構(gòu)與基本組件2.3認知ECharts圖表組件及常用術(shù)語2.3認知ECharts圖表組件及常用術(shù)語ECharts圖表組件及常用術(shù)語如下。1．標題標題（title）指圖表的標題。標題組件包含主標題和副標題。在ECharts2.x中，單個ECharts實例最多只能擁有一個標題組件。但是在ECharts3中，單個ECharts實例可以擁有任意多個標題組件，這在需要對標題進行排版，或者單個實例中的多個圖表都需要標題時會比較有用。掃描二維碼，瀏覽電子活頁2-1中的內(nèi)容，熟悉標題組件的主要屬性及其設置。2.3認知ECharts圖表組件及常用術(shù)語2．圖例圖例（legend）指圖表的圖例。圖例組件展現(xiàn)了不同系列的標記（symbol）、顏色和名稱?？梢酝ㄟ^單擊圖例控制哪些系列不顯示。ECharts3中單個ECharts實例可以擁有多個圖例組件，便于布局多個圖例。當圖例數(shù)量過多時，可以使用垂直滾動圖例或水平滾動圖例。掃描二維碼，瀏覽電子活頁2-2中的內(nèi)容，熟悉圖例組件的屬性及設置。2.3認知ECharts圖表組件及常用術(shù)語3．提示框提示框標簽（tooltip.axisPointer.label）是指提示框坐標軸指示器的文字。提示框坐標軸指示器的樣式包括線條樣式（tooltip.axisPointer.lineStyle）和十字線樣式（tooltip.axisPointer.crossStyle）。提示框組件可以設置在以下多處位置。①可以設置在全局，即tooltip。②可以設置在坐標系中，即grid.tooltip、polar.tooltip、single.tooltip。③可以設置在系列中，即series.tooltip。④可以設置在系列的每個數(shù)據(jù)項中，即series.data.tooltip。掃描二維碼，瀏覽電子活頁2-3中的內(nèi)容，熟悉提示框組件的屬性及設置。2.3認知ECharts圖表組件及常用術(shù)語4．坐標軸（1）x軸直角坐標系中的x軸由x軸線（xAxis.axisLine）、x軸刻度（xAxis.axisTick）、x軸刻度標簽（xAxis.axisLabel）、x軸標題4個部分組成。一般情況下，單個grid組件最多只能放上、下兩個x軸。x軸多于兩個時，需要對offset屬性進行配置，以防止多個x軸重疊。掃描二維碼，瀏覽電子活頁2-4中的內(nèi)容，熟悉直角坐標系中x軸（xAxis）的屬性及設置。2.3認知ECharts圖表組件及常用術(shù)語4．坐標軸（2）y軸直角坐標系中的y軸（yAxis）由y軸線（yAxis.axisLine）、y軸刻度（yAxis.axisTick）、y軸刻度標簽（yAxis.axisLabel）、y軸標題4個部分組成。掃描二維碼，瀏覽電子活頁2-5中的內(nèi)容，熟悉直角坐標系grid中的y軸（yAxis）的屬性及設置。直角坐標系中的第2個y軸默認顯示在右邊，y軸可以通過nameLocation改變位置。一般情況下，單個grid組件最多只能放左、右兩個y軸。y軸多于兩個時需要對offset屬性進行配置，以防止多個y軸重疊。2.3認知ECharts圖表組件及常用術(shù)語4．坐標軸（3）坐標軸分割線除坐標軸分割線（yAxis.splitLine）之外，還可以使用splitArea設置背景色分割。2.3認知ECharts圖表組件及常用術(shù)語5．系列的圖形樣式系列的圖形樣式（series.itemStyle）對不同類型的圖表有不同的意義。對折線圖而言，這個配置項用于設置拐點處圖形的樣式；對柱狀圖而言，這個配置項用于設置矩形條的樣式。該配置項是對整個系列的圖形做設置，如果要對其中的某一個特定數(shù)據(jù)點做設置，應使用series.data.itemStyle。2.3認知ECharts圖表組件及常用術(shù)語6．工具欄工具欄（toolbox）用于提供操作圖表的工具，可以自定義。工具欄組件如圖2-1所示，其內(nèi)置數(shù)據(jù)區(qū)域縮放、數(shù)據(jù)區(qū)域縮放還原、數(shù)據(jù)視圖、圖表類型切換、重置、保存為圖片等工具。掃描二維碼，瀏覽電子活頁2-6中的內(nèi)容，熟悉工具欄組件的屬性及設置。圖2-1工具欄組件2.3認知ECharts圖表組件及常用術(shù)語7．時間軸時間軸（timeline）用于實現(xiàn)多個option的切換，展現(xiàn)不同時間段的數(shù)據(jù)。timeline組件提供了在多個option間進行切換、播放等操作的功能。timeline和其他組件有些不同，它需要操作“多個option”，把傳入setOption的第1個參數(shù)，稱為ECOption，稱傳統(tǒng)的ECharts單個option為ECUnitOption。沒有設置timeline和mediaquery時，ECUnitOption就是ECOption。設置了timeline或mediaquery時，ECOption由幾個ECUnitOption組成；ECOption的各個根屬性形成一個ECUnitOption，叫作baseOption，它代表各種默認設置；2.3認知ECharts圖表組件及常用術(shù)語7．時間軸options數(shù)組每項形成一個ECUnitOption，為了方便也稱為switchableOption，它代表每個時間粒度對應的option。baseOption和switchableOption會用來計算finalOption，圖表就是根據(jù)這個最終結(jié)果繪制的。初始化的時候，對應當前時間的switchableOption會被合并（merge）到baseOption，形成finalOption。每當時間變化時，對應新時間的switchableOption會被合并到finalOption。掃描二維碼，瀏覽電子活頁2-7中的內(nèi)容，熟悉時間軸組件的主要屬性及其設置。2.3認知ECharts圖表組件及常用術(shù)語8．數(shù)據(jù)區(qū)域縮放數(shù)據(jù)區(qū)域縮放（dataZoom）用來放大一部分數(shù)據(jù)，從而突出數(shù)據(jù)信息的細節(jié)，幫助概覽數(shù)據(jù)整體，或者去除離群點的影響。掃描二維碼，瀏覽電子活頁2-8中的內(nèi)容，熟悉數(shù)據(jù)區(qū)域縮放組件的屬性及設置。9．刷選刷選（Brush）是區(qū)域選擇組件，用戶可以利用它選擇圖中一部分數(shù)據(jù)，從而查看被選中的數(shù)據(jù)，或者它們的一些統(tǒng)計計算結(jié)果。掃描二維碼，瀏覽電子活頁2-9中的內(nèi)容，熟悉刷選組件的屬性及設置。2.3認知ECharts圖表組件及常用術(shù)語10．視覺映射視覺映射（visualMap）可以將數(shù)據(jù)值映射為圖形的形狀、大小、顏色等。visualMap組件用于進行“視覺編碼”，也就是將數(shù)據(jù)映射到視覺元素（視覺通道）。2.3認知ECharts圖表組件及常用術(shù)語10．視覺映射visualMap組件中可以使用的視覺元素如下。①symbol：圖形類別。②symbolSize：圖形大小。③color：顏色。④colorAlpha：顏色的透明度。⑤opacity：透明度。⑥colorLightness：顏色的明暗度。⑦colorSaturation：顏色的飽和度。⑧colorHue：顏色的色調(diào)。2.3認知ECharts圖表組件及常用術(shù)語10．視覺映射visualMap組件可以定義多個，從而同時對數(shù)據(jù)中的多個維度進行視覺映射。visualMap組件分為分段型（visualMapPiecewise）和連續(xù)型（visualMapContinuous），通過type來區(qū)分。2.3認知ECharts圖表組件及常用術(shù)語10．視覺映射【示例代碼2-8】option={visualMap:[{type:'continuous',…},{type:'piecewise',…}],…};2.3認知ECharts圖表組件及常用術(shù)語11．標注、標線、標域ECharts使用markPoint設置標記點，使用markLine設置標記線，使用markArea設置標記區(qū)域。（1）圖表標注（series-line.markPoint）markPoint用于設置圖表標注。掃描二維碼，瀏覽電子活頁2-10中的內(nèi)容，熟悉圖表標注的主要屬性及其設置。2.3認知ECharts圖表組件及常用術(shù)語11．標注、標線、標域（2）圖表標線（series-line.markLine）markLine用于設置圖表標線。掃描二維碼，瀏覽電子活頁2-11中的內(nèi)容，熟悉圖表標線的主要屬性及其設置。（3）圖表標域（series-line.markArea）markArea用于設置圖表標域，常用于標記圖表中某個范圍的數(shù)據(jù)，如標出某段時間投放了廣告。掃描二維碼，瀏覽電子活頁2-12中的內(nèi)容，熟悉圖表標域的主要屬性及其設置。2.3認知ECharts圖表組件及常用術(shù)語12．繪制圖形元素繪制圖形元素（graphic）包括image、text、circle、sector、ring、polygon、polyline、rect、line、bezierCurve、arc、group等。ECharts圖表組件如圖2-2所示。圖2-2ECharts圖表組件快樂學習高效學習祝學習進步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊2熟知ECharts的圖表結(jié)構(gòu)與基本組件2.4設置ECharts圖表的樣式2.4.1設置顏色主題最簡單的更改全局樣式的方式是直接采用顏色主題（theme）。ECharts5.x除了默認主題，還內(nèi)置了'dark'主題，可以直接進行切換：varchart=echarts.init(dom,'dark');其他沒有內(nèi)置在ECharts中的主題，需要用戶自行加載。這些主題可以在主題編輯器里獲取，也可以使用主題編輯器自行編輯主題。下載下來的主題的使用方式如下。如果主題保存為JSON文件，則需要自行加載和注冊。2.4.1設置顏色主題【示例代碼2-10】fetch('theme/vintage.json').then(r=>r.json()).then(theme=>{echarts.registerTheme('vintage',theme);varchart=echarts.init(dom,'vintage');})如果保存為UMD格式的JavaScript文件，文件內(nèi)部已經(jīng)做了自注冊，直接引入JavaScript文件即可：varchart=echarts.init(dom,'vintage');2.4.2設置調(diào)色盤可以在option中設置調(diào)色盤，它給定了一組顏色，圖形、系列會自動從中選擇顏色?？梢栽O置全局的調(diào)色盤，也可以設置系列專屬的調(diào)色盤。2.4.3直接設置圖形元素的樣式直接的樣式設置是比較常用的樣式設置方式。縱觀ECharts的option，很多地方可以設置itemStyle、lineStyle、areaStyle、label等。這些地方可以直接設置圖形元素的顏色、線寬、點的大小、標簽的文字、標簽的樣式等。一般來說，ECharts的各個系列和組件都遵從這些命名習慣，雖然在不同圖表和組件中，itemStyle、label等可能出現(xiàn)在不同的地方。2.4.4通過emphasis屬性定制高亮的樣式鼠標指針懸停在圖形元素上時，一般會出現(xiàn)高亮的樣式。默認情況下，高亮的樣式是根據(jù)普通樣式自動生成的，但也可以通過emphasis屬性來定制。emphasis的結(jié)構(gòu)和普通樣式的結(jié)構(gòu)相同。2.4.4通過emphasis屬性定制高亮的樣式【示例代碼2-12】option={series:{type:'scatter',itemStyle:{color:'red'},label:{show:true,formatter:'Thisisanormallabel.'},2.4.4通過emphasis屬性定制高亮的樣式【示例代碼2-12】emphasis:{itemStyle:{color:'blue'},label:{show:true,formatter:'Thisisaemphasislabel.'}}}};2.4.5數(shù)據(jù)的視覺映射數(shù)據(jù)可視化是數(shù)據(jù)到視覺元素的映射過程，這個過程也可稱為視覺編碼，視覺元素也可稱為視覺通道。ECharts的每種圖表都內(nèi)置了這種映射過程，如折線圖把數(shù)據(jù)映射到“線”，柱狀圖把數(shù)據(jù)映射到“長度”。一些更復雜的圖表（如關(guān)系圖、事件河流圖、樹圖）也都會進行各自內(nèi)置的映射。2.4.5數(shù)據(jù)的視覺映射1．數(shù)據(jù)和維度ECharts中的數(shù)據(jù)一般存放于series.data中。圖表類型不同，數(shù)據(jù)的具體形式可能有些許差異，但它們都是數(shù)據(jù)項（dataItem）的集合。每個數(shù)據(jù)項含有數(shù)據(jù)值（value）和其他信息（如果需要的話）。每個數(shù)據(jù)值可以是單一的數(shù)值（一維）或者一個數(shù)組（多維）。例如，series.data最常見的形式是“線性表”，即一個普通數(shù)組。2.4.5數(shù)據(jù)的視覺映射1．數(shù)據(jù)和維度【示例代碼2-13】series:{data:[{value:3.4,itemStyle:{}},4.2,10.8,7.2,];}2.4.5數(shù)據(jù)的視覺映射1．數(shù)據(jù)和維度series:{data:[{value:[3.4,4.5,15],itemStyle:{}},[4.2,2.3,20],[10.8,9.5,30],[7.2,8.8,18]];}2.4.5數(shù)據(jù)的視覺映射1．數(shù)據(jù)和維度在圖表中，往往默認把value的前一兩個維度進行映射，如將第1個維度映射到x軸，將第2個維度映射到y(tǒng)軸。如果要把更多的維度展現(xiàn)出來，可以借助visualMap。常見的情況是，散點圖使用半徑展現(xiàn)第3個維度。2.4.5數(shù)據(jù)的視覺映射2．連續(xù)型與分段型視覺映射組件ECharts的視覺映射組件分為連續(xù)型（visualMapContinuous）與分段型（visualMapPiecewise）。連續(xù)型的意思是進行視覺映射的數(shù)據(jù)維度是連續(xù)的數(shù)值，分段型則指數(shù)據(jù)被分成了多段或者是離散型的數(shù)據(jù)。（1）連續(xù)型視覺映射組件連續(xù)型視覺映射組件通過指定最大值、最小值，就可以確定視覺映射的范圍。2.4.5數(shù)據(jù)的視覺映射2．連續(xù)型與分段型視覺映射組件【示例代碼2-14】option={visualMap:[{type:'continuous',min:0,max:5000,dimension:3,seriesIndex:4,inRange:{color:['blue','#121122','red'],symbolSize:[30,100]},outOfRange:{symbolSize:[30,100]}}]};2.4.5數(shù)據(jù)的視覺映射其中，visualMap.inRange表示在數(shù)據(jù)映射范圍內(nèi)的數(shù)據(jù)采用的樣式，visualMap.outOfRange指定了超出映射范圍的數(shù)據(jù)的樣式，visualMap.dimension則指定了將數(shù)據(jù)的哪個維度做視覺映射。2.4.5數(shù)據(jù)的視覺映射（2）分段型視覺映射組件分段型視覺映射組件有以下3種模式。①連續(xù)型數(shù)據(jù)平均分段：依據(jù)visualMap-piecewise.splitNumbe將數(shù)據(jù)自動平均分割成若干段。②連續(xù)型數(shù)據(jù)自定義分段：依據(jù)visualMap-piecewise.pieces定義每段數(shù)據(jù)的范圍。③離散數(shù)據(jù)（類別性數(shù)據(jù)）：類別定義在visualMap-piecewise.categories中。使用分段型視覺映射組件時，需要將type設為'piecewise'，并且選擇一種模式，其他配置項與連續(xù)型視覺映射組件的類似?？鞓穼W習高效學習祝學習進步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊2熟知ECharts的圖表結(jié)構(gòu)與基本組件2.5使用數(shù)據(jù)集管理數(shù)據(jù)數(shù)據(jù)集是專門用來管理數(shù)據(jù)的組件。雖然每個系列都可以在series.data中設置數(shù)據(jù)，但是從ECharts4支持數(shù)據(jù)集開始，更推薦使用數(shù)據(jù)集來管理數(shù)據(jù)。這種做法的優(yōu)勢在于，數(shù)據(jù)可以被多個組件復用，也便于實現(xiàn)“數(shù)據(jù)和其他配置”分離的配置風格，因為在實際應用中，數(shù)據(jù)往往頻繁改變，而其他配置大多保持穩(wěn)定。2.5.1在系列中設置數(shù)據(jù)【訓練2-1】在網(wǎng)頁文件test0201.html中將數(shù)據(jù)設置在系列中【代碼編寫】在Dreamweaver中編寫對應的代碼。主要代碼如下：<divid="main"style="width:600px;height:400px;"></div><scripttype="text/javascript">varchartDom=document.getElementById('main');varmyChart=echarts.init(chartDom);varoption;2.5.1在系列中設置數(shù)據(jù)option={xAxis:{type:'category',data:['蘋果','梨子','葡萄','杧果']},yAxis:{},series:[{type:'bar',name:'7月',data:[89.3,83.1,94.4,85.4]},2.5.1在系列中設置數(shù)據(jù){type:'bar',name:'8月',data:[95.8,89.4,91.2,76.9]},{type:'bar',name:'9月',data:[97.7,92.1,92.5,78.1]}]};myChart.setOption(option);</script>2.5.1在系列中設置數(shù)據(jù)【圖表展示】訓練2-1對應的柱狀圖如圖2-3所示。圖2-3訓練2-1對應的柱狀圖2.5.1在系列中設置數(shù)據(jù)在系列中設置數(shù)據(jù)適用于對一些特殊的數(shù)據(jù)結(jié)構(gòu)（如樹、圖等）進行一定的數(shù)據(jù)類型定制，但是需要用戶先處理數(shù)據(jù)，把數(shù)據(jù)分割并配置到各個系列（和類目軸）中。此外，這種方式不支持多個系列共享一份數(shù)據(jù)，給基于原始數(shù)據(jù)進行圖表類型、系列的映射安排帶來了不便。2.5.2在數(shù)據(jù)集中設置數(shù)據(jù)將數(shù)據(jù)設置在數(shù)據(jù)集中的好處如下。（1）貼近數(shù)據(jù)可視化常見思路：先提供數(shù)據(jù)，再指定數(shù)據(jù)到視覺元素的映射，從而形成圖表。（2）數(shù)據(jù)和其他配置分離，更易于管理。數(shù)據(jù)通常頻繁改變，其他配置通常不變。（3）數(shù)據(jù)可以被多個系列或者組件復用，對于數(shù)據(jù)量大的場景，不必分別為每個系列創(chuàng)建一份數(shù)據(jù)。（4）支持更多數(shù)據(jù)格式（如二維數(shù)組、對象數(shù)組等），一定程度上減輕了轉(zhuǎn)換數(shù)據(jù)格式的負擔。目前并非所有圖表都支持數(shù)據(jù)集，支持數(shù)據(jù)集的圖表有折線圖、柱狀圖、散點圖、特效散點圖、平行坐標圖、K線圖、地圖、漏斗圖、自定義圖表。2.5.2在數(shù)據(jù)集中設置數(shù)據(jù)【訓練2-2】在網(wǎng)頁文件test0202.html中將數(shù)據(jù)設置在數(shù)據(jù)集中【代碼編寫】在Dreamweaver中編寫對應的代碼。主要代碼如下：option={legend:{},tooltip:{},dataset:{source:[['product','4月','5月','6月'],2.5.2在數(shù)據(jù)集中設置數(shù)據(jù)【訓練2-2】在網(wǎng)頁文件test0202.html中將數(shù)據(jù)設置在數(shù)據(jù)集中['蘋果',43.3,85.8,93.7],['梨子',83.1,73.4,55.1],['葡萄',86.4,65.2,82.5],['杧果',72.4,53.9,39.1]]},xAxis:{type:'category'},yAxis:{},series:[{type:'bar'},{type:'bar'},{type:'bar'}]};2.5.2在數(shù)據(jù)集中設置數(shù)據(jù)【圖表展示】訓練2-2對應的柱狀圖如圖2-4所示。圖2-4訓練2-2對應的柱狀圖快樂學習高效學習祝學習進步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊2熟知ECharts的圖表結(jié)構(gòu)與基本組件【任務2-1】繪制ECharts柱狀圖安家樂電器公司9月的空調(diào)、冰箱、洗衣機、電視機、電風扇、熱水器銷售數(shù)量分別為150、200、360、100、180、200，試繪制ECharts柱狀圖，展示9月該公司各類電器產(chǎn)品的銷售情況。【任務描述】【實現(xiàn)過程】【任務2-1】繪制ECharts柱狀圖1．創(chuàng)建HTML文件啟動Dreamweaver，創(chuàng)建網(wǎng)頁task0201.html，將該文件保存到本模塊文件夾Unit02中。網(wǎng)頁task0201.html初始HTML代碼如下：【實現(xiàn)過程】【任務2-1】繪制ECharts柱狀圖1．創(chuàng)建HTML文件<!doctypehtml><html><head><metacharset="utf-8"><title>無標題文檔</title></head><body></body></html>【實現(xiàn)過程】【任務2-1】繪制ECharts柱狀圖2．引入ECharts在HTML文檔的<head>與</head>之間編寫代碼，引入ECharts<head><metacharset="utf-8"><title>ECharts圖表示例</title><!--引入ECharts文件--><scriptsrc="../ECharts/echarts.min.js"></script></head>【實現(xiàn)過程】【任務2-1】繪制ECharts柱狀圖3．準備HTML容器在HTML文檔中，準備一個具有寬度和高度的DOM元素作為圖表的容器。HTML代碼如下：<divid="main"style="width:600px;height:400px;"></div>【實現(xiàn)過程】【任務2-1】繪制ECharts柱狀圖4．初始化ECharts實例在JavaScript代碼中，通過echarts.init方法初始化ECharts實例，并將其綁定到之前準備的DOM元素上。JavaScript代碼如下：varchartDom=document.getElementById('main');varmyChart=echarts.init(chartDom);varoption;【實現(xiàn)過程】【任務2-1】繪制ECharts柱狀圖5．設置圖表的配置項和數(shù)據(jù)ECharts的圖表配置依賴于一個名為option的JavaScript對象或JSON格式的數(shù)據(jù)。option對象可以配置標題、坐標軸、數(shù)據(jù)系列等，決定了繪制出什么樣的圖表。配置柱狀圖的JavaScript代碼如下：【實現(xiàn)過程】【任務2-1】繪制ECharts柱狀圖5．設置圖表的配置項和數(shù)據(jù)option={//配置標題組件，包含主標題和副標題

title:{text:'示例柱狀圖',subtext:'展示電器產(chǎn)品的銷量'},tooltip:{},//配置圖例組件，一個ECharts圖表可以包含多個圖例組件【實現(xiàn)過程】【任務2-1】繪制ECharts柱狀圖5．設置圖表的配置項和數(shù)據(jù)legend:{data:['銷量']},//配置x軸

xAxis:{data:['空調(diào)','冰箱','洗衣機','電視機','電風扇','熱水器']},【實現(xiàn)過程】【任務2-1】繪制ECharts柱狀圖5．設置圖表的配置項和數(shù)據(jù)//配置y軸

yAxis:{},//配置系列，系列類型通過type控制

series:[{name:'銷量',type:'bar',data:[150,200,360,100,180,200]}]};【實現(xiàn)過程】【任務2-1】繪制ECharts柱狀圖6．設置圖表選項并渲染圖表通過調(diào)用ECharts實例的setOption方法，將準備好的option對象應用到圖表上，從而渲染出圖表。JavaScript代碼如下：myChart.setOption(option);網(wǎng)頁task0201.html完整的代碼如下：【實現(xiàn)過程】【任務2-1】繪制ECharts柱狀圖<!doctypehtml><html><head><metacharset="utf-8"><title>ECharts圖表示例</title><!--引入ECharts文件--><scriptsrc="../ECharts/echarts.min.js"></script></head>【實現(xiàn)過程】【任務2-1】繪制ECharts柱狀圖<body><!--為ECharts準備一個定義了寬度、高度的DOM--><divid="main"style="width:600px;height:400px;"></div><scripttype="text/javascript">//基于準備好的DOM初始化ECharts實例

varchartDom=document.getElementById('main');varmyChart=ech