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

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

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

Highcharts和AntV的區(qū)別

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

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

掌握ECharts的獲取方式，能夠獨(dú)立完成ECharts的獲取

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

StudioCode

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

中文語言擴(kuò)展

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

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

先定一個(gè)小目標(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é)形式與功能需要“齊頭并進(jìn)”，它既不會(huì)因?yàn)橐獙?shí)現(xiàn)功能而令人感到枯燥、乏味，也不會(huì)因?yàn)橐獙?shí)現(xiàn)絢麗多彩的視覺效果而令圖表過于復(fù)雜，而是直觀地傳達(dá)關(guān)鍵的特征，從而揭示蘊(yù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ù)。接著對(duì)目標(biāo)數(shù)據(jù)進(jìn)行一系列預(yù)處理，如過濾“臟”數(shù)據(jù)、敏感數(shù)據(jù)，并對(duì)空白數(shù)據(jù)進(jìn)行適當(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)頁中進(jìn)行展示。數(shù)據(jù)可視化工具需要具備的3個(gè)基本特性：實(shí)時(shí)性數(shù)據(jù)可視化工具應(yīng)具備適應(yīng)大數(shù)據(jù)時(shí)代數(shù)據(jù)量的指數(shù)式增長(zhǎng)需求的特性，能夠快速地收集、分析數(shù)據(jù)并對(duì)數(shù)據(jù)信息進(jìn)行實(shí)時(shí)更新。展現(xiàn)形式多樣性數(shù)據(jù)可視化工具應(yīng)具備快速開發(fā)、易于操作的特性，能夠順應(yīng)互聯(lián)網(wǎng)時(shí)代信息多變的特點(diǎn)。數(shù)據(jù)可視化工具應(yīng)支持豐富的展現(xiàn)形式，充分滿足數(shù)據(jù)表現(xiàn)的多維需求，并支持多種數(shù)據(jù)集成方式。易操作性1.1.1數(shù)據(jù)可視化概述

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

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

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

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

先定一個(gè)小目標(biāo)！掌握ECharts的獲取方式，能夠獨(dú)立完成ECharts的獲取1.2.3ECharts獲取方式1.2.3ECharts獲取方式在使用ECharts開發(fā)項(xiàng)目前，開發(fā)者需要先獲取ECharts。獲取ECharts的主要方式有以下4種。從npm獲取從GitHub獲取從CDN獲取通過在線定制的方式獲取1.從GitHub獲取打開瀏覽器，登錄GitHub網(wǎng)站，找到apache/echarts項(xiàng)目下的Releases頁面，該頁面提供了各個(gè)版本的下載鏈接，找到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)過代碼壓縮的文件，它能夠更好地顯示錯(cuò)誤提示和警告信息；echarts.min.js是經(jīng)過代碼壓縮的文件，文件體積比較小，加載速度更快。對(duì)于開發(fā)者來說，如果需要修改ECharts源代碼或者需要更詳細(xì)的錯(cuò)誤提示信息，應(yīng)使用echarts.js文件；如果需要在生產(chǎn)環(huán)境中使用ECharts，則應(yīng)使用echarts.min.js文件。2.從npm獲取1.2.3ECharts獲取方式請(qǐng)確保計(jì)算機(jī)中安裝了Node.js，如果沒有安裝，需要先進(jìn)行安裝。本書使用的Node.js版本為16.17.0，對(duì)應(yīng)的npm的版本為8.15.0。npminstallecharts@5.4.1--save@5.4.1表示獲取的ECharts版本項(xiàng)目運(yùn)行時(shí)依賴從npm獲取ECharts的命令如下：1.2.3ECharts獲取方式將ECharts獲取完成后，需要在項(xiàng)目中引入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)頁中引入免費(fèi)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獲取方式單擊“下載”鏈接進(jìn)入下載頁面，如下圖所示。1.2.3ECharts獲取方式向下滾動(dòng)頁面，找到“在線定制”按鈕，如下圖所示。1.2.3ECharts獲取方式單擊“在線定制”按鈕后，選擇ECharts版本，如下圖所示。1.2.3ECharts獲取方式選擇要打包的圖表。想要打包哪個(gè)圖表，直接選中即可。例如，選中“柱狀圖”“折線圖”“餅圖”“自定義系列”，如下圖所示。1.2.3ECharts獲取方式選擇要打包的坐標(biāo)系。例如，選中“直角坐標(biāo)系”，如下圖所示。1.2.3ECharts獲取方式選擇要打包的組件。例如，選中“標(biāo)題”“圖例”“提示框”組件，如下圖所示。1.2.3ECharts獲取方式選擇其他選項(xiàng)。例如，選中“工具集”“代碼壓縮”選項(xiàng)，如下圖所示。1.2.3ECharts獲取方式單擊“下載”按鈕，會(huì)跳轉(zhuǎn)到一個(gè)新頁面，等待幾秒后，瀏覽器會(huì)下載一個(gè)echarts.min.js文件，如下圖所示。1.2.3ECharts獲取方式若要下載未壓縮的文件，則在選擇其他選項(xiàng)時(shí)，取消選中“代碼壓縮”，然后單擊“下載”按鈕，就會(huì)在本地下載一個(gè)未壓縮的echarts.js文件，如下圖所示。1.2.3ECharts獲取方式VisualStudioCode編輯器1.3

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

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

