ECharts數(shù)據(jù)可視化 課件全套 第1-8章 初識ECharts -項目實戰(zhàn)-電商數(shù)據(jù)可視化系統(tǒng)

第1章初識ECharts《ECharts數(shù)據(jù)可視化》學(xué)習(xí)目標(biāo)/Target

了解數(shù)據(jù)可視化的概念，能夠描述數(shù)據(jù)可視化的基本流程和應(yīng)用場景了解常見的數(shù)據(jù)可視化工具，能夠說出數(shù)據(jù)可視化工具ECharts、D3、

Highcharts和AntV的區(qū)別

了解ECharts的基本概念，能夠說出什么是ECharts

熟悉ECharts5的新特性，能夠歸納ECharts5的主要特性學(xué)習(xí)目標(biāo)/Target

掌握ECharts的獲取方式，能夠獨立完成ECharts的獲取

掌握VisualStudioCode編輯器的下載和安裝，能夠獨立安裝Visual

StudioCode

掌握中文語言擴展的安裝，能夠在VisualStudioCode編輯器中安裝

中文語言擴展

掌握VisualStudioCode編輯器的使用方法，能夠在項目中創(chuàng)建HTML5

文檔結(jié)構(gòu)章節(jié)概述/Summary隨著移動互聯(lián)網(wǎng)的廣泛應(yīng)用，人們的日常生活中產(chǎn)生了大量的數(shù)據(jù)，這些數(shù)據(jù)中蘊藏著許多有價值的信息。如何將這些數(shù)據(jù)以直觀、形象、交互式的方式展示到網(wǎng)頁中，成了備受關(guān)注的焦點。我們可以借助數(shù)據(jù)可視化工具，實現(xiàn)這一目標(biāo)。ECharts是Web前端開發(fā)中常用的數(shù)據(jù)可視化工具之一，使用它可以很輕松地將數(shù)據(jù)繪制成圖表。本章將對數(shù)據(jù)可視化、ECharts，以及VisualStudioCode編輯器進行詳細(xì)講解。目錄/Contents1.11.21.3數(shù)據(jù)可視化EChartsVisualStudioCode編輯器數(shù)據(jù)可視化1.1

先定一個小目標(biāo)！了解數(shù)據(jù)可視化的概念，能夠描述數(shù)據(jù)可視化的基本流程1.1.1數(shù)據(jù)可視化概述什么是數(shù)據(jù)可視化？1.1.1數(shù)據(jù)可視化概述數(shù)據(jù)可視化是指將大型數(shù)據(jù)集中的數(shù)據(jù)以圖形或圖像的形式表示，并利用數(shù)據(jù)分析和開發(fā)工具發(fā)現(xiàn)其中未知信息的處理過程。1.1.1數(shù)據(jù)可視化概述數(shù)據(jù)可視化提倡美學(xué)形式與功能需要“齊頭并進”，它既不會因為要實現(xiàn)功能而令人感到枯燥、乏味，也不會因為要實現(xiàn)絢麗多彩的視覺效果而令圖表過于復(fù)雜，而是直觀地傳達(dá)關(guān)鍵的特征，從而揭示蘊含在數(shù)據(jù)中的規(guī)律和道理。1.1.1數(shù)據(jù)可視化概述數(shù)據(jù)可視化的基本流程：數(shù)據(jù)可視化的基本流程即從數(shù)據(jù)集到數(shù)據(jù)展示的完整流程，具體解釋如下。1.1.1數(shù)據(jù)可視化概述首先從數(shù)據(jù)集中選擇與目標(biāo)需求關(guān)系緊密的目標(biāo)數(shù)據(jù)。接著對目標(biāo)數(shù)據(jù)進行一系列預(yù)處理，如過濾“臟”數(shù)據(jù)、敏感數(shù)據(jù)，并對空白數(shù)據(jù)進行適當(dāng)處理，刪除重復(fù)值，剔除與目標(biāo)無關(guān)的冗余數(shù)據(jù)等，生成預(yù)處理數(shù)據(jù)。然后將預(yù)處理數(shù)據(jù)經(jīng)過一系列變換后生成變換數(shù)據(jù)，使變換數(shù)據(jù)的結(jié)構(gòu)符合數(shù)據(jù)可視化工具的要求。最后借助數(shù)據(jù)可視化工具將變換數(shù)據(jù)渲染到網(wǎng)頁中進行展示。數(shù)據(jù)可視化工具需要具備的3個基本特性：實時性數(shù)據(jù)可視化工具應(yīng)具備適應(yīng)大數(shù)據(jù)時代數(shù)據(jù)量的指數(shù)式增長需求的特性，能夠快速地收集、分析數(shù)據(jù)并對數(shù)據(jù)信息進行實時更新。展現(xiàn)形式多樣性數(shù)據(jù)可視化工具應(yīng)具備快速開發(fā)、易于操作的特性，能夠順應(yīng)互聯(lián)網(wǎng)時代信息多變的特點。數(shù)據(jù)可視化工具應(yīng)支持豐富的展現(xiàn)形式，充分滿足數(shù)據(jù)表現(xiàn)的多維需求，并支持多種數(shù)據(jù)集成方式。易操作性1.1.1數(shù)據(jù)可視化概述

先定一個小目標(biāo)！了解數(shù)據(jù)可視化的概念，能夠描述數(shù)據(jù)可視化的應(yīng)用場景1.1.2數(shù)據(jù)可視化應(yīng)用場景數(shù)據(jù)可視化技術(shù)產(chǎn)生的背景？1.1.2數(shù)據(jù)可視化應(yīng)用場景當(dāng)前，人類已進入大數(shù)據(jù)時代，數(shù)據(jù)與日常生活密切相關(guān)。由于數(shù)據(jù)量的不斷增加和數(shù)據(jù)來源的多樣性，人們對數(shù)據(jù)可視化的需求也日益增加。傳統(tǒng)的文本數(shù)據(jù)已經(jīng)無法滿足人們要對數(shù)據(jù)信息進行深入理解和全面分析的需求。為了順應(yīng)大數(shù)據(jù)的發(fā)展趨勢，越來越多的企業(yè)開始使用各種數(shù)據(jù)可視化技術(shù)。1.1.2數(shù)據(jù)可視化應(yīng)用場景1.1.2數(shù)據(jù)可視化應(yīng)用場景在互聯(lián)網(wǎng)行業(yè)中，數(shù)據(jù)可視化技術(shù)的應(yīng)用場景如下。移動端圖表通用報表大屏可視化地理可視化1.通用報表1.1.2數(shù)據(jù)可視化應(yīng)用場景通用報表的類型多種多樣，常見的類型包括表格、折線圖、柱狀圖、餅圖等。以柱狀圖的形式展示某水果店鋪上周水果的銷售情況：可以直觀地看出各種水果的銷量高低，例如，蘋果是銷量最高的水果，草莓是銷量最低的水果。2.移動端圖表1.1.2數(shù)據(jù)可視化應(yīng)用場景隨著移動通信網(wǎng)絡(luò)的不斷完善，以及智能手機的進一步普及，移動端圖表也越來越受到關(guān)注。用戶只需一部手機或平板計算機，就可以隨時隨地查看業(yè)務(wù)數(shù)據(jù)。通過移動端圖表展示股票的走勢情況：可以看出股票價格在某一段時間內(nèi)的走勢，展示了該股票的最高價為6.22，最低價為6.11。3.大屏可視化1.1.2數(shù)據(jù)可視化應(yīng)用場景大屏可視化是指利用大屏幕展示可視化的數(shù)據(jù)。常被用于城市智能運行中心、應(yīng)急指揮中心、電力調(diào)度中心、金融交易大廳等部門和機構(gòu)。通過大屏可視化方式制作的中國電影票房數(shù)據(jù)看板：可以看出，城市票房、當(dāng)前熱映電影票房、院線票房等數(shù)據(jù)都展現(xiàn)了良好的大屏可視化效果。4.地理可視化1.1.2數(shù)據(jù)可視化應(yīng)用場景地理可視化常用于林業(yè)、考古、環(huán)境研究、城市規(guī)劃等領(lǐng)域。通過地理可視化模擬現(xiàn)實情況，可進一步探索現(xiàn)實環(huán)境。某城市道路擁堵情況：對城市道路的交通情況進行了分析并展示，圖中的紅色區(qū)域表示“擁堵”，黃色區(qū)域表示“車行緩慢”，綠色區(qū)域表示“交通暢通”。

