




版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報或認(rèn)領(lǐng)
文檔簡介
Web數(shù)據(jù)可視化教程(基于ECharts)Web數(shù)據(jù)可視化教程(基于ECharts)Web數(shù)據(jù)可視化教程(基于ECharts)【訓(xùn)練8-4】的對應(yīng)代碼Web數(shù)據(jù)可視化教程(基于ECharts)vardata=[{name:'爺爺',children:[{name:'張伯伯',value:15,children:[{name:'表兄弟張陽',value:2},{name:'表兄弟張光',value:5,children:[{name:'兒子張平',value:2}]},{name:'表兄弟張燦',value:4}]},{name:'爸爸',value:10,children:[{name:'我自己',value:5},{name:'兄弟張靜',value:1}]}]},{name:'姑奶奶',children:[{name:'李叔叔',value:5,children:[{name:'表兄弟李歡',value:2},{name:'表兄弟李樂',value:2,children:[{name:'女兒李秀',value:2}]}]}]}];option={series:{type:'sunburst',//emphasis:{//focus:'ancestor'//},data:data,radius:[0,'90%'],label:{rotate:'radial'}}};Web數(shù)據(jù)可視化教程(基于ECharts)task0801.html的完整代碼Web數(shù)據(jù)可視化教程(基于ECharts)<!doctypehtml><html><head><metacharset="utf-8"><title>ECharts圖表示例</title><!--引入ECharts文件--><scriptsrc="../ECharts/echarts.min.js"></script></head><body><!--為ECharts準(zhǔn)備一個定義了寬高的DOM--><divid="main"style="width:600px;height:600px;"></div><scripttype="text/javascript">//基于準(zhǔn)備好的DOM,初始化echarts實例varhartDom=document.getElementById('main');varmyChart=echarts.init(hartDom,null,{renderer:'canvas',useDirtyRect:false});//指定圖表的配置項和數(shù)據(jù)varapp={};varoption;constgraphData=[['2025-02-01',260],['2025-02-04',200],['2025-02-09',279],['2025-02-13',847],['2025-02-18',241],['2025-02-23',411],['2025-03-14',985]];constlinks=graphData.map(function(item,idx){return{source:idx,target:idx+1};});links.pop();functiongetVirtualData(year){constdate=+echarts.time.parse(year+'-01-01');constend=+echarts.time.parse(+year+1+'-01-01');constdayTime=3600*24*1000;constdata=[];for(lettime=date;time<end;time+=dayTime){data.push([echarts.time.format(time,'{yyyy}-{MM}-{dd}',false),Math.floor(Math.random()*1000)]);}returndata;}option={tooltip:{},calendar:{top:'middle',left:'center',orient:'vertical',cellSize:40,yearLabel:{margin:50,fontSize:30},dayLabel:{firstDay:1,nameMap:'cn'},monthLabel:{nameMap:'cn',margin:10,fontSize:20,color:'#999'},range:['2025-02','2025-03-31']},visualMap:{min:0,max:1000,type:'piecewise',left:'center',bottom:60,inRange:{color:['#5291FF','#C7DBFF']},seriesIndex:[1],orient:'horizontal'},series:[{type:'graph',edgeSymbol:['none','arrow'],coordinateSystem:'calendar',links:links,symbolSize:15,calendarIndex:0,itemStyle:{color:'yellow',shadowBlur:9,shadowOffsetX:1.5,shadowOffsetY:3,shadowColor:'#555'},lineStyle:{color:'#D10E00',width:1,opacity:1},data:graphData,z:20},{type:'heatmap',coordinateSystem:'calendar',data:getVirtualData('2025')}]};//使用剛指定的配置項和數(shù)據(jù)顯示圖表。if(option&&typeofoption==='object'){myChart.setOption(option);}window.addEventListener('resize',myChart.resize);</script></body></html>Web數(shù)據(jù)可視化教程(基于ECharts)【任務(wù)8-2】的對應(yīng)代碼Web數(shù)據(jù)可視化教程(基于ECharts)option={silent:true,series:[{radius:['15%','80%'],type:'sunburst',sort:undefined,emphasis:{focus:'ancestor'},data:[{value:8,children:[{value:4,children:[{value:2},{value:1},{value:1},{value:0.5}]},{value:2}]},{value:4,children:[{children:[{value:2}]}]},{value:4,children:[{children:[{value:2}]}]},{value:3,children:[{children:[{value:1}]}]}],label:{color:'#000',textBorderColor:'#fff',textBorderWidth:2,formatter:function(param){vardepth=param.treePathInfo.length;if(depth===2){return'徑向';}elseif(depth===3){return'切向';}elseif(depth===4){return'0';}return'';}},levels:[{},{itemStyle:{color:'#CD4949'},label:{rotate:'徑向'}},{itemStyle:{color:'#F47251'},label:{rotate:'切向'}},{itemStyle:{color:'#FFC75F'},label:{rotate:0}}]}]};Web數(shù)據(jù)可視化教程(基于ECharts)【任務(wù)8-3】的對應(yīng)代碼Web數(shù)據(jù)可視化教程(基于ECharts)//date,AQIindex,PM2.5,PM10,CO,NO2,SO2constdata1=[[1,55,9,56,0.46,18,6,'良'],[2,25,11,21,0.65,34,9,'優(yōu)'],[3,56,7,63,0.3,14,5,'良'],[4,33,7,29,0.33,16,6,'優(yōu)'],[5,42,24,44,0.76,40,16,'優(yōu)'],[6,82,58,90,1.77,68,33,'良'],[7,74,49,77,1.46,48,27,'良'],[8,78,55,80,1.29,59,29,'良'],[9,267,216,280,4.8,108,64,'重度污染'],[10,185,127,216,2.52,61,27,'中度污染'],[11,39,19,38,0.57,31,15,'優(yōu)'],[12,41,11,40,0.43,21,7,'優(yōu)'],[13,64,38,74,1.04,46,22,'良'],[14,108,79,120,1.7,75,41,'輕度污染'],[15,108,63,116,1.48,44,26,'輕度污染'],[16,33,6,29,0.34,13,5,'優(yōu)'],[17,94,66,110,1.54,62,31,'良'],[18,186,142,192,3.88,93,79,'中度污染'],[19,57,31,54,0.96,32,14,'良'],[20,22,8,17,0.48,23,10,'優(yōu)'],[21,39,15,36,0.61,29,13,'優(yōu)'],[22,94,69,114,2.08,73,39,'良'],[23,99,73,110,2.43,76,48,'良'],[24,31,12,30,0.5,32,16,'優(yōu)'],[25,42,27,43,1,53,22,'優(yōu)'],[26,154,117,157,3.05,92,58,'中度污染'],[27,234,185,230,4.09,123,69,'重度污染'],[28,160,120,186,2.77,91,50,'中度污染'],[29,134,96,165,2.76,83,41,'輕度污染'],[30,52,24,60,1.03,50,21,'良'],[31,46,5,49,0.28,10,6,'優(yōu)']];vardata2=[[1,26,37,27,1.163,27,13,'優(yōu)'],[2,85,62,71,1.195,60,8,'良'],[3,78,38,74,1.363,37,7,'良'],[4,21,21,36,0.634,40,9,'優(yōu)'],[5,41,42,46,0.915,81,13,'優(yōu)'],[6,56,52,69,1.067,92,16,'良'],[7,64,30,28,0.924,51,2,'良'],[8,55,48,74,1.236,75,26,'良'],[9,76,85,113,1.237,114,27,'良'],[10,91,81,104,1.041,56,40,'良'],[11,84,39,60,0.964,25,11,'良'],[12,64,51,101,0.862,58,23,'良'],[13,70,69,120,1.198,65,36,'良'],[14,77,105,178,2.549,64,16,'良'],[15,109,68,87,0.996,74,29,'輕度污染'],[16,73,68,97,0.905,51,34,'良'],[17,54,27,47,0.592,53,12,'良'],[18,51,61,97,0.811,65,19,'良'],[19,91,71,121,1.374,43,18,'良'],[20,73,102,182,2.787,44,19,'良'],[21,73,50,76,0.717,31,20,'良'],[22,84,94,140,2.238,68,18,'良'],[23,93,77,104,1.165,53,7,'良'],[24,99,130,227,3.97,55,15,'良'],[25,146,84,139,1.094,40,17,'輕度污染'],[26,113,108,137,1.481,48,15,'輕度污染'],[27,81,48,62,1.619,26,3,'良'],[28,56,48,68,1.336,37,9,'良'],[29,82,92,174,3.29,0,13,'良'],[30,106,116,188,3.628,101,16,'輕度污染'],[31,118,50,0,1.383,76,11,'輕度污染']];vardata3=[[1,91,45,125,0.82,34,23,'良'],[2,65,27,78,0.86,45,29,'良'],[3,83,60,84,1.09,73,27,'良'],[4,109,81,121,1.28,68,51,'輕度污染'],[5,106,77,114,1.07,55,51,'輕度污染'],[6,109,81,121,1.28,68,51,'輕度污染'],[7,106,77,114,1.07,55,51,'輕度污染'],[8,89,65,78,0.86,51,26,'良'],[9,53,33,47,0.64,50,17,'良'],[10,80,55,80,1.01,75,24,'良'],[11,117,81,124,1.03,45,24,'輕度污染'],[12,99,71,142,1.1,62,42,'良'],[13,95,69,130,1.28,74,50,'良'],[14,116,87,131,1.47,84,40,'輕度污染'],[15,108,80,121,1.3,85,37,'輕度污染'],[16,134,83,167,1.16,57,43,'輕度污染'],[17,79,43,107,1.05,59,37,'良'],[18,71,46,89,0.86,64,25,'良'],[19,97,71,113,1.17,88,31,'良'],[20,84,57,91,0.85,55,31,'良'],[21,87,63,101,0.9,56,41,'良'],[22,104,77,119,1.09,73,48,'輕度污染'],[23,87,62,100,1,72,28,'良'],[24,168,128,172,1.49,97,56,'中度污染'],[25,65,45,51,0.74,39,17,'良'],[26,39,24,38,0.61,47,17,'優(yōu)'],[27,39,24,39,0.59,50,19,'優(yōu)'],[28,93,68,96,1.05,79,29,'良'],[29,188,143,197,1.66,99,51,'中度污染'],[30,174,131,174,1.55,108,50,'中度污染'],[31,187,143,201,1.39,89,53,'中度污染']];varschema=[{name:'date',index:0,text:'日期'},{name:'AQIindex',index:1,text:'AQI'},{name:'PM25',index:2,text:'PM2.5'},{name:'PM10',index:3,text:'PM10'},{name:'CO',index:4,text:'CO'},{name:'NO2',index:5,text:'NO2'},{name:'SO2',index:6,text:'SO2'},{name:'等級',index:7,text:'等級'}];varlineStyle={width:1,opacity:0.5};option={backgroundColor:'#333',legend:{bottom:30,data:['A城市','B城市','C城市'],itemGap:20,textStyle:{color:'#fff',fontSize:14}},tooltip:{padding:10,backgroundColor:'#222',borderColor:'#777',borderWidth:1},parallelAxis:[{dim:0,name:schema[0].text,inverse:true,max:31,nameLocation:'start'},{dim:1,name:schema[1].text},{dim:2,name:schema[2].text},{dim:3,name:schema
溫馨提示
- 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)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 生態(tài)景觀與社區(qū)互動考核試卷
- 防爆設(shè)備泄漏監(jiān)測系統(tǒng)設(shè)計考核試卷
- 其他農(nóng)業(yè)專業(yè)及輔助性活動考核試卷
- 智能倉儲物流系統(tǒng)在五金行業(yè)的供應(yīng)鏈整合能力研究考核試卷
- 企業(yè)變革中的持續(xù)改進(jìn)方法考核試卷
- 化學(xué)工程計算方法考核試卷
- 農(nóng)業(yè)氣象服務(wù)與農(nóng)村社區(qū)文化振興研究考核試卷
- 數(shù)字營銷-章末思考題及答案
- 露在外面的面高頻易錯提高卷(含解析)-2025年北師大版五年級數(shù)學(xué)下冊
- 頻率與概率(含解析)-2025人教A版高一數(shù)學(xué)下冊
- 2025年發(fā)展對象培訓(xùn)班考試題庫及答案
- 2024年中國辣椒油樹脂行業(yè)市場調(diào)查報告
- 2025年中考英語廣東卷試題真題解讀及答案詳解
- 公共娛樂場所消防安全培訓(xùn)
- 房屋交付規(guī)范指南
- 稅務(wù)政策培訓(xùn)課件
- 循環(huán)水培訓(xùn)課件
- 大型喪事活動方案
- 2025秋人教版(2024)八年級上冊地理 【教學(xué)課件】1.1.1 《疆域》
- 《數(shù)據(jù)中心鋰離子電池消防安全白皮書》
- 餐廳迎賓禮儀培訓(xùn)
評論
0/150
提交評論