安裝中文語言擴(kuò)展1.3.2

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

安裝中文語言擴(kuò)展

先定一個(gè)小目標(biāo)！掌握VisualStudioCode編輯器的使用方法，能夠在項(xiàng)目中創(chuàng)建HTML5文檔結(jié)構(gòu)1.3.3使用VisualStudioCode編輯器1.3.3使用VisualStudioCode編輯器在實(shí)際開發(fā)中，開發(fā)一個(gè)項(xiàng)目需要先創(chuàng)建項(xiàng)目文件夾，以保存項(xiàng)目中的文件。接下來演示如何創(chuàng)建項(xiàng)目文件夾、如何使用VSCode編輯器打開項(xiàng)目，以及如何在項(xiàng)目中創(chuàng)建HTML5文檔結(jié)構(gòu)。1.3.3使用VisualStudioCode編輯器在D:\ECharts目錄下創(chuàng)建一個(gè)項(xiàng)目文件夾chapter01。創(chuàng)建項(xiàng)目文件夾步驟1步驟2步驟31.3.3使用VisualStudioCode編輯器在VSCode編輯器的菜單欄中選擇“文件”→“打開文件夾…”命令，然后選擇chapter01文件夾。打開文件夾后的界面如下圖所示。對(duì)圖中標(biāo)注的解釋按鈕①用于新建文件按鈕②用于新建文件夾按鈕③用于刷新資源管理器按鈕④用于折疊文件夾打開文件夾步驟1步驟2步驟31.3.3使用VisualStudioCode編輯器單擊按鈕①，輸入要?jiǎng)?chuàng)建的文件的名稱index.html，會(huì)創(chuàng)建一個(gè)空白的文檔。在其中輸入“html:5”，VSCode會(huì)給出智能提示，然后按Enter鍵會(huì)自動(dòng)生成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)用場(chǎng)景和常見的可視化工具；然后對(duì)ECharts進(jìn)行了簡(jiǎn)要介紹，包括ECharts的概念、ECharts5的新特性和ECharts獲取方式；最后講解了VisualStudioCode編輯器，包括下載和安裝VisualStudioCode編輯器、安裝中文語言擴(kuò)展和如何使用VisualStudioCode編輯器。通過對(duì)本章的學(xué)習(xí)，讀者能對(duì)ECharts有一個(gè)整體的認(rèn)識(shí)，能夠使用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é)論。在眾多圖表類型中，折線圖和餅圖相對(duì)比較簡(jiǎn)單，更適合ECharts初學(xué)者學(xué)習(xí)。因此，本書將以折線圖和餅圖作為切入點(diǎn)，幫助讀者打好基礎(chǔ)，為后續(xù)學(xué)習(xí)其他圖表提供支撐。本章將針對(duì)如何使用ECharts繪制折線圖和餅圖進(jìn)行詳細(xì)講解。目錄/Contents2.12.2常見的折線圖常見的餅圖常見的折線圖2.1繪制基礎(chǔ)折線圖【任務(wù)2.1.1】任務(wù)需求最近，某互聯(lián)網(wǎng)公司出現(xiàn)了利潤(rùn)下降的情況。為了找出原因，該公司的領(lǐng)導(dǎo)決定使用用戶瀏覽量這一指標(biāo)進(jìn)行調(diào)查，并據(jù)此制定相關(guān)決策。會(huì)議結(jié)束后，運(yùn)營總監(jiān)整理了最近一周內(nèi)的用戶瀏覽量報(bào)表。他希望繪制一個(gè)基礎(chǔ)折線圖來更好地展示最近一周內(nèi)的用戶瀏覽量的變化情況。本任務(wù)需要基于最近一周內(nèi)用戶瀏覽量繪制基礎(chǔ)折線圖。最近一周內(nèi)用戶瀏覽量（單位：次）如下表所示。星期瀏覽量周一20000周二22000周三25000周四20000任務(wù)需求星期瀏覽量周五28000周六24700周日20000--知識(shí)儲(chǔ)備1.引入并配置ECharts

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