先定一個小目標(biāo)！了解常見的數(shù)據(jù)可視化工具，能夠說出數(shù)據(jù)可視化工具ECharts、D3、Highcharts和AntV的區(qū)別1.1.3常見的數(shù)據(jù)可視化工具1.1.3常見的數(shù)據(jù)可視化工具ECharts支持各種圖表類型，包括折線圖、柱狀圖、散點圖、餅圖等，并提供了豐富的交互功能?？梢耘cVue.js、React等前端開源框架無縫集成。D3是一款基于JavaScript的可視化工具，提供了豐富的API，可以用來創(chuàng)建各種類型的可視化圖表，如散點圖、線圖、柱狀圖等。1.1.3常見的數(shù)據(jù)可視化工具Highcharts提供了幾十種不同類型的圖表，包括線圖、柱狀圖、餅圖等，同時也提供了很多配置項，可以用來自定義圖表外觀和交互行為。AntV基于G2可視化引擎和Vue.js、React等前端框架，提供了一系列高質(zhì)量、易用性高的可視化組件和圖表，能夠幫助用戶將復(fù)雜的數(shù)據(jù)轉(zhuǎn)換為易于理解和分析的圖表，同時還提供了豐富的定制化選項和優(yōu)秀的用戶體驗。ECharts1.2

先定一個小目標(biāo)！了解ECharts的基本概念，能夠說出什么是ECharts1.2.1ECharts基本概念1.2.1ECharts基本概念ECharts的底層基于ZRender（二維繪圖引擎），支持Canvas、SVG（ScalableVectorGraphics，可縮放矢量圖形）、VML（VectorMarkupLanguage，矢量標(biāo)記語言）等多種渲染方法，提供了坐標(biāo)軸、圖例、提示框等基礎(chǔ)組件，基于這些組件可以創(chuàng)建豐富的圖表。常見的圖表如下：折線圖柱狀圖餅圖1.2.1ECharts基本概念散點圖熱力圖旭日圖漏斗圖儀表盤?；鶊D1.2.1ECharts基本概念下面演示一個由ECharts生成的折線圖。1.2.1ECharts基本概念折線圖包括4個公共組件，分別為標(biāo)題組件、圖例組件、工具欄組件和提示框組件，每個組件的具體介紹如下。標(biāo)題組件：用于顯示主標(biāo)題和副標(biāo)題。主標(biāo)題為“未來一周氣溫變化”，副標(biāo)題為“我是副標(biāo)題”。圖例組件：用于顯示圖例。單擊圖例項（最高氣溫、最低氣溫）可以控制對應(yīng)顏色折線的顯示或隱藏。工具欄組件：用于提供操作圖表的工具，可自定義。工具欄組件的7個工具從左到右依次是區(qū)域縮放、區(qū)域縮放還原、數(shù)據(jù)視圖、切換為折線圖、切換為柱狀圖、還原、保存為圖片。提示框組件：用于讓鼠標(biāo)指針懸浮在圖形上方時顯示提示信息。例如，顯示鼠標(biāo)指針懸浮位置的最高氣溫和最低氣溫。1.2.1ECharts基本概念ECharts的主要特性介紹如下。多種圖表類型：支持多種圖表類型，如折線圖、柱狀圖、餅圖、雷達(dá)圖等。多種數(shù)據(jù)格式：支持多種數(shù)據(jù)格式，如JSON、數(shù)組等，便于用戶快速導(dǎo)入數(shù)據(jù)。支持流數(shù)據(jù)：支持對流數(shù)據(jù)的動態(tài)渲染，省去了數(shù)據(jù)加載等待時間；提供了增量渲染技術(shù)，只渲染變化的數(shù)據(jù)以提高系統(tǒng)的資源利用率?？缙脚_：支持PC端、移動端、微信小程序等，提供了pyecharts、ECharts.jl工具。支持多種語言：支持多種語言，包括中文、英文、法文、德文等。支持深度數(shù)據(jù)交互：提供了交互組件，可以進行多維度數(shù)據(jù)篩選、視圖縮放等交互操作。動畫效果：可以設(shè)置初始的動畫效果、更新數(shù)據(jù)后的動畫效果等，使圖表更加生動和易于理解。無障礙訪問：視覺障礙人士可以在朗讀設(shè)備的幫助下了解圖表的內(nèi)容。高度自定義：提供了很多可自定義的配置項，可以通過修改這些配置項來調(diào)整圖表的樣式。

先定一個小目標(biāo)！熟悉ECharts5的新特性，能夠歸納ECharts5的主要特性1.2.2ECharts5的新特性1.2.2ECharts5的新特性ECharts5使用TypeScript對代碼進行了重構(gòu)，通過TypeScript的類型檢查保證了代碼類型的一致性，并圍繞數(shù)據(jù)可視化作品的敘事、表達(dá)能力，在視覺設(shè)計、狀態(tài)管理、性能和數(shù)據(jù)處理等方面做了一些細(xì)化，增強了圖表傳達(dá)數(shù)據(jù)背后含義的能力，幫助開發(fā)者更加輕松地創(chuàng)造滿足各種場景需求的數(shù)據(jù)可視化作品。1.2.2ECharts5的新特性ECharts5所具有的5個方面的新特性：0102030405ECharts5增強了動畫功能，其中包括圖表的動態(tài)敘事功能，這一功能幫助用戶更容易理解圖表背后表達(dá)的故事。ECharts5根據(jù)數(shù)據(jù)可視化理論優(yōu)化了圖表設(shè)計，重新設(shè)計默認(rèn)的主題樣式，針對不同的系列和組件分別做了優(yōu)化調(diào)整。ECharts5通過多狀態(tài)設(shè)計讓用戶參與交互，交互的豐富性和流暢性使得用戶可更深刻理地解數(shù)據(jù)之間的關(guān)聯(lián)關(guān)系。ECharts5加強了數(shù)據(jù)集的數(shù)據(jù)轉(zhuǎn)換能力，讓開發(fā)者可以使用簡單的方式實現(xiàn)常用的數(shù)據(jù)處理操作，例如數(shù)據(jù)過濾、排序、聚合、直方圖、回歸線計算等。ECharts5新增了許多用于提高可訪問性的設(shè)計，可幫助視覺障礙人士更好地理解圖表內(nèi)容。動態(tài)敘事視覺設(shè)計交互能力開發(fā)體驗可訪問性ECharts5新特性

先定一個小目標(biāo)！掌握ECharts的獲取方式，能夠獨立完成ECharts的獲取1.2.3ECharts獲取方式1.2.3ECharts獲取方式在使用ECharts開發(fā)項目前，開發(fā)者需要先獲取ECharts。獲取ECharts的主要方式有以下4種。從npm獲取從GitHub獲取從CDN獲取通過在線定制的方式獲取1.從GitHub獲取打開瀏覽器，登錄GitHub網(wǎng)站，找到apache/echarts項目下的Releases頁面，該頁面提供了各個版本的下載鏈接，找到ECharts5.4.1版本，如下圖所示。1.2.3ECharts獲取方式單擊“Assets”下方的“Sourcecode(zip)”鏈接，即可下載echarts-5.4.1.zip文件。下載完成后，將該文件解壓。解壓后的dist目錄中包含了多種類型的ECharts文件

