Web數(shù)據(jù)可視化教程（基于ECharts）模塊3繪制ECharts柱狀圖和條形圖【任務(wù)3-1】繪制城市一周氣溫變化柱狀圖（1）啟動(dòng)Dreamweaver，創(chuàng)建網(wǎng)頁(yè)task0301.html，將該文件保存到本模塊文件夾Unit03中。（2）在網(wǎng)頁(yè)task0301.html中繪制城市一周氣溫變化的柱狀圖，并進(jìn)行必要的屬性設(shè)置?！救蝿?wù)描述】【代碼編寫(xiě)】【任務(wù)3-1】繪制城市一周氣溫變化柱狀圖option={title:{text:'一周氣溫變化柱狀圖',subtext:'長(zhǎng)沙市2024年9月30日至10月6日一周氣溫變化',padding:[5,0,0,10],},tooltip:{trigger:'axis'},【代碼編寫(xiě)】【任務(wù)3-1】繪制城市一周氣溫變化柱狀圖legend:{itemGap:40,data:['最高氣溫','最低氣溫']},calculable:true,xAxis:[{type:'category',data:['星期一','星期二','星期三','星期四','星期五','星期六','星期日']}],yAxis:[{type:'value',axisLabel:{formatter:'{value}℃'}}],【代碼編寫(xiě)】【任務(wù)3-1】繪制城市一周氣溫變化柱狀圖series:[{name:'最高氣溫',type:'bar',data:[33,20,24,24,26,27,27],markPoint:{data:[{type:'max',name:'最大值'}]}},【代碼編寫(xiě)】【任務(wù)3-1】繪制城市一周氣溫變化柱狀圖{name:'最低氣溫',type:'bar',data:[18,15,17,14,18,18,17],markPoint:{data:[{type:'min',name:'周最低'}]}}]};【圖表展示】【任務(wù)3-1】繪制城市一周氣溫變化柱狀圖任務(wù)3-1對(duì)應(yīng)的柱狀圖如圖3-14所示。圖3-14任務(wù)3-1對(duì)應(yīng)的柱狀圖快樂(lè)學(xué)習(xí)高效學(xué)習(xí)祝學(xué)習(xí)進(jìn)步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊3繪制ECharts柱狀圖和條形圖【任務(wù)3-2】繪制柱狀圖對(duì)比降雨量與蒸發(fā)量（1）啟動(dòng)Dreamweaver，創(chuàng)建網(wǎng)頁(yè)task0302.html，將該文件保存到本模塊文件夾Unit03中。（2）在網(wǎng)頁(yè)task0302.html中繪制柱狀圖對(duì)比降雨量與蒸發(fā)量，并進(jìn)行必要的屬性設(shè)置?！救蝿?wù)描述】【代碼編寫(xiě)】【任務(wù)3-2】繪制柱狀圖對(duì)比降雨量與蒸發(fā)量option={title:{text:'降雨量對(duì)比蒸發(fā)量',subtext:'虛擬數(shù)據(jù)'},tooltip:{trigger:'axis'},【代碼編寫(xiě)】【任務(wù)3-2】繪制柱狀圖對(duì)比降雨量與蒸發(fā)量legend:{data:['降雨量','蒸發(fā)量']},toolbox:{show:true,feature:{dataView:{show:true,readOnly:false},magicType:{show:true,type:['line','bar']},restore:{show:true},saveAsImage:{show:true}}},【代碼編寫(xiě)】【任務(wù)3-2】繪制柱狀圖對(duì)比降雨量與蒸發(fā)量calculable:true,xAxis:[{type:'category',

data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']}],【代碼編寫(xiě)】【任務(wù)3-2】繪制柱狀圖對(duì)比降雨量與蒸發(fā)量yAxis:[{type:'value'}],series:[{name:'降雨量',type:'bar',data:[2.0,4.9,7.0,23.2,25.6,76.7,135.6,162.2,32.6,20.0,6.4,3.3],【代碼編寫(xiě)】【任務(wù)3-2】繪制柱狀圖對(duì)比降雨量與蒸發(fā)量markPoint:{data:[{type:'max',name:'Max'},{type:'min',name:'Min'}]},markLine:{data:[{type:'average',name:'Avg'}]}},【代碼編寫(xiě)】【任務(wù)3-2】繪制柱狀圖對(duì)比降雨量與蒸發(fā)量{name:'蒸發(fā)量',type:'bar',data:[2.6,5.9,9.0,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6.0,2.3],markPoint:{data:[{name:'Max',value:182.2,xAxis:7,yAxis:183},{name:'Min',value:2.3,xAxis:11,yAxis:3}]},【代碼編寫(xiě)】【任務(wù)3-2】繪制柱狀圖對(duì)比降雨量與蒸發(fā)量markLine:{data:[{type:'average',name:'Avg'}]}}]};【圖表展示】【任務(wù)3-2】繪制柱狀圖對(duì)比降雨量與蒸發(fā)量任務(wù)3-2對(duì)應(yīng)的柱狀圖如圖3-15所示。在瀏覽器中瀏覽對(duì)應(yīng)的柱狀圖。圖3-15任務(wù)3-2對(duì)應(yīng)的柱狀圖快樂(lè)學(xué)習(xí)高效學(xué)習(xí)祝學(xué)習(xí)進(jìn)步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊3繪制ECharts柱狀圖和條形圖【任務(wù)3-3】繪制柱狀圖統(tǒng)計(jì)天氣數(shù)據(jù)（1）啟動(dòng)Dreamweaver，創(chuàng)建網(wǎng)頁(yè)task0303.html，將該文件保存到本模塊文件夾Unit03中。（2）在網(wǎng)頁(yè)task0303.html中繪制柱狀圖統(tǒng)計(jì)天氣數(shù)據(jù)，并進(jìn)行必要的屬性設(shè)置?！救蝿?wù)描述】【代碼編寫(xiě)】【任務(wù)3-3】繪制柱狀圖統(tǒng)計(jì)天氣數(shù)據(jù)瀏覽電子活頁(yè)3-3中的內(nèi)容，熟悉任務(wù)3-3的對(duì)應(yīng)代碼。在Dreamweaver中編寫(xiě)對(duì)應(yīng)的代碼?！緢D表展示】【任務(wù)3-3】繪制柱狀圖統(tǒng)計(jì)天氣數(shù)據(jù)任務(wù)3-3對(duì)應(yīng)的柱狀圖如圖3-16所示。在瀏覽器中瀏覽對(duì)應(yīng)的柱狀圖。圖3-16任務(wù)3-3對(duì)應(yīng)的柱狀圖快樂(lè)學(xué)習(xí)高效學(xué)習(xí)祝學(xué)習(xí)進(jìn)步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊3繪制ECharts柱狀圖和條形圖【任務(wù)3-4】繪制柱狀圖分析蒸發(fā)量、降水量和溫度之間的關(guān)系（1）啟動(dòng)Dreamweaver，創(chuàng)建網(wǎng)頁(yè)task0304.html，將該文件保存到本模塊文件夾Unit03中。（2）在網(wǎng)頁(yè)task0304.html中繪制柱狀圖分析蒸發(fā)量、降水量和溫度之間的關(guān)系，并進(jìn)行必要的屬性設(shè)置?！救蝿?wù)描述】【代碼編寫(xiě)】【任務(wù)3-4】繪制柱狀圖分析蒸發(fā)量、降水量和溫度之間的關(guān)系constcolors=['#5470C6','#91CC75','#EE6666'];option={color:colors,//配置提示框組件

tooltip:{trigger:'axis',axisPointer:{type:'cross'}},

【代碼編寫(xiě)】【任務(wù)3-4】繪制柱狀圖分析蒸發(fā)量、降水量和溫度之間的關(guān)系grid:{right:'20%'},//配置工具欄組件

toolbox:{show:true,feature:{dataView:{show:true,readOnly:false},restore:{show:true},saveAsImage:{show:true}}},【代碼編寫(xiě)】【任務(wù)3-4】繪制柱狀圖分析蒸發(fā)量、降水量和溫度之間的關(guān)系

//配置圖例組件

legend:{data:['蒸發(fā)量','降水量','氣溫']},【代碼編寫(xiě)】【任務(wù)3-4】繪制柱狀圖分析蒸發(fā)量、降水量和溫度之間的關(guān)系

//配置x軸

xAxis:[{//指定x軸上的類(lèi)目數(shù)據(jù)及格式

type:'category',axisTick:{alignWithLabel:true},data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']}],【代碼編寫(xiě)】【任務(wù)3-4】繪制柱狀圖分析蒸發(fā)量、降水量和溫度之間的關(guān)系yAxis:[{type:'value',name:'蒸發(fā)量',position:'right',alignTicks:true,axisLine:{show:true,lineStyle:{color:colors[0]}},【代碼編寫(xiě)】【任務(wù)3-4】繪制柱狀圖分析蒸發(fā)量、降水量和溫度之間的關(guān)系axisLabel:{formatter:'{value}ml'}},【代碼編寫(xiě)】【任務(wù)3-4】繪制柱狀圖分析蒸發(fā)量、降水量和溫度之間的關(guān)系{type:'value',name:'降水量',position:'right',alignTicks:true,offset:80,axisLine:{show:true,lineStyle:{color:colors[1]}},【代碼編寫(xiě)】【任務(wù)3-4】繪制柱狀圖分析蒸發(fā)量、降水量和溫度之間的關(guān)系axisLabel:{formatter:'{value}ml'}},【代碼編寫(xiě)】【任務(wù)3-4】繪制柱狀圖分析蒸發(fā)量、降水量和溫度之間的關(guān)系{type:'value',name:'溫度',position:'left',alignTicks:true,axisLine:{show:true,lineStyle:{color:colors[2]}},【代碼編寫(xiě)】【任務(wù)3-4】繪制柱狀圖分析蒸發(fā)量、降水量和溫度之間的關(guān)系axisLabel:{formatter:'{value}℃}}],【代碼編寫(xiě)】【任務(wù)3-4】繪制柱狀圖分析蒸發(fā)量、降水量和溫度之間的關(guān)系series:[{name:'蒸發(fā)量',type:'bar',data:[2.0,4.9,7.0,23.2,25.6,76.7,135.6,162.2,32.6,20.0,6.4,3.3]},【代碼編寫(xiě)】【任務(wù)3-4】繪制柱狀圖分析蒸發(fā)量、降水量和溫度之間的關(guān)系{name:'降水量',type:'bar',yAxisIndex:1,data:[2.6,5.9,9.0,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6.0,2.3]},【代碼編寫(xiě)】【任務(wù)3-4】繪制柱狀圖分析蒸發(fā)量、降水量和溫度之間的關(guān)系{name:'氣溫',type:'line',yAxisIndex:2,data:[2.0,2.2,3.3,4.5,6.3,10.2,20.3,23.4,23.0,16.5,12.0,6.2]}]};【圖表展示】【任務(wù)3-4】繪制柱狀圖分析蒸發(fā)量、降水量和溫度之間的關(guān)系任務(wù)3-4對(duì)應(yīng)的柱狀圖如圖3-17所示。在瀏覽器中瀏覽對(duì)應(yīng)的柱狀圖。圖3-17任務(wù)3-4對(duì)應(yīng)的柱狀圖快樂(lè)學(xué)習(xí)高效學(xué)習(xí)祝學(xué)習(xí)進(jìn)步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊3繪制ECharts柱狀圖和條形圖【任務(wù)3-5】繪制條形圖對(duì)比部分省市的地區(qū)生產(chǎn)總值（1）啟動(dòng)Dreamweaver，創(chuàng)建網(wǎng)頁(yè)task0305.html，將該文件保存到本模塊文件夾Unit03中。（2）在網(wǎng)頁(yè)task0305.html中繪制條形圖對(duì)比部分省市的地區(qū)生產(chǎn)總值，并進(jìn)行必要的屬性設(shè)置。【任務(wù)描述】【代碼編寫(xiě)】【任務(wù)3-5】繪制條形圖對(duì)比部分省市的地區(qū)生產(chǎn)總值option={title:{text:'地區(qū)生產(chǎn)總值（億元）'},tooltip:{trigger:'axis',axisPointer:{type:'shadow'}},

【代碼編寫(xiě)】【任務(wù)3-5】繪制條形圖對(duì)比部分省市的地區(qū)生產(chǎn)總值legend:{},grid:{left:'3%',right:'4%',bottom:'3%',containLabel:true},【代碼編寫(xiě)】【任務(wù)3-5】繪制條形圖對(duì)比部分省市的地區(qū)生產(chǎn)總值xAxis:{type:'value',boundaryGap:[0,0.01]},yAxis:{type:'category',data:['北京市','天津市','上海市','重慶市','廣東省','江蘇省','浙江省','山東省']},【代碼編寫(xiě)】【任務(wù)3-5】繪制條形