先定一個(gè)小目標(biāo)！掌握坐標(biāo)軸組件的使用方法，能夠設(shè)置圖表的x軸、y軸知識(shí)儲(chǔ)備2.坐標(biāo)軸組件坐標(biāo)軸組件主要有兩個(gè)組成部分：xAxis、yAxis，其中，xAxis表示直角坐標(biāo)系的x軸，yAxis表示直角坐標(biāo)系的y軸。默認(rèn)情況下，x軸位于圖表的底部，y軸位于圖表的左側(cè)。使用xAxis和yAxis可以創(chuàng)建一個(gè)完整的直角坐標(biāo)系，并且可以設(shè)置各種樣式以滿足不同的需求。知識(shí)儲(chǔ)備2.坐標(biāo)軸組件坐標(biāo)軸組件的效果如下圖所示。知識(shí)儲(chǔ)備2.坐標(biāo)軸組件通過option對(duì)象的xAxis屬性和yAxis屬性可以對(duì)直角坐標(biāo)系的x軸和y軸進(jìn)行配置。當(dāng)直角坐標(biāo)系只有1條x軸和1條y軸時(shí)，xAxis、yAxis屬性的值為xAxis、yAxis對(duì)象。xAxis、yAxis對(duì)象的設(shè)置方式如下。varoption={xAxis:{},yAxis:{}};知識(shí)儲(chǔ)備2.坐標(biāo)軸組件當(dāng)直角坐標(biāo)系有多條x軸或y軸時(shí)，xAxis、yAxis屬性的值為xAxis、yAxis數(shù)組，數(shù)組中的每個(gè)元素均為對(duì)象。xAxis、yAxis數(shù)組的設(shè)置方式如下。varoption={xAxis:[],yAxis:[]};知識(shí)儲(chǔ)備xAxis、yAxis對(duì)象的常用屬性如下表所示。屬性說明show用于設(shè)置是否顯示坐標(biāo)軸，默認(rèn)值為true，表示顯示x軸或y軸，設(shè)為false表示不顯示x軸或y軸position用于設(shè)置坐標(biāo)軸的位置，當(dāng)設(shè)置x軸的位置時(shí)，可選值有bottom（默認(rèn)值）、top，分別表示x軸在圖表下方、x軸在圖表上方；當(dāng)設(shè)置y軸的位置時(shí)，可選值有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)軸組件知識(shí)儲(chǔ)備>>接上表屬性說明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)軸組件知識(shí)儲(chǔ)備（1）data屬性data屬性用于設(shè)置坐標(biāo)軸數(shù)據(jù)，在不同類型的坐標(biāo)軸中，data屬性的設(shè)置方式不同。在類目軸中，data屬性用于設(shè)置類目名稱列表；在數(shù)值軸中，則不設(shè)置data屬性。下面主要針對(duì)類目軸中的data屬性進(jìn)行講解。data屬性的值為data數(shù)組，數(shù)組中的每個(gè)元素表示一個(gè)數(shù)據(jù)項(xiàng)，數(shù)據(jù)項(xiàng)可以是data對(duì)象或者字符串。2.坐標(biāo)軸組件知識(shí)儲(chǔ)備①當(dāng)data數(shù)組中的數(shù)據(jù)項(xiàng)為data對(duì)象時(shí)，data對(duì)象的屬性如下表所示。屬性說明value用于設(shè)置類目名稱textStyle用于設(shè)置類目名稱的文字樣式2.坐標(biāo)軸組件textStyle屬性的值為textStyle對(duì)象，該對(duì)象的常用屬性如下。color：用于設(shè)置文字的顏色。fontSize：用于設(shè)置文字的字體大小。backgroundColor：用于設(shè)置文字塊背景色。知識(shí)儲(chǔ)備2.坐標(biāo)軸組件data數(shù)組中的數(shù)據(jù)項(xiàng)為對(duì)象的示例代碼如下。data:[

{

value:'周一',

textStyle:{

fontSize:20

}

}]知識(shí)儲(chǔ)備2.坐標(biāo)軸組件②當(dāng)data數(shù)組中的數(shù)據(jù)項(xiàng)為字符串時(shí)，每個(gè)字符串表示一個(gè)類目名稱，示例代碼如下。data:['周一','周二','周三','周四','周五']存儲(chǔ)了周一到周五的數(shù)據(jù)知識(shí)儲(chǔ)備（2）boundaryGap屬性類目軸和數(shù)值軸的boundaryGap屬性值的類型不同，下面分別進(jìn)行講解。在類目軸中，boundaryGap屬性的值為布爾類型，默認(rèn)值為true，這時(shí)刻度只作為分隔線，類目名稱會(huì)顯示在兩個(gè)刻度之間。當(dāng)boundaryGap屬性的值為false時(shí)，類目名稱顯示在對(duì)應(yīng)刻度的下方。在數(shù)值軸中，boundaryGap屬性值為數(shù)組，數(shù)組中包含兩個(gè)元素，這兩個(gè)元素分別表示數(shù)據(jù)的最大值和最小值，可以直接將其設(shè)置為數(shù)值或者百分比字符串。2.坐標(biāo)軸組件知識(shí)儲(chǔ)備2.坐標(biāo)軸組件在數(shù)值軸中設(shè)置boundaryGap屬性，示例代碼如下。boundaryGap:['20%','20%']數(shù)據(jù)最小值為20%，最大值為20%知識(shí)儲(chǔ)備2.坐標(biāo)軸組件nameTextStyle屬性用于設(shè)置坐標(biāo)軸名稱的文本樣式，該屬性的值為nameTextStyle對(duì)象，該對(duì)象的設(shè)置方式如下。varoption={xAxis:{nameTextStyle:{}}};（3）nameTextStyle屬性知識(shí)儲(chǔ)備2.坐標(biāo)軸組件nameTextStyle對(duì)象的常用屬性如下表所示。屬性說明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知識(shí)儲(chǔ)備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]

}}]知識(shí)儲(chǔ)備3.系列組件

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

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