，如下圖所示。1.2.3ECharts獲取方式1.2.3ECharts獲取方式注意：echarts.js是未經(jīng)過代碼壓縮的文件，它能夠更好地顯示錯誤提示和警告信息；echarts.min.js是經(jīng)過代碼壓縮的文件，文件體積比較小，加載速度更快。對于開發(fā)者來說，如果需要修改ECharts源代碼或者需要更詳細(xì)的錯誤提示信息，應(yīng)使用echarts.js文件；如果需要在生產(chǎn)環(huán)境中使用ECharts，則應(yīng)使用echarts.min.js文件。2.從npm獲取1.2.3ECharts獲取方式請確保計算機中安裝了Node.js，如果沒有安裝，需要先進行安裝。本書使用的Node.js版本為16.17.0，對應(yīng)的npm的版本為8.15.0。npminstallecharts@5.4.1--save@5.4.1表示獲取的ECharts版本項目運行時依賴從npm獲取ECharts的命令如下：1.2.3ECharts獲取方式將ECharts獲取完成后，需要在項目中引入ECharts才可以使用。方式1：完整引入import*asechartsfrom'echarts';方式2：按需引入import*asechartsfrom'echarts/core';import{BarChart}from'echarts/charts';import{TitleComponent, //標(biāo)題組件

TooltipComponent, //提示框組件

GridComponent, //直角坐標(biāo)系組件

DatasetComponent, //數(shù)據(jù)集組件

TransformComponent //數(shù)據(jù)轉(zhuǎn)換器組件}from'echarts/components';1.2.3ECharts獲取方式import{LabelLayout,UniversalTransition}from'echarts/features';import{CanvasRenderer}from'echarts/renderers';echarts.use([TitleComponent,TooltipComponent,GridComponent,DatasetComponent,TransformComponent,BarChart,LabelLayout,UniversalTransition,CanvasRenderer]);>>接上頁代碼3.從CDN獲取在網(wǎng)頁中引入免費CDN服務(wù)器cdnjs、jsDelivr和Staticfile提供的ECharts。1.2.3ECharts獲取方式<!--cdnjs服務(wù)器提供的ECharts--><scriptsrc="/ajax/libs/echarts/5.4.1/echarts.min.js"></script><!--jsDelivr服務(wù)器提供的ECharts--><scriptsrc="/npm/echarts@5.4.1/dist/echarts.min.js"></script><!--Staticfile服務(wù)器提供的ECharts--><scriptsrc="/echarts/5.4.1/echarts.min.js"></script>4.通過在線定制的方式獲取打開瀏覽器，登錄ECharts的官方網(wǎng)站，找到“下載”→“下載”鏈接，如下圖所示。1.2.3ECharts獲取方式單擊“下載”鏈接進入下載頁面，如下圖所示。1.2.3ECharts獲取方式向下滾動頁面，找到“在線定制”按鈕，如下圖所示。1.2.3ECharts獲取方式單擊“在線定制”按鈕后，選擇ECharts版本，如下圖所示。1.2.3ECharts獲取方式選擇要打包的圖表。想要打包哪個圖表，直接選中即可。例如，選中“柱狀圖”“折線圖”“餅圖”“自定義系列”，如下圖所示。1.2.3ECharts獲取方式選擇要打包的坐標(biāo)系。例如，選中“直角坐標(biāo)系”，如下圖所示。1.2.3ECharts獲取方式選擇要打包的組件。例如，選中“標(biāo)題”“圖例”“提示框”組件，如下圖所示。1.2.3ECharts獲取方式選擇其他選項。例如，選中“工具集”“代碼壓縮”選項，如下圖所示。1.2.3ECharts獲取方式單擊“下載”按鈕，會跳轉(zhuǎn)到一個新頁面，等待幾秒后，瀏覽器會下載一個echarts.min.js文件，如下圖所示。1.2.3ECharts獲取方式若要下載未壓縮的文件，則在選擇其他選項時，取消選中“代碼壓縮”，然后單擊“下載”按鈕，就會在本地下載一個未壓縮的echarts.js文件，如下圖所示。1.2.3ECharts獲取方式VisualStudioCode編輯器1.3

先定一個小目標(biāo)！掌握VisualStudioCode編輯器的下載和安裝，能夠獨立安裝VisualStudioCode1.3.1下載和安裝VisualStudioCode編輯器VisualStudioCode（簡稱VSCode）是由微軟公司推出的一款免費、開源的代碼編輯器，一經(jīng)推出便受到開發(fā)者的歡迎。對于Web前端開發(fā)人員來說，一個強大的編輯器可以使開發(fā)變得簡單、便捷、高效。1.3.1下載和安裝VisualStudioCode編輯器1.3.1下載和安裝VisualStudioCode編輯器VSCode編輯器的特點如下。輕巧、高速，占用的系統(tǒng)資源較少。具備代碼智能補全、語法高亮顯示、自定義快捷鍵和代碼匹配等功能?？缙脚_，可用于macOS、Windows和Linux操作系統(tǒng)。主題界面的設(shè)計比較人性化。例如，可以快速查找文件并直接進行開發(fā)，可以分屏顯示代碼，可以自定義主題顏色，也可以快速查看打開的項目文件及其結(jié)構(gòu)。提供豐富的擴展，用戶可根據(jù)需要自行下載和安裝擴展。支持多種語言和文件格式的編寫，如HTML、JSON、TypeScript、JavaScript、CSS等。1.3.1下載和安裝VisualStudioCode編輯器下面講解如何下載和安裝VSCode編輯器。1.3.1下載和安裝VisualStudioCode編輯器打開瀏覽器，登錄VSCode編輯器的官方網(wǎng)站，如下圖所示。1.3.1下載和安裝VisualStudioCode編輯器單擊“DownloadforWindows”按鈕，該頁面會自動識別當(dāng)前的操作系統(tǒng)并下載相應(yīng)的安裝包。如果需要下載其他系統(tǒng)版本的安裝包，可以單擊按鈕右側(cè)的小箭頭“”打開下拉列表，就會看到其他系統(tǒng)版本安裝包的下載按鈕，如下圖所示。1.3.1下載和安裝VisualStudioCode編輯器下載VSCode編輯器的安裝包后，在下載目錄中找到該安裝包，如下圖所示。雙擊上圖所示的圖標(biāo)，啟動安裝程序，然后按照程序的提示一步一步進行操作，直到安裝完成。1.3.1下載和安裝VisualStudioCode編輯器VSCode編輯器安裝成功后，啟動該編輯器，即可進入VSCode編輯器的初始界面，如下圖所示。

先定一個小目標(biāo)！掌握中文語言擴展的安裝，能夠在VisualStudioCode編輯器中安裝中文語言擴展1.3.2

安裝中文語言擴展1.3.2

安裝中文語言擴展VSCode編輯器的默認(rèn)語言是英文。如果想要切換為中文，首先單擊VSCode編輯器的初始界面左側(cè)邊欄中的“”圖標(biāo)進入擴展界面，然后在搜索框中輸入關(guān)鍵詞“chinese”搜索中文語言擴展，單擊“Install”按鈕進行安裝，如下圖所示。安裝成功后，需要重新啟動VSCode編輯器，中文語言擴展才可以生效。重新啟動VSCode編輯器后，VSCode編輯器的中文界面如下圖所示。1.3.2

安裝中文語言擴展

先定一個小目標(biāo)！掌握VisualStudioCode編輯器的使用方法，能夠在項目中創(chuàng)建HTML5文檔結(jié)構(gòu)1.3.3使用VisualStudioCode編輯器1.3.3使用VisualStudioCode編輯器在實際開發(fā)中，開發(fā)一個項目需要先創(chuàng)建項目文件夾，以保存項目中的文件。接下來演示如何創(chuàng)建項目文件夾、如何使用VSCode編輯器打開項目，以及如何在項目中創(chuàng)建HTML5文檔結(jié)構(gòu)。1.3.3使用VisualStudioCode編輯器在D:\ECharts目錄下創(chuàng)建一個項目文件夾chapter01。創(chuàng)建項目文件夾步驟1步驟2步驟31.3.3使用VisualStudioCode編輯器在VSCode編輯器的菜單欄中選擇“文件”→“打開文件夾…”命令，然后選擇chapter01文件夾。打開文件夾后的界面如下圖所示。對圖中標(biāo)注的解釋按鈕①用于新建文件按鈕②用于新建文件夾按鈕③用于刷新資源管理器按鈕④用于折疊文件夾打開文件夾步驟1步驟2步驟31.3.3使用VisualStudioCode編輯器單擊按鈕①，輸入要創(chuàng)建的文件的名稱index.html，會創(chuàng)建一個空白的文檔。在其中輸入“html:5”，VSCode會給出智能提示，然后按Enter鍵會自動生成HTML5文檔結(jié)構(gòu)。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title></head><body>

</body></html>創(chuàng)建HTML5文檔步驟1步驟2步驟3本章小結(jié)本章先介紹了數(shù)據(jù)可視化，包括數(shù)據(jù)可視化的概念、應(yīng)用場景和常見的可視化工具；然后對ECharts進行了簡要介紹，包括ECharts的概念、ECharts5的新特性和ECharts獲取方式；最后講解了VisualStudioCode編輯器，包括下載和安裝VisualStudioCode編輯器、安裝中文語言擴展和如何使用VisualStudioCode編輯器。通過對本章的學(xué)習(xí)，讀者能對ECharts有一個整體的認(rèn)識，能夠使用VisualStudioCode編輯器編寫代碼。本章小結(jié)第2章折線圖和餅圖《ECharts數(shù)據(jù)可視化》學(xué)習(xí)目標(biāo)/Target

熟悉引入并配置ECharts的方法，能夠歸納引入并配置ECharts的步驟

掌握坐標(biāo)軸組件的使用方法，能夠設(shè)置圖表的x軸、y軸掌握系列組件、標(biāo)題組件、圖例組件的使用方法，能夠設(shè)置圖表的系列、標(biāo)題、

圖例掌握數(shù)據(jù)堆疊的使用方法，能夠設(shè)置數(shù)據(jù)堆疊掌握折線圖文本標(biāo)簽的使用方法，能夠設(shè)置文本標(biāo)簽的顯示狀態(tài)、位置等學(xué)習(xí)目標(biāo)/Target掌握區(qū)域填充樣式的設(shè)置方法，能夠設(shè)置區(qū)域填充樣式

掌握網(wǎng)格組件、提示框組件、工具欄組件的使用方法，能夠設(shè)置圖表的網(wǎng)格、

提示框、工具欄

掌握數(shù)據(jù)集組件的使用方法，能夠使用數(shù)據(jù)集定義數(shù)據(jù)掌握平滑曲線圖的設(shè)置方法，能夠?qū)D表設(shè)置為平滑曲線圖掌握餅圖半徑的使用方法，能夠設(shè)置餅圖的半徑學(xué)習(xí)目標(biāo)/Target掌握餅圖文本標(biāo)簽的使用方法，能夠設(shè)置文本標(biāo)簽的顯示狀態(tài)、位置等掌握南丁格爾圖的設(shè)置方法，能夠?qū)D表設(shè)置為南丁格爾圖

