《ECharts數(shù)據(jù)可視化實(shí)戰(zhàn)》課件第3章 ECharts官方文檔及常用組件 教案

第3章ECharts官方文檔及常用組件教案課程名稱：《ECharts數(shù)據(jù)可視化實(shí)戰(zhàn)》課程類別：必修適用專業(yè)：計(jì)算機(jī)科學(xué)與技術(shù)、大數(shù)據(jù)技術(shù)類、商務(wù)數(shù)據(jù)分析與應(yīng)用、電子商務(wù)等相關(guān)專業(yè)總學(xué)時(shí)：64學(xué)時(shí)（其中理論32學(xué)時(shí)，實(shí)驗(yàn)32學(xué)時(shí)）總學(xué)分：4.0學(xué)分本章學(xué)時(shí)：8學(xué)時(shí)材料清單《ECharts數(shù)據(jù)可視化實(shí)戰(zhàn)》教材。配套PPT。數(shù)據(jù)。代碼。引導(dǎo)性提問。探究性問題。拓展性問題。教學(xué)目標(biāo)與基本要求教學(xué)目標(biāo)首先介紹ECharts官方文檔的使用，然后介紹ECharts的基礎(chǔ)框架和常用術(shù)語，最后介紹ECharts圖表中的常用的幾種組件的配置和使用，包括網(wǎng)格組件、坐標(biāo)軸組件、標(biāo)題組件、圖例組件、工具箱組件、詳情提示框組件、標(biāo)記點(diǎn)組件和標(biāo)記線組件等。基本要求掌握ECharts官方文檔的查詢方法。了解ECharts的基礎(chǔ)架構(gòu)及常用術(shù)語。掌握ECharts的直角坐標(biāo)系下的網(wǎng)格及坐標(biāo)軸的使用。掌握ECharts中的標(biāo)題組件與圖例組件的使用。掌握ECharts中的工具箱組件與詳情提示框組件的使用。掌握ECharts中的標(biāo)記線與標(biāo)記點(diǎn)的使用。問題引導(dǎo)性提問引導(dǎo)性提問需要教師根據(jù)教材內(nèi)容和學(xué)生實(shí)際水平，提出問題，啟發(fā)引導(dǎo)學(xué)生去解決問題，提問，從而達(dá)到理解、掌握知識(shí)，發(fā)展各種能力和提高思想覺悟的目的。圖形和文字哪一種更容易讓大腦記??？你希望圖表上除了正常的數(shù)據(jù)之外，還應(yīng)該有些什么內(nèi)容？如何讓圖表的數(shù)據(jù)能夠隨著光標(biāo)的移動(dòng)而自動(dòng)發(fā)生相應(yīng)變化嗎？使用什么組件能夠記圖表顯示最大值、最小值和平均傎？探究性問題探究性問題需要教師深入鉆研教材的基礎(chǔ)上精心設(shè)計(jì)，提問的角度或者在引導(dǎo)性提問的基礎(chǔ)上，從重點(diǎn)、難點(diǎn)問題切入，進(jìn)行插入式提問?；蛘呤菍?duì)引導(dǎo)式提問中尚未涉及但在課文中又是重要的問題加以設(shè)問。ECharts的配置項(xiàng)太多，怎么辦？ECharts組件是如何布局的？ECharts中繪制圖表時(shí)，當(dāng)圖例數(shù)據(jù)較多時(shí)，一行放不下來，如何辦？ECharts中繪制圖表時(shí)，當(dāng)有多種不同類型的數(shù)據(jù)要展示時(shí)，如何解決？拓展性問題拓展性問題需要教師深刻理解教材的意義，學(xué)生的學(xué)習(xí)動(dòng)態(tài)后，根據(jù)學(xué)生學(xué)習(xí)層次，提出切實(shí)可行的關(guān)乎實(shí)際的可操作問題。亦可以提供拓展資料供學(xué)生研習(xí)探討，完成拓展性問題。ECharts中，如何在鼠標(biāo)滑過圖表中的數(shù)據(jù)標(biāo)簽時(shí)，展現(xiàn)更詳細(xì)的數(shù)據(jù)？ECharts中，如何將展現(xiàn)的圖表保存到自己的電腦中？ECharts中，在一張網(wǎng)頁中，如何在不同類型的圖表自由地切換？主要知識(shí)點(diǎn)、重點(diǎn)與難點(diǎn)主要知識(shí)點(diǎn)ECharts官方文檔的查詢方法。ECharts的基礎(chǔ)架構(gòu)及常用術(shù)語。ECharts的直角坐標(biāo)系下的網(wǎng)格及坐標(biāo)軸的使用。ECharts中的標(biāo)題組件與圖例組件的使用。ECharts中的工具箱組件與詳情提示框組件的使用。ECharts中的標(biāo)記線與標(biāo)記點(diǎn)的使用。重點(diǎn)ECharts官方文檔的查詢方法。ECharts中的標(biāo)題組件與圖例組件的使用。ECharts中的工具箱組件與詳情提示框組件的使用。ECharts中的標(biāo)記線與標(biāo)記點(diǎn)的使用。難點(diǎn)ECharts中的提示框位置的設(shè)置。格式字符串formatter的設(shè)置。ECharts中的標(biāo)記線與標(biāo)記點(diǎn)的使用。教學(xué)過程設(shè)計(jì)理論教學(xué)過程使用ECharts官方文檔，了解ECharts基礎(chǔ)架構(gòu)及常用術(shù)語。ECharts直角坐標(biāo)系下的網(wǎng)格。ECharts直角坐標(biāo)系下的坐標(biāo)軸。ECharts直角坐標(biāo)系下的x軸和y軸。ECharts中的標(biāo)題組件。ECharts中的多標(biāo)題組件。ECharts中的圖例組件。ECharts中的九宮格布局。繪制ECharts中的工具箱組件。繪制ECharts中的詳情提示框組件。提示框位置設(shè)置和formatter。繪制ECharts中的標(biāo)記線組件和標(biāo)記點(diǎn)。實(shí)驗(yàn)教學(xué)過程ECharts直角坐標(biāo)系下的網(wǎng)格及案例代碼分析。ECharts直角坐標(biāo)系下的坐標(biāo)軸及案例代碼分析。ECharts直角坐標(biāo)系下的x軸和y軸及案例代碼分析。ECharts中的標(biāo)題組件及案例代碼分析。ECharts中的多標(biāo)題組件及案例代碼分析。ECharts中的圖例組件及案例代碼分析。繪制ECharts中的工具箱組件及案例分析代碼。繪制ECharts中的詳情提示框組件及案例代碼分析。提示框位置設(shè)置和formatte及案例代碼分析。繪制ECharts中的標(biāo)記線組件和標(biāo)記點(diǎn)及案例代碼分析。教材與參考資料教材范路橋，鄭述招，陳紅玲，等．ECharts數(shù)據(jù)可視化實(shí)戰(zhàn)[M]．西安：西安電子科技大學(xué)出版社．2023．參考資料范路橋，張良均，鄭述招，等[M].Web數(shù)據(jù)可視化(ECharts版).北京：人民郵電出版社，2021.黑馬程序員.Vue.js前端開發(fā)實(shí)戰(zhàn)[M].北京：人民郵電出版社，2020.師曉利，劉志遠(yuǎn)，杜琰琪.Vue.js前端開發(fā)實(shí)戰(zhàn)[M].北京：人民郵電出版社，2020.王鳳麗，豆連軍.Vue.js前端開發(fā)技術(shù)[M].北京：人民郵電出版社，2019.肖睿，龍穎，李輝，等.Vue.js企業(yè)開發(fā)實(shí)戰(zhàn)[M].北京：人民郵電出版社，2018.百度ECharts官網(wǎng)./zh/2022-