先定一個(gè)小目標(biāo)！掌握標(biāo)題組件的使用方法，能夠設(shè)置圖表的標(biāo)題知識(shí)儲(chǔ)備在圖表中，可以通過主標(biāo)題來對(duì)圖表的主題進(jìn)行概括，通過副標(biāo)題來對(duì)主標(biāo)題進(jìn)行補(bǔ)充說明或者說明數(shù)據(jù)來源。在ECharts中，通過標(biāo)題組件可以設(shè)置圖表中的主標(biāo)題和副標(biāo)題。4.標(biāo)題組件知識(shí)儲(chǔ)備基礎(chǔ)折線圖中標(biāo)題組件的效果如下圖所示。4.標(biāo)題組件知識(shí)儲(chǔ)備通過option對(duì)象的title屬性可以配置標(biāo)題組件，title屬性的值為title對(duì)象，該對(duì)象的設(shè)置方式如下。varoption={title:{}};4.標(biāo)題組件知識(shí)儲(chǔ)備title對(duì)象的常用屬性如下表所示。屬性說明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)題組件知識(shí)儲(chǔ)備>>接上表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知識(shí)儲(chǔ)備（1）textStyle屬性textStyle屬性用于設(shè)置主標(biāo)題的樣式，該屬性的值為textStyle對(duì)象，該對(duì)象的設(shè)置方式如下。4.標(biāo)題組件varoption={title:{textStyle:{}}};知識(shí)儲(chǔ)備textStyle對(duì)象的常用屬性如下表所示。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è)置文字超出寬度是否截?cái)嗷蛘邠Q行，該屬性在配置了width后有效，可選值為none（默認(rèn)值）、truncate、break，分別表示文字超出寬度后不截?cái)嗷虿粨Q行、文字超出寬度時(shí)截?cái)嗖⒃谀┪诧@示ellipsis屬性配置的文字、文字超出寬度時(shí)換行ellipsis用于設(shè)置當(dāng)overflow屬性值為truncate時(shí)，可以通過該屬性配置末尾顯示的內(nèi)容，默認(rèn)值為…知識(shí)儲(chǔ)備（2）subtextStyle屬性subtextStyle屬性用于設(shè)置副標(biāo)題的樣式，該屬性的值為subtextStyle對(duì)象，該對(duì)象的設(shè)置方式如下。4.標(biāo)題組件varoption={title:{subtextStyle:{}}};知識(shí)儲(chǔ)備subtextStyle對(duì)象與textStyle對(duì)象的常用屬性基本相同，subtextStyle對(duì)象特有的屬性如下表所示。4.標(biāo)題組件屬性說明align用于設(shè)置副標(biāo)題的水平對(duì)齊方式，可選值有l(wèi)eft、center、rightverticalAlign用于設(shè)置副標(biāo)題的垂直對(duì)齊方式，可選值有top、middle、bottom知識(shí)儲(chǔ)備設(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ù)實(shí)現(xiàn)

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

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

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

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

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

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

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