掌握折線圖的繪制，能夠完成基礎(chǔ)折線圖、堆疊折線圖、區(qū)域面積圖、

堆疊面積折線圖、階梯折線圖和平滑曲線圖等的繪制掌握餅圖的繪制，能夠完成基礎(chǔ)餅圖和南丁格爾圖的繪制章節(jié)概述/Summary在日常生活中，我們經(jīng)常使用圖表來整理和分析數(shù)據(jù)，以便得出更好的結(jié)論。在眾多圖表類型中，折線圖和餅圖相對比較簡單，更適合ECharts初學(xué)者學(xué)習(xí)。因此，本書將以折線圖和餅圖作為切入點，幫助讀者打好基礎(chǔ)，為后續(xù)學(xué)習(xí)其他圖表提供支撐。本章將針對如何使用ECharts繪制折線圖和餅圖進行詳細(xì)講解。目錄/Contents2.12.2常見的折線圖常見的餅圖常見的折線圖2.1繪制基礎(chǔ)折線圖【任務(wù)2.1.1】任務(wù)需求最近，某互聯(lián)網(wǎng)公司出現(xiàn)了利潤下降的情況。為了找出原因，該公司的領(lǐng)導(dǎo)決定使用用戶瀏覽量這一指標(biāo)進行調(diào)查，并據(jù)此制定相關(guān)決策。會議結(jié)束后，運營總監(jiān)整理了最近一周內(nèi)的用戶瀏覽量報表。他希望繪制一個基礎(chǔ)折線圖來更好地展示最近一周內(nèi)的用戶瀏覽量的變化情況。本任務(wù)需要基于最近一周內(nèi)用戶瀏覽量繪制基礎(chǔ)折線圖。最近一周內(nèi)用戶瀏覽量（單位：次）如下表所示。星期瀏覽量周一20000周二22000周三25000周四20000任務(wù)需求星期瀏覽量周五28000周六24700周日20000--知識儲備1.引入并配置ECharts

先定一個小目標(biāo)！熟悉引入并配置ECharts的方法，能夠歸納引入并配置ECharts的步驟知識儲備1.引入并配置ECharts在使用ECharts繪制圖表之前，需要引入并配置ECharts。在HTML中引入ECharts，示例代碼如下。<scriptsrc="./echarts.js"></script>上述示例代碼通過<script>標(biāo)簽的src屬性引入了echarts.js文件后，會獲得一個名稱為echarts的對象，該對象提供了init()方法，用于創(chuàng)建ECharts實例對象。知識儲備1.引入并配置EChartsinit()方法的語法格式如下。echarts.init(dom);在上述語法格式中，init()方法的參數(shù)dom用于指定渲染的圖表將被放置在哪個DOM容器中。init()方法的返回值是ECharts實例對象。知識儲備1.引入并配置ECharts在調(diào)用init()方法之后，可以通過ECharts實例對象的setOption()方法設(shè)置圖表的配置項。setOption()方法的語法格式如下。setOption(option[,notMerge]);在上述語法格式中，setOption()方法的第1個參數(shù)option是一個包含了要設(shè)置的圖表配置項的對象，第2個參數(shù)notMerge是一個可選參數(shù)，表示是否不與已有的配置項合并，默認(rèn)值為false，表示允許新的配置項和已有配置項合并；如果設(shè)為true，則表示不允許新的配置項和已有配置項合并，已有配置項都會被刪除，然后根據(jù)新的配置項重新渲染圖表。知識儲備1.引入并配置ECharts在調(diào)用setOption()方法時，通過設(shè)置不同的配置項，可以實現(xiàn)不同類型的圖表的繪制。圖表的配置項由多個組件的配置項組成，包括坐標(biāo)軸組件、系列組件、圖例組件、網(wǎng)格組件、標(biāo)題組件、提示框組件、工具欄組件等。所有配置項的修改都可以通過setOption()方法完成。當(dāng)多次調(diào)用setOption()方法時，ECharts實例對象會自動合并新的配置項和已有的配置項，然后根據(jù)合并后的配置項重新渲染圖表。因此，當(dāng)修改圖表的配置項時，不需要手動處理圖表的刷新和更新，只需要確保傳遞給setOption()方法的新配置項是正確的即可。創(chuàng)建D:\ECharts\chapter02目錄，并使用VSCode編輯器打開該目錄。放入echarts.js文件。創(chuàng)建line_demo01.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入echarts.js文件。定義一個用于被ECharts實例對象控制的div元素。步驟1步驟2步驟3演示如何在項目中引入并配置ECharts通過init()方法創(chuàng)建ECharts實例對象。準(zhǔn)備配置項。將配置項設(shè)置給ECharts實例對象。步驟4步驟5步驟6步驟7知識儲備1.引入并配置ECharts知識儲備2.坐標(biāo)軸組件

