版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報或認(rèn)領(lǐng)
文檔簡介
《數(shù)據(jù)可視化技術(shù)》課題13Echarts聯(lián)動圖的制作01準(zhǔn)備活動點(diǎn)名、復(fù)習(xí)本次課學(xué)習(xí)內(nèi)容、學(xué)習(xí)目標(biāo)介紹學(xué)習(xí)內(nèi)容任務(wù):電器產(chǎn)品營銷數(shù)據(jù)的可視化分析:電器產(chǎn)品種類繁多,交易數(shù)據(jù)量大,通過可視化手段對其銷售數(shù)據(jù)進(jìn)行分析和圖表展示,可以幫助銷售人員改進(jìn)銷售手段和策略,提高銷售量。本單元制作多條折線圖聯(lián)動餅圖,以及ECharts事件處理。任務(wù)1、多條折線圖聯(lián)動餅圖任務(wù)2、使用鼠標(biāo)事件任務(wù)3、使用組件交互的行為事件學(xué)習(xí)目標(biāo)1、知識(1)理解多條折線圖聯(lián)動餅圖的原理(2)掌握多條折線圖聯(lián)動餅圖的制作(3)理解鼠標(biāo)事件(4)理解組件交互的行為事件2、技能(1)能夠使用Echarts實現(xiàn)多個圖表共享一個dataset(2)能夠繪制聯(lián)動圖(3)能夠使用Echarts處理事件3、素養(yǎng)(1)嚴(yán)謹(jǐn)認(rèn)真、代碼規(guī)范;(2)數(shù)據(jù)安全、愛國精神;(3)信息檢索能力02發(fā)展活動任務(wù)分析、任務(wù)資訊、演示講解、任務(wù)實施任務(wù)分析商家需要展示較多數(shù)據(jù)時,往往需要多個圖表展示不同維度的信息,當(dāng)需要通過一個圖表查看某個維度特征信息時,另外的圖表也能跟著展示關(guān)聯(lián)信息,具有聯(lián)動效果,這就需要制作聯(lián)動圖Echarts事件。ECharts可以實現(xiàn)多個圖表共享一個數(shù)據(jù)集,并制作帶有聯(lián)動交互效果的圖表。現(xiàn)有某商城空調(diào)設(shè)備的銷售數(shù)據(jù),本任務(wù)將ECharts與JavaScript事件相結(jié)合來實現(xiàn)聯(lián)動圖效果,繪制多條折線圖并聯(lián)動餅圖,當(dāng)鼠標(biāo)移入折線圖不同類目時,餅圖展示出該類目下各維度信息的占比情況。任務(wù)資訊2、什么是Echarts聯(lián)動圖?多個圖表之間有關(guān)聯(lián),當(dāng)鼠標(biāo)在一個圖表中移動時,另外的圖表也會發(fā)生變化,這就是聯(lián)動圖。常見的聯(lián)動圖有:折線圖聯(lián)動餅圖、柱狀圖聯(lián)動餅圖、表格數(shù)據(jù)聯(lián)動餅圖等折線圖聯(lián)動餅圖是用得較多的一種效果。當(dāng)鼠標(biāo)在折線圖坐標(biāo)軸上方不同類目間移動時,餅圖也隨之改變。一般會用myChart.on('updateAxisPointer',function(event){})來實現(xiàn)聯(lián)動,其實質(zhì)是先通過鼠標(biāo)事件,不斷獲取xAxis信息,然后根據(jù)獲取到的xAxis信息更新餅圖,達(dá)到聯(lián)動效果。任務(wù)實施2、ECharts事件處理ECharts中我們可以通過監(jiān)聽用戶的操作行為來回調(diào)對應(yīng)的函數(shù)。ECharts通過on方法來監(jiān)聽用戶的行為,例如監(jiān)控用戶的點(diǎn)擊行為。ECharts中事件分為兩種類型:(1)用戶鼠標(biāo)操作事件。如'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu'事件。在繪制柱狀圖后,添加下面代碼可以實現(xiàn)監(jiān)控鼠標(biāo)單擊事件:鼠標(biāo)單擊柱子會觸發(fā)彈框效果,彈框中顯示柱子對應(yīng)的類目和數(shù)值。任務(wù)實施2、ECharts事件處理(2)行為事件。這種是用戶在使用可以交互的組件后觸發(fā)的行為事件,例如在切換圖例開關(guān)時觸發(fā)的'legendselectchanged'事件,數(shù)據(jù)區(qū)域縮放時觸發(fā)的'datazoom'事件等。打開、關(guān)閉圖例觸發(fā)的行為事件代碼如下:任務(wù)資訊2、ECharts事件處理上述代碼myChart通過on方法監(jiān)聽legendselectchanged事件,即圖例的開或關(guān)事件。如果關(guān)閉了某個圖例,則會在控制臺顯示“取消選中了圖例”,并提示兩個圖例的開關(guān)狀態(tài):{圖例1:false,圖例2:true};如果打開了某個圖例,控制臺顯示“選中了圖例”,以及提示{圖例1:true,圖例2:true}。參考網(wǎng)址:/echarts/echarts-events.html任務(wù)實施1、網(wǎng)上商城現(xiàn)對2017—2022年各種品牌空調(diào)銷量進(jìn)行了統(tǒng)計,結(jié)果見表利用表中數(shù)據(jù),繪制多條折線圖聯(lián)動餅圖。折線圖中,橫軸為年份值(2017至2022),縱軸為各品牌銷量,鼠標(biāo)移入坐標(biāo)軸不同年份時,餅圖產(chǎn)生聯(lián)動效果,出現(xiàn)該年份各種空調(diào)品牌的銷量及占比情況。任務(wù)實施步驟1:、要實現(xiàn)聯(lián)動效果,使用setTimeout來定時執(zhí)行主體代碼,主體代碼結(jié)構(gòu)如下:任務(wù)實施步驟2:option代碼實現(xiàn)多條折線圖和餅圖的初始效果,餅圖初始顯示2017年的數(shù)據(jù),部分代碼如下:任務(wù)實施步驟3:接下來是實現(xiàn)聯(lián)動效果的事件函數(shù),代碼如下:任務(wù)實施2、瀏覽網(wǎng)頁,檢驗效果左圖為多條折線圖,顯示了各種空調(diào)品牌各個年份的銷量發(fā)展趨勢,當(dāng)鼠標(biāo)移入折線圖時,上方將顯示鼠標(biāo)所在年份的各品牌銷量占比數(shù)據(jù),達(dá)到了聯(lián)動的效果。03整合活動總結(jié)、知識點(diǎn)梳理學(xué)習(xí)總結(jié)拓展任務(wù)創(chuàng)作一個比較復(fù)雜的Echarts圖表,譬如表格聯(lián)動散點(diǎn)圖、表格聯(lián)動餅圖等。譬如下圖為“表格聯(lián)動餅圖”《數(shù)據(jù)可視化技術(shù)》課題14
EchartsDashboard可視化綜合應(yīng)用項目介紹本次課完成項目答辯:
EchartsDashboard可視化綜合應(yīng)用01準(zhǔn)備活動點(diǎn)名、復(fù)習(xí)本次課學(xué)習(xí)內(nèi)容、學(xué)習(xí)目標(biāo)介紹答辯準(zhǔn)備I分組
分7個小組,每組6-7人。II選題
學(xué)習(xí)項目2、3過程中完成選題02發(fā)展活動任務(wù)分析、任務(wù)資訊、演示講解、任務(wù)實施答辯要求I項目要求1、基本要求:
Echarts+Dashboard大屏展示;2、附加加分:使用折線圖聯(lián)動餅圖方式創(chuàng)建圖表大屏展示。II講解ppt一個同學(xué)講,也可以每個同學(xué)講自己的工作;代碼;網(wǎng)頁圖,每個圖結(jié)論1、項目的意義(必須有思政意義)2、項目完成的情況,以及每個同學(xué)的分工3、分步驟講解每個圖怎么完成的4、展示結(jié)果、圖的結(jié)論5、展示代碼答辯要求III
答辯5分鐘老師、同學(xué)提問,組內(nèi)每個同學(xué)都要做好準(zhǔn)備
IV
評判標(biāo)準(zhǔn)1、PPT講解不到10分鐘的,每個同學(xué)扣5分;2、答辯提問的同學(xué),加1-3分;答辯要求V、組間互評:(30%)(1)2個優(yōu)秀(85-100)、3個良好(70-84),2個合格/不合格(2)每個組給一個分?jǐn)?shù),老師收集7張表,每
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 貴州城市職業(yè)學(xué)院《銷售終端設(shè)計》2023-2024學(xué)年第一學(xué)期期末試卷
- 貴州財經(jīng)大學(xué)《單片機(jī)原理及應(yīng)用實驗》2023-2024學(xué)年第一學(xué)期期末試卷
- 貴州電力職業(yè)技術(shù)學(xué)院《大學(xué)數(shù)學(xué)Ⅱ微積分》2023-2024學(xué)年第一學(xué)期期末試卷
- 2025年-山西省安全員A證考試題庫
- 廣州珠江職業(yè)技術(shù)學(xué)院《氣力輸送與廠內(nèi)運(yùn)輸》2023-2024學(xué)年第一學(xué)期期末試卷
- 貴陽學(xué)院《商務(wù)日語口譯》2023-2024學(xué)年第一學(xué)期期末試卷
- 2025年湖北建筑安全員《C證》考試題庫及答案
- 廣州應(yīng)用科技學(xué)院《有機(jī)化學(xué)實驗二》2023-2024學(xué)年第一學(xué)期期末試卷
- 2025上海市安全員A證考試題庫及答案
- 廣州鐵路職業(yè)技術(shù)學(xué)院《精密機(jī)械設(shè)計基礎(chǔ)》2023-2024學(xué)年第一學(xué)期期末試卷
- 保密培訓(xùn)記錄表
- 專升本英語寫作專題講解課件
- 平安保險授權(quán)委托書
- 員工安全培訓(xùn)教育制度
- 深圳證券交易所
- 各種管道護(hù)理評分標(biāo)準(zhǔn)
- 體育賽事志愿者管理
- 遼寧華電高科環(huán)保技術(shù)有限公司油泥煤循環(huán)流化床協(xié)同資源化工業(yè)化試驗項目環(huán)境影響評價報告書
- 復(fù)旦大學(xué)普物B期末考試試卷
- 剪映教程PPT版本新版剪影零基礎(chǔ)教學(xué)課程課件
- 非煤礦山安全風(fēng)險分級管控與安全隱患排查治理u000b雙重預(yù)防機(jī)制建設(shè)知識
評論
0/150
提交評論