先定一個(gè)小目標(biāo)！掌握區(qū)域填充樣式的設(shè)置方法，能夠設(shè)置區(qū)域填充樣式知識(shí)儲(chǔ)備在折線圖中，若要傳達(dá)總體數(shù)據(jù)，而不是確切的單個(gè)數(shù)據(jù)，可以為折線圖設(shè)置區(qū)域填充樣式。當(dāng)系列的type屬性值為line并且設(shè)置了areaStyle屬性時(shí)，圖表類型為區(qū)域面積圖。areaStyle屬性的值為areaStyle對(duì)象，該對(duì)象的設(shè)置方式如下。series:[{areaStyle:{}}]2.區(qū)域填充樣式知識(shí)儲(chǔ)備areaStyle對(duì)象的常用屬性如下表所示。屬性說明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í)儲(chǔ)備設(shè)置折線圖區(qū)域填充樣式的示例代碼如下。series:[{type:'line',areaStyle:{color:'#555',opacity:0.5}}]2.區(qū)域填充樣式知識(shí)儲(chǔ)備3.網(wǎng)格組件

先定一個(gè)小目標(biāo)！掌握網(wǎng)格組件的使用方法，能夠設(shè)置圖表的網(wǎng)格知識(shí)儲(chǔ)備在ECharts中，網(wǎng)格組件用于在直角坐標(biāo)系內(nèi)顯示網(wǎng)格。區(qū)域面積圖中網(wǎng)格組件的效果如下圖所示。3.網(wǎng)格組件知識(shí)儲(chǔ)備通過option對(duì)象的grid屬性可以配置網(wǎng)格組件，grid屬性的值為grid對(duì)象，該對(duì)象的設(shè)置方式如下。varoption={grid:{}};3.網(wǎng)格組件知識(shí)儲(chǔ)備grid對(duì)象的常用屬性如下表所示。屬性說明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)格組件知識(shí)儲(chǔ)備>>接上表屬性說明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í)儲(chǔ)備設(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ù)實(shí)現(xiàn)

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

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

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