先定一個小目標(biāo)！掌握坐標(biāo)軸組件的使用方法，能夠設(shè)置圖表的x軸、y軸知識儲備2.坐標(biāo)軸組件坐標(biāo)軸組件主要有兩個組成部分：xAxis、yAxis，其中，xAxis表示直角坐標(biāo)系的x軸，yAxis表示直角坐標(biāo)系的y軸。默認(rèn)情況下，x軸位于圖表的底部，y軸位于圖表的左側(cè)。使用xAxis和yAxis可以創(chuàng)建一個完整的直角坐標(biāo)系，并且可以設(shè)置各種樣式以滿足不同的需求。知識儲備2.坐標(biāo)軸組件坐標(biāo)軸組件的效果如下圖所示。知識儲備2.坐標(biāo)軸組件通過option對象的xAxis屬性和yAxis屬性可以對直角坐標(biāo)系的x軸和y軸進行配置。當(dāng)直角坐標(biāo)系只有1條x軸和1條y軸時，xAxis、yAxis屬性的值為xAxis、yAxis對象。xAxis、yAxis對象的設(shè)置方式如下。varoption={xAxis:{},yAxis:{}};知識儲備2.坐標(biāo)軸組件當(dāng)直角坐標(biāo)系有多條x軸或y軸時，xAxis、yAxis屬性的值為xAxis、yAxis數(shù)組，數(shù)組中的每個元素均為對象。xAxis、yAxis數(shù)組的設(shè)置方式如下。varoption={xAxis:[],yAxis:[]};知識儲備xAxis、yAxis對象的常用屬性如下表所示。屬性說明show用于設(shè)置是否顯示坐標(biāo)軸，默認(rèn)值為true，表示顯示x軸或y軸，設(shè)為false表示不顯示x軸或y軸position用于設(shè)置坐標(biāo)軸的位置，當(dāng)設(shè)置x軸的位置時，可選值有bottom（默認(rèn)值）、top，分別表示x軸在圖表下方、x軸在圖表上方；當(dāng)設(shè)置y軸的位置時，可選值有l(wèi)eft（默認(rèn)值）、right，分別表示y軸在圖表左側(cè)、y軸在圖表右側(cè)type用于設(shè)置坐標(biāo)軸的類型，常見的可選值為category（默認(rèn)值）、value，分別表示類目軸、數(shù)值軸。類目軸用于展示類目名稱，數(shù)值軸用于展示具體的數(shù)值data用于設(shè)置坐標(biāo)軸數(shù)據(jù)2.坐標(biāo)軸組件知識儲備>>接上表屬性說明name用于設(shè)置坐標(biāo)軸名稱nameGap用于設(shè)置坐標(biāo)軸名稱與軸線的距離，默認(rèn)值為15boundaryGap用于設(shè)置坐標(biāo)軸兩邊留白的策略nameLocation用于設(shè)置坐標(biāo)軸名稱的顯示位置，可選值有start、middle或center、end（默認(rèn)值），分別表示坐標(biāo)軸名稱顯示在坐標(biāo)軸的開始位置、中間位置、結(jié)束位置nameTextStyle用于設(shè)置坐標(biāo)軸名稱的文本樣式2.坐標(biāo)軸組件知識儲備（1）data屬性data屬性用于設(shè)置坐標(biāo)軸數(shù)據(jù)，在不同類型的坐標(biāo)軸中，data屬性的設(shè)置方式不同。在類目軸中，data屬性用于設(shè)置類目名稱列表；在數(shù)值軸中，則不設(shè)置data屬性。下面主要針對類目軸中的data屬性進行講解。data屬性的值為data數(shù)組，數(shù)組中的每個元素表示一個數(shù)據(jù)項，數(shù)據(jù)項可以是data對象或者字符串。2.坐標(biāo)軸組件知識儲備①當(dāng)data數(shù)組中的數(shù)據(jù)項為data對象時，data對象的屬性如下表所示。屬性說明value用于設(shè)置類目名稱textStyle用于設(shè)置類目名稱的文字樣式2.坐標(biāo)軸組件textStyle屬性的值為textStyle對象，該對象的常用屬性如下。color：用于設(shè)置文字的顏色。fontSize：用于設(shè)置文字的字體大小。backgroundColor：用于設(shè)置文字塊背景色。知識儲備2.坐標(biāo)軸組件data數(shù)組中的數(shù)據(jù)項為對象的示例代碼如下。data:[

{

value:'周一',

textStyle:{

fontSize:20

}

}]知識儲備2.坐標(biāo)軸組件②當(dāng)data數(shù)組中的數(shù)據(jù)項為字符串時，每個字符串表示一個類目名稱，示例代碼如下。data:['周一','周二','周三','周四','周五']存儲了周一到周五的數(shù)據(jù)知識儲備（2）boundaryGap屬性類目軸和數(shù)值軸的boundaryGap屬性值的類型不同，下面分別進行講解。在類目軸中，boundaryGap屬性的值為布爾類型，默認(rèn)值為true，這時刻度只作為分隔線，類目名稱會顯示在兩個刻度之間。當(dāng)boundaryGap屬性的值為false時，類目名稱顯示在對應(yīng)刻度的下方。在數(shù)值軸中，boundaryGap屬性值為數(shù)組，數(shù)組中包含兩個元素，這兩個元素分別表示數(shù)據(jù)的最大值和最小值，可以直接將其設(shè)置為數(shù)值或者百分比字符串。2.坐標(biāo)軸組件知識儲備2.坐標(biāo)軸組件在數(shù)值軸中設(shè)置boundaryGap屬性，示例代碼如下。boundaryGap:['20%','20%']數(shù)據(jù)最小值為20%，最大值為20%知識儲備2.坐標(biāo)軸組件nameTextStyle屬性用于設(shè)置坐標(biāo)軸名稱的文本樣式，該屬性的值為nameTextStyle對象，該對象的設(shè)置方式如下。varoption={xAxis:{nameTextStyle:{}}};（3）nameTextStyle屬性知識儲備2.坐標(biāo)軸組件nameTextStyle對象的常用屬性如下表所示。屬性說明color用于設(shè)置坐標(biāo)軸名稱的顏色fontStyle用于設(shè)置坐標(biāo)軸名稱的字體風(fēng)格，可選值有normal（默認(rèn)值）、italic、oblique，分別表示正常字體、斜體、傾斜fontSize用于設(shè)置坐標(biāo)軸名稱的字體大小，默認(rèn)值為12padding用于設(shè)置文字塊的內(nèi)邊距，默認(rèn)值為0lineHeight用于設(shè)置行高，默認(rèn)值為12知識儲備2.坐標(biāo)軸組件設(shè)置x軸名稱文本樣式的示例代碼如下。xAxis:[{nameTextStyle:{color:'rgba(180,180,180,0.2)',fontStyle:'italic',fontSize:20,lineHeight:15,padding:[0,90,0,0]

}}]知識儲備3.系列組件

先定一個小目標(biāo)！掌握系列組件的使用方法，能夠設(shè)置圖表的系列知識儲備3.系列組件在ECharts中，系列組件用于存儲圖表系列的數(shù)據(jù)并將數(shù)據(jù)展示到圖表中?；A(chǔ)折線圖中系列組件的效果如下圖所示。知識儲備3.系列組件在ECharts中，通過option對象的series屬性可以配置系列組件。series屬性中可以包含多個系列，它們能夠組成一種圖表類型，如折線圖、柱狀圖、散點圖等。每個系列可以設(shè)置不同的數(shù)據(jù)、樣式等屬性，用于呈現(xiàn)視覺效果不同的圖表。例如，一張折線圖可能需要展示多條折線，每條折線都是一個系列，可以設(shè)置不同的屬性。知識儲備3.系列組件series屬性的值為數(shù)組，數(shù)組中每個元素都為對象，series數(shù)組的設(shè)置方式如下。varoption={series:[{}]};series數(shù)組中的每個元素均為一個系列，這些系列是對象類型的數(shù)據(jù)。如果想要實現(xiàn)多個系列的折線圖效果，只需要在series數(shù)組中添加對應(yīng)的元素個數(shù)。知識儲備3.系列組件系列的常用屬性如下表所示。屬性說明type用于設(shè)置系列類型，常用的可選值有l(wèi)ine、bar、pie，分別表示折線圖、柱狀圖、餅圖name用于設(shè)置系列名稱，以及提示框組件的顯示、圖例的篩選data用于設(shè)置系列中的數(shù)據(jù)內(nèi)容知識儲備3.系列組件通常情況下，用一個二維數(shù)組表示data屬性的值，二維數(shù)組中每一行數(shù)據(jù)表示一個數(shù)據(jù)項，每一列數(shù)據(jù)被稱為一個維度。在圖表中，第1列通常被稱為維度X，默認(rèn)對應(yīng)xAxis，表示x軸上的數(shù)據(jù)；第2列通常被稱為維度Y，默認(rèn)對應(yīng)yAxis，表示y軸上的數(shù)據(jù)。data屬性的值可以是二維數(shù)組或一維數(shù)組，下面分別進行講解。（1）data屬性的值是二維數(shù)組知識儲備3.系列組件data屬性的示例代碼如下。series:[{data:[//[維度X,維度Y]['周一',5],['周二',4],['周三',2],['周四',3],['周五',4],['周六',5],['周日',6]]}]知識儲備3.系列組件（2）data屬性的值是一維數(shù)組當(dāng)只有一條軸為類目軸時，data屬性的值可以被簡化為包含數(shù)字的一維數(shù)組，示例代碼如下。xAxis:{data:['a','b','c','d']},series:[{data:[23,44,55,19]}]知識儲備3.系列組件當(dāng)需要為個別數(shù)據(jù)項設(shè)置名稱時，data屬性的值是包含對象的一維數(shù)組。data屬性中的數(shù)組元素為對象時，data對象的常用屬性如下。name：用于設(shè)置數(shù)據(jù)項的名稱。value：用于設(shè)置數(shù)據(jù)項的值。知識儲備3.系列組件data屬性的值是包含對象的一維數(shù)組時的示例代碼如下。series:[{data:[12,

{name:'蘋果',value:22}]}]知識儲備3.系列組件在使用系列組件時，還有一些注意事項：對于類目軸，如果沒有設(shè)置data屬性，則ECharts會自動從系列的data屬性中獲取data內(nèi)容作為類目軸的刻度標(biāo)簽。如果系列中沒有定義data屬性或者data屬性的值為空，那么就會出現(xiàn)類目軸無法正常顯示刻度標(biāo)簽的情況。對于數(shù)值軸，刻度標(biāo)簽是根據(jù)系列中數(shù)據(jù)的范圍來確定的。通常情況下，數(shù)值軸的刻度標(biāo)簽會被設(shè)置為系列中數(shù)據(jù)的最小值和最大值的等間隔值。例如，在一條數(shù)值軸上，如果系列中的數(shù)據(jù)范圍為0到100，且希望在坐標(biāo)軸上顯示10個刻度標(biāo)簽，那么每個刻度標(biāo)簽的間隔值是10。知識儲備4.標(biāo)題組件

先定一個小目標(biāo)！掌握標(biāo)題組件的使用方法，能夠設(shè)置圖表的標(biāo)題知識儲備在圖表中，可以通過主標(biāo)題來對圖表的主題進行概括，通過副標(biāo)題來對主標(biāo)題進行補充說明或者說明數(shù)據(jù)來源。在ECharts中，通過標(biāo)題組件可以設(shè)置圖表中的主標(biāo)題和副標(biāo)題。4.標(biāo)題組件知識儲備基礎(chǔ)折線圖中標(biāo)題組件的效果如下圖所示。4.標(biāo)題組件知識儲備通過option對象的title屬性可以配置標(biāo)題組件，title屬性的值為title對象，該對象的設(shè)置方式如下。varoption={title:{}};4.標(biāo)題組件知識儲備title對象的常用屬性如下表所示。屬性說明show用于設(shè)置是否顯示標(biāo)題組件，默認(rèn)值為true，表示顯示，設(shè)為false表示不顯示text用于設(shè)置主標(biāo)題，支持使用\n換行，默認(rèn)值為空textStyle用于設(shè)置主標(biāo)題的樣式subtext用于設(shè)置副標(biāo)題，支持使用\n換行，默認(rèn)值為空subtextStyle用于設(shè)置副標(biāo)題的樣式

itemGap用于設(shè)置主副標(biāo)題的距離，默認(rèn)值為10left用于設(shè)置標(biāo)題組件距離容器左側(cè)的距離，默認(rèn)值為auto4.標(biāo)題組件知識儲備>>接上表4.標(biāo)題組件屬性說明right用于設(shè)置標(biāo)題組件距離容器右側(cè)的距離，默認(rèn)值為autotop用于設(shè)置標(biāo)題組件距離容器上側(cè)的距離，默認(rèn)值為autobottom用于設(shè)置標(biāo)題組件距離容器下側(cè)的距離，默認(rèn)值為autobackgroundColor用于設(shè)置標(biāo)題組件的背景色，默認(rèn)值為transparent（透明），該屬性生效的前提是show屬性的值為trueborderColor用于設(shè)置標(biāo)題組件的邊框顏色，默認(rèn)值為#ccc，該屬性生效的前提是show屬性的值為trueborderWidth用于設(shè)置標(biāo)題的邊框線寬，默認(rèn)值為0，該屬性生效的前提是show屬性的值為true知識儲備（1）textStyle屬性textStyle屬性用于設(shè)置主標(biāo)題的樣式，該屬性的值為textStyle對象，該對象的設(shè)置方式如下。4.標(biāo)題組件varoption={title:{textStyle:{}}};知識儲備textStyle對象的常用屬性如下表所示。4.標(biāo)題組件屬性說明color用于設(shè)置主標(biāo)題的顏色，默認(rèn)值為#333fontSize用于設(shè)置主標(biāo)題的字體大小，默認(rèn)值為18width用于設(shè)置主標(biāo)題的顯示寬度，默認(rèn)值為100height用于設(shè)置主標(biāo)題的顯示高度，默認(rèn)值為50overflow用于設(shè)置文字超出寬度是否截斷或者換行，該屬性在配置了width后有效，可選值為none（默認(rèn)值）、truncate、break，分別表示文字超出寬度后不截斷或不換行、文字超出寬度時截斷并在末尾顯示ellipsis屬性配置的文字、文字超出寬度時換行ellipsis用于設(shè)置當(dāng)overflow屬性值為truncate時，可以通過該屬性配置末尾顯示的內(nèi)容，默認(rèn)值為…知識儲備（2）subtextStyle屬性subtextStyle屬性用于設(shè)置副標(biāo)題的樣式，該屬性的值為subtextStyle對象，該對象的設(shè)置方式如下。4.標(biāo)題組件varoption={title:{subtextStyle:{}}};知識儲備subtextStyle對象與textStyle對象的常用屬性基本相同，subtextStyle對象特有的屬性如下表所示。4.標(biāo)題組件屬性說明align用于設(shè)置副標(biāo)題的水平對齊方式，可選值有l(wèi)eft、center、rightverticalAlign用于設(shè)置副標(biāo)題的垂直對齊方式，可選值有top、middle、bottom知識儲備設(shè)置圖表中標(biāo)題的示例代碼如下。varoption={title:{text:'主標(biāo)題',subtext:'副標(biāo)題',left:'center',top:'middle',textStyle:{fontSize:30},subtextStyle:{fontSize:20},show:true}};4.標(biāo)題組件任務(wù)實現(xiàn)

先定一個小目標(biāo)！掌握基礎(chǔ)折線圖的使用，能夠根據(jù)需求繪制基礎(chǔ)折線圖任務(wù)實現(xiàn)創(chuàng)建line.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入echarts.js文件。定義一個指定了寬度和高度的父容器。步驟1步驟2初始化ECharts實例對象，準(zhǔn)備配置項，將配置項設(shè)置給ECharts實例對象。設(shè)置基礎(chǔ)折線圖的配置項和數(shù)據(jù)。步驟3步驟4基于最近一周內(nèi)的用戶瀏覽量繪制基礎(chǔ)折線圖任務(wù)實現(xiàn)瀏覽器中打開line.html文件，最近一周內(nèi)用戶瀏覽量的基礎(chǔ)折線圖效果如下圖所示。繪制堆疊折線圖【任務(wù)2.1.2】任務(wù)需求某校始終積極貫徹落實各項規(guī)章制度，定期開展每月考核，切實提高學(xué)校課堂教學(xué)質(zhì)量，構(gòu)建良好教育生態(tài)。為了更好地開展工作，各年級班主任需要定期統(tǒng)計學(xué)生各科學(xué)習(xí)成績，并取均值。班主任余老師希望繪制一張堆疊折線圖來更好地展示本班部分學(xué)科學(xué)習(xí)成績的變化趨勢，從而幫助學(xué)生、家長和老師及時發(fā)現(xiàn)問題并進行查漏補缺，進而提高學(xué)生的學(xué)習(xí)成績。本任務(wù)需要基于初三某班部分學(xué)科學(xué)習(xí)成績繪制堆疊折線圖。初三某班部分學(xué)科學(xué)習(xí)成績（單位：分）如下表所示?？荚嚂r間語文數(shù)學(xué)道德與法治物理第1次月考90808570第2次月考80828880第3次月考85858585第4次月考87909090任務(wù)需求知識儲備1.初識堆疊折線圖

先定一個小目標(biāo)！了解堆疊折線圖的概念，能夠說出什么是堆疊折線圖知識儲備1.初識堆疊折線圖基礎(chǔ)折線圖只能反映一個數(shù)據(jù)的變化趨勢，如果想要反映多個數(shù)據(jù)的變化趨勢，則需要使用堆疊折線圖。在堆疊折線圖中，不同樣本的數(shù)據(jù)會被放在同一組并堆疊到一起，通過縱向累加展示總量和各部分的比例，幫助用戶直觀了解數(shù)據(jù)的整體變化趨勢。要查看堆疊折線圖中數(shù)據(jù)的占比，可以通過觀察某一類目名稱下對應(yīng)系列的高度與總體高度來獲得。知識儲備1.初識堆疊折線圖當(dāng)有兩個系列時，使用基礎(chǔ)折線圖和堆疊折線圖進行對比，如下圖所示。知識儲備2.圖例組件

先定一個小目標(biāo)！掌握圖例組件的使用方法，能夠設(shè)置圖表的圖例知識儲備在ECharts中，通過圖例組件可以設(shè)置圖表的圖例，幫助我們更好地理解圖表的內(nèi)容。圖例組件展示了不同系列的標(biāo)記、顏色和名稱。單擊圖例可以控制特定系列的顯示和隱藏。堆疊折線圖中圖例組件的效果如下圖所示。2.圖例組件知識儲備通過option對象的legend屬性可以配置圖例組件，legend屬性的值為legend對象，該對象的設(shè)置方式如下。2.圖例組件varoption={legend:{}};知識儲備legend對象的常用屬性如下表所示。屬性說明type用于設(shè)置圖例的類型，可選值有plain（默認(rèn)值）、scroll，分別表示普通圖例、可滾動翻頁的圖例show用于設(shè)置是否顯示圖例，默認(rèn)值為true，表示顯示，設(shè)為false表示不顯示left用于設(shè)置圖例組件離容器左側(cè)的距離，默認(rèn)值為autoright用于設(shè)置圖例組件離容器右側(cè)的距離，默認(rèn)值為autotop用于設(shè)置圖例組件離容器上側(cè)的距離，默認(rèn)值為auto2.圖例組件知識儲備>>接上表屬性說明bottom用于設(shè)置圖例組件離容器下側(cè)的距離，默認(rèn)值為autowidth用于設(shè)置圖例組件的寬度，默認(rèn)值為autoheight用于設(shè)置圖例組件的高度，默認(rèn)值為autoorient用于設(shè)置圖例列表的布局朝向，可選值有horizontal（默認(rèn)值）、vertical，分別表示水平朝向、垂直朝向data用于設(shè)置圖例的數(shù)據(jù)2.圖例組件知識儲備設(shè)置圖例組件距離容器左側(cè)的距離的示例代碼如下。legend:{left:'20%'}2.圖例組件圖例組件距離容器左側(cè)的距離被設(shè)置為20%。設(shè)置后，圖例組件會相對于容器的左側(cè)邊緣向右移動20%的距離。知識儲備data屬性的值為數(shù)組，數(shù)組元素通常為字符串，每一個字符串代表一個系列的name屬性。如果legend對象的data屬性沒有被指定，會自動從系列的name屬性中獲取。設(shè)置圖表中圖例組件的示例代碼如下。legend:{data:['梅花','蘭花','竹','菊花']}2.圖例組件通過legend對象的data屬性設(shè)置了圖例的數(shù)據(jù)知識儲備3.數(shù)據(jù)堆疊

先定一個小目標(biāo)！掌握數(shù)據(jù)堆疊的使用方法，能夠設(shè)置數(shù)據(jù)堆疊知識儲備在ECharts中，通過系列的stack屬性可以實現(xiàn)數(shù)據(jù)堆疊。stack屬性的值為字符串類型的數(shù)據(jù)，stack屬性的設(shè)置方式如下。series:[{stack:''}]stack屬性的值可以是任意字符串，例如，subject、room、book等。在同一個類目軸上，如果stack屬性值相同，則系列可以堆疊放置3.數(shù)據(jù)堆疊知識儲備4.折線圖的文本標(biāo)簽

先定一個小目標(biāo)！掌握折線圖文本標(biāo)簽的使用方法，能夠設(shè)置文本標(biāo)簽的顯示狀態(tài)、位置等知識儲備為了讓用戶更直觀地了解折線圖中每個數(shù)據(jù)項的數(shù)值，可以通過系列的label屬性設(shè)置折線圖的文本標(biāo)簽。當(dāng)系列的type屬性值為line，并且設(shè)置了label屬性時，可設(shè)置折線圖的文本標(biāo)簽。label屬性的值為label對象，折線圖中l(wèi)abel對象的常用屬性如下表所示。屬性說明show用于設(shè)置是否顯示文本標(biāo)簽，默認(rèn)值為false，表示不顯示，設(shè)為true表示顯示position用于設(shè)置文本標(biāo)簽的位置，默認(rèn)值為top，表示文本標(biāo)簽在數(shù)據(jù)項上方顯示4.折線圖的文本標(biāo)簽知識儲備4.折線圖的文本標(biāo)簽設(shè)置折線圖文本標(biāo)簽的示例代碼如下。series:[{type:'line',label:{show:true,position:'left'}}]任務(wù)實現(xiàn)

先定一個小目標(biāo)！掌握堆疊折線圖的使用，能夠根據(jù)需求繪制堆疊折線圖任務(wù)實現(xiàn)創(chuàng)建stackedLine.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入echarts.js文件。定義一個指定了寬度和高度的父容器。步驟1步驟2初始化ECharts實例對象，準(zhǔn)備配置項，將配置項設(shè)置給ECharts實例對象。設(shè)置堆疊折線圖配置項和數(shù)據(jù)。步驟3步驟4基于初三某班部分學(xué)科學(xué)習(xí)成績繪制堆疊折線圖任務(wù)實現(xiàn)瀏覽器中打開stackedLine.html文件，初三某班部分學(xué)科學(xué)習(xí)成績的堆疊折線圖效果如下圖所示。繪制區(qū)域面積圖【任務(wù)2.1.3】任務(wù)需求自媒體的興起為人們提供了多元化的信息來源，豐富了我們的生活和工作。通過自媒體，我們可以記錄美好生活，分享風(fēng)土人情。小王是一名美食博主，他主要通過拍攝充滿生活氣息的內(nèi)容并通過幽默詼諧的講述方式來吸引觀眾，讓他們了解不同地區(qū)的美食。經(jīng)過多年的努力，他的賬號已經(jīng)擁有了5萬多個粉絲。本任務(wù)需要基于小王運營賬號近幾年的粉絲數(shù)量繪制區(qū)域面積圖。小王運營的賬號近幾年的粉絲數(shù)量（單位：人）如下表所示。2018年2019年2020年2021年2022年1200030000303004002055000任務(wù)需求知識儲備1.初識區(qū)域面積圖

先定一個小目標(biāo)！了解區(qū)域面積圖的概念，能夠說出什么是區(qū)域面積圖知識儲備1.初識區(qū)域面積圖區(qū)域面積圖通常用于展示數(shù)據(jù)與時間或其他連續(xù)性變量的變化趨勢。在區(qū)域面積圖中，折線與x軸或y軸所構(gòu)成的陰影部分即區(qū)域面積圖。相對于基礎(chǔ)折線圖，區(qū)域面積圖在強調(diào)數(shù)據(jù)整體趨勢和變化方面效果更加明顯。知識儲備區(qū)域面積圖的效果如下圖所示。1.初識區(qū)域面積圖知識儲備2.區(qū)域填充樣式

先定一個小目標(biāo)！掌握區(qū)域填充樣式的設(shè)置方法，能夠設(shè)置區(qū)域填充樣式知識儲備在折線圖中，若要傳達(dá)總體數(shù)據(jù)，而不是確切的單個數(shù)據(jù)，可以為折線圖設(shè)置區(qū)域填充樣式。當(dāng)系列的type屬性值為line并且設(shè)置了areaStyle屬性時，圖表類型為區(qū)域面積圖。areaStyle屬性的值為areaStyle對象，該對象的設(shè)置方式如下。series:[{areaStyle:{}}]2.區(qū)域填充樣式知識儲備areaStyle對象的常用屬性如下表所示。屬性說明color用于設(shè)置填充的顏色，默認(rèn)值為#000opacity用于設(shè)置圖形的不透明度，默認(rèn)值為0.7origin用于設(shè)置圖形區(qū)域的起始位置，可選值為auto（默認(rèn)值）、start、end，分別表示填充坐標(biāo)軸軸線到數(shù)據(jù)間的區(qū)域、填充坐標(biāo)軸底部到數(shù)據(jù)間的區(qū)域、填充坐標(biāo)軸頂部到數(shù)據(jù)間的區(qū)域2.區(qū)域填充樣式知識儲備設(shè)置折線圖區(qū)域填充樣式的示例代碼如下。series:[{type:'line',areaStyle:{color:'#555',opacity:0.5}}]2.區(qū)域填充樣式知識儲備3.網(wǎng)格組件

先定一個小目標(biāo)！掌握網(wǎng)格組件的使用方法，能夠設(shè)置圖表的網(wǎng)格知識儲備在ECharts中，網(wǎng)格組件用于在直角坐標(biāo)系內(nèi)顯示網(wǎng)格。區(qū)域面積圖中網(wǎng)格組件的效果如下圖所示。3.網(wǎng)格組件知識儲備通過option對象的grid屬性可以配置網(wǎng)格組件，grid屬性的值為grid對象，該對象的設(shè)置方式如下。varoption={grid:{}};3.網(wǎng)格組件知識儲備grid對象的常用屬性如下表所示。屬性說明show用于設(shè)置是否顯示直角坐標(biāo)系網(wǎng)格，默認(rèn)值為false，表示不顯示，設(shè)為true表示顯示left用于設(shè)置網(wǎng)格組件距離容器左側(cè)的距離，默認(rèn)值為10%right用于設(shè)置網(wǎng)格組件距離容器右側(cè)的距離，默認(rèn)值為10%top用于設(shè)置網(wǎng)格組件距離容器上側(cè)的距離，默認(rèn)值為60bottom用于設(shè)置網(wǎng)格組件距離容器下側(cè)的距離，默認(rèn)值為603.網(wǎng)格組件知識儲備>>接上表屬性說明width用于設(shè)置網(wǎng)格組件的寬度，默認(rèn)值為autoheight用于設(shè)置網(wǎng)格組件的高度，默認(rèn)值為autobackgroundColor用于設(shè)置網(wǎng)格組件的背景色，默認(rèn)值為transparent，該屬性生效的前提是show屬性的值為trueborderColor用于設(shè)置網(wǎng)格組件的邊框顏色，默認(rèn)值為#ccc，該屬性生效的前提是show屬性的值為trueborderWidth用于設(shè)置網(wǎng)格的邊框線寬，默認(rèn)值為1，該屬性生效的前提是show屬性的值為true3.網(wǎng)格組件知識儲備設(shè)置圖表中網(wǎng)格的示例代碼如下。varoption={

grid:{show:true,left:30,right:30,top:'10%',bottom:'10%',backgroundColor:'red',borderColor:'black',borderWidth:2}};3.網(wǎng)格組件任務(wù)實現(xiàn)

先定一個小目標(biāo)！掌握區(qū)域面積圖的使用，能夠根據(jù)需求繪制區(qū)域面積圖任務(wù)實現(xiàn)創(chuàng)建area.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入echarts.js文件。定義一個指定了寬度和高度的父容器。步驟1步驟2初始化ECharts實例對象，準(zhǔn)備配置項，并將配置項設(shè)置給ECharts實例對象。設(shè)置區(qū)域面積圖的配置項和數(shù)據(jù)。步驟3步驟4基于小王運營的賬號近幾年的粉絲數(shù)量繪制區(qū)域面積圖任務(wù)實現(xiàn)瀏覽器中打開area.html文件，小王運營的賬號近幾年的粉絲數(shù)量的區(qū)域面積圖效果如下圖所示。繪制堆疊面積折線圖【任務(wù)2.1.4】任務(wù)需求“小餅如嚼月，中有酥與飴”表達(dá)了蘇軾對于月餅的喜愛。如今，月餅與各地的飲食習(xí)俗相融合，發(fā)展出了廣式、京式、蘇式等各種口味的月餅。姚經(jīng)理希望繪制一張堆疊面積折線圖來更好地展示各個季度不同口味月餅的銷售趨勢，從而制定更好的銷售措施，提升月餅的銷量。本任務(wù)需要基于各個季度不同口味月餅的銷售繪制堆疊面積折線圖。姚經(jīng)理整理了各季度不同口味月餅的銷售數(shù)量，如下表所示。時間廣式月餅京式月餅蘇式月餅第1季度789第2季度9108第3季度111312第4季度81211任務(wù)需求知識儲備1.初識堆疊面積折線圖

先定一個小目標(biāo)！了解堆疊面積折線圖的概念，能夠說出什么是堆疊面積折線圖知識儲備堆疊面積折線圖類似于區(qū)域面積圖，不同之處在于它將不同系列的數(shù)據(jù)堆疊起來展示，每個系列的面積會按照其數(shù)值大小依次疊加。在堆疊面積折線圖中，每個數(shù)據(jù)所占的面積都會被堆疊放置在前一個數(shù)據(jù)的上方，從而形成一個逐層疊加的面積圖形式。1.初識堆疊面積折線圖知識儲備堆疊面積折線圖的效果，如下圖所示。1.初識堆疊面積折線圖知識儲備2.提示框組件

先定一個小目標(biāo)！掌握提示框組件的使用方法，能夠設(shè)置圖表的提示框知識儲備在ECharts中，提示框組件可以在圖表中顯示一個提示框，從而幫助用戶更好地了解數(shù)據(jù)。堆疊面積折線圖中提示框組件的效果，如下圖所示。2.提示框組件知識儲備在ECharts中，通過tooltip屬性可以配置提示框組件。tooltip屬性可以應(yīng)用在以下4種情境中。在全局中應(yīng)用：在option中添加tooltip。在網(wǎng)格組件中應(yīng)用：在grid中添加tooltip。在系列組件中應(yīng)用：在series中添加tooltip。在系列的每個數(shù)據(jù)項中應(yīng)用：在series的data中添加tooltip。2.提示框組件知識儲備tooltip屬性的值為tooltip對象，該對象的設(shè)置方式如下。varoption={tooltip:{}};2.提示框組件知識儲備tooltip對象的常用屬性如下表所示。屬性說明show用于設(shè)置是否顯示提示框組件，可選值為true（默認(rèn)值）、false，分別表示顯示提示框組件、不顯示提示框組件trigger用于設(shè)置觸發(fā)類型axisPointer用于設(shè)置坐標(biāo)軸指示器，即鼠標(biāo)指針移入對應(yīng)數(shù)據(jù)項坐標(biāo)軸顯示的指示器樣式或行為2.提示框組件知識儲備（1）trigger屬性trigger屬性的常用可選值如下。item：默認(rèn)值，表示鼠標(biāo)指針移入數(shù)據(jù)項元素觸發(fā)提示框，提示框