Web數(shù)據(jù)可視化教程（基于ECharts）模塊2熟知ECharts的圖表結(jié)構(gòu)與基本組件【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性（1）啟動(dòng)Dreamweaver，創(chuàng)建網(wǎng)頁(yè)task0202.html，將該文件保存到本模塊文件夾Unit02中。（2）在網(wǎng)頁(yè)task0202.html中繪制ECharts柱狀圖，并進(jìn)行必要的屬性設(shè)置?！救蝿?wù)描述】【代碼編寫(xiě)】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性設(shè)置圖表的配置項(xiàng)和數(shù)據(jù)的代碼如下：option={backgroundColor:'#D3D3D3',//配置標(biāo)題組件，包含主標(biāo)題和副標(biāo)題

title:{text:'柱狀圖',//設(shè)置主標(biāo)題樣式

textStyle:{color:'#fff'},subtext:'12個(gè)月的銷(xiāo)售量',【代碼編寫(xiě)】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

//設(shè)置副標(biāo)題樣式

subtextStyle:{color:'#fff'},//設(shè)置標(biāo)題位置，用padding屬性來(lái)定位

padding:[10,0,0,50]},

【代碼編寫(xiě)】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性//配置圖例組件

legend:{//設(shè)置圖例類(lèi)型，默認(rèn)為'plain'，當(dāng)圖例很多時(shí)可使用'scroll'type:'plain',//設(shè)置圖例相對(duì)容器的位置，可使用top、bottom、left、righttop:'1%',//設(shè)置圖例是否顯示，默認(rèn)為trueselected:{'銷(xiāo)量':true,},【代碼編寫(xiě)】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

//設(shè)置圖例內(nèi)容樣式

textStyle:{//設(shè)置所有圖例的字體顏色

color:'#fff',//設(shè)置所有圖例的字體背景色

//backgroundColor:'black',},//設(shè)置圖例的顏色標(biāo)簽，默認(rèn)不顯示

tooltip:{show:true,color:'#1e90ff',},【代碼編寫(xiě)】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性//設(shè)置圖例內(nèi)容

data:[{name:'銷(xiāo)量',//設(shè)置圖例的外框樣式

icon:'circle',textStyle:{//單獨(dú)設(shè)置某一個(gè)圖例的顏色

color:'#000080',//單獨(dú)設(shè)置某一個(gè)圖例的字體背景色

//backgroundColor:'black',}}],},【代碼編寫(xiě)】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性//配置提示框組件

tooltip:{//設(shè)置是否顯示提示框，默認(rèn)顯示

show:true,//設(shè)置數(shù)據(jù)項(xiàng)圖形觸發(fā)

trigger:'item',axisPointer:{//設(shè)置指示樣式

type:'shadow',axis:'auto',},padding:5,//設(shè)置提示框內(nèi)容樣式

textStyle:{color:"#fff",},},【代碼編寫(xiě)】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性//配置grid區(qū)域

grid:{//設(shè)置相對(duì)位置

top:80,left:'3%',right:'4%',bottom:'3%',//設(shè)置是否顯示直角坐標(biāo)系網(wǎng)格

show:false,//設(shè)置grid區(qū)域是否包含坐標(biāo)軸的刻度標(biāo)簽

containLabel:true,【代碼編寫(xiě)】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性tooltip:{//鼠標(biāo)指針?lè)旁趫D形上，顯示提示框

show:true,//設(shè)置觸發(fā)類(lèi)型

trigger:'item',textStyle:{//設(shè)置提示框文字的顏色

color:'#666',}}},【代碼編寫(xiě)】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性//配置x軸

xAxis:{//設(shè)置x軸是否顯示

show:true,//設(shè)置x軸位置

position:'bottom',//設(shè)置x軸相對(duì)于默認(rèn)位置的偏移

offset:0,//設(shè)置x軸類(lèi)型，默認(rèn)為'category'type:'category',//設(shè)置x軸標(biāo)題

name:'月份',【代碼編寫(xiě)】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

//設(shè)置x軸標(biāo)題相對(duì)位置

nameLocation:'end',//設(shè)置x軸標(biāo)題樣式

nameTextStyle:{color:"#1e90ff",//設(shè)置x軸標(biāo)題與周?chē)氐木嚯x

padding:[5,0,0,-5],},//設(shè)置x軸標(biāo)題與軸線的距離

nameGap:5,//設(shè)置x軸標(biāo)題的旋轉(zhuǎn)角度

nameRotate:90,【代碼編寫(xiě)】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

//設(shè)置x軸線

axisLine:{//設(shè)置x軸線是否顯示

show:true,//設(shè)置是否顯示x軸線箭頭

symbol:['none','arrow'],//設(shè)置x軸線箭頭大小

symbolSize:[8,8],//設(shè)置x軸線箭頭位置

symbolOffset:[0,8],【代碼編寫(xiě)】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

//設(shè)置x軸線樣式

lineStyle:{//設(shè)置x軸線的顏色

color:'#fff',//設(shè)置x軸線的寬度

width:1,//設(shè)置x軸線的類(lèi)型

type:'solid',},},【代碼編寫(xiě)】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

//設(shè)置x軸刻度

axisTick:{//設(shè)置x軸刻度是否顯示

show:true,//設(shè)置x軸刻度是否朝內(nèi)

inside:true,//設(shè)置x軸刻度的長(zhǎng)度

lengt:3,【代碼編寫(xiě)】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

lineStyle:{//設(shè)置x軸刻度的顏色，默認(rèn)為軸線的顏色

color:'#fff',//設(shè)置x軸刻度的寬度

width:1,//設(shè)置x軸刻度的類(lèi)型

type:'solid',},},【代碼編寫(xiě)】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

//設(shè)置x軸刻度標(biāo)簽

axisLabel:{//設(shè)置x軸刻度標(biāo)簽是否顯示

show:true,//設(shè)置x軸刻度標(biāo)簽是否朝內(nèi)

inside:false,//設(shè)置x軸刻度標(biāo)簽的旋轉(zhuǎn)角度

rotate:0,//設(shè)置x軸刻度標(biāo)簽與軸線的距離

margin:10,//設(shè)置x軸刻度標(biāo)簽的顏色，默認(rèn)為軸線的顏色

color:'#1e90ff',},【代碼編寫(xiě)】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

//設(shè)置grid區(qū)域中的分隔線

splitLine:{//設(shè)置grid區(qū)域中的分隔線是否顯示

show:true,lineStyle:{color:'#fff',width:1,type:'solid',},},【代碼編寫(xiě)】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

//設(shè)置網(wǎng)格區(qū)域

splitArea:{//設(shè)置網(wǎng)格區(qū)域是否顯示，默認(rèn)不顯示

show:true,},data:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]},【代碼編寫(xiě)】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

//配置y軸

yAxis:{//設(shè)置y軸是否顯示

show:true,//設(shè)置y軸位置

position:'left',//設(shè)置y軸相對(duì)于默認(rèn)位置的偏移

offset:0,//設(shè)置y軸類(lèi)型，默認(rèn)為'category'type:'value',//設(shè)置y軸標(biāo)題

name:'銷(xiāo)量',【代碼編寫(xiě)】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

//設(shè)置y軸標(biāo)題相對(duì)位置

nameLocation:'end',//設(shè)置y軸標(biāo)題樣式

nameTextStyle:{color:"#1e90ff",//設(shè)置y軸標(biāo)題與周?chē)氐木嚯x

padding:[5,0,0,0],},//設(shè)置y軸標(biāo)題與軸線的距離

nameGap:10,//設(shè)置y軸標(biāo)題的旋轉(zhuǎn)角度

nameRotate:0,【代碼編寫(xiě)】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

//設(shè)置y軸線

axisLine:{//設(shè)置y軸線是否顯示

show:true,//------設(shè)置箭頭-------//設(shè)置是否顯示y軸線箭頭

symbol:['none','arrow'],//設(shè)置y軸線箭頭大小

symbolSize:[8,8],//設(shè)置y軸線箭頭位置

symbolOffset:[0,8],【代碼編寫(xiě)】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

//設(shè)置y軸線樣式

lineStyle:{color:'#fff',width:1,type:'solid',},},【代碼編寫(xiě)】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

//設(shè)置y軸刻度

axisTick:{//設(shè)置y軸刻度是否顯示

show:true,//設(shè)置y軸刻度是否朝內(nèi)

inside:true,//設(shè)置y軸刻度的長(zhǎng)度

length:3,//設(shè)置y軸刻度的樣式

lineStyle:{color:'fff',width:1,type:'solid',},},【代碼編寫(xiě)】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

//設(shè)置y軸刻度標(biāo)簽

axisLabel:{//設(shè)置y軸刻度標(biāo)簽是否顯示

show:true,//設(shè)置y軸刻度標(biāo)簽是否朝內(nèi)

inside:false,//設(shè)置y軸刻度標(biāo)簽的旋轉(zhuǎn)角度

rotate:0,//設(shè)置y軸刻度標(biāo)簽與軸線的距離

margin:8,//設(shè)置y軸刻度標(biāo)簽的顏色，默認(rèn)為軸線的顏色

color:'#1e90ff',},【代碼編寫(xiě)】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

//設(shè)置grid區(qū)域中的分隔線

splitLine:{//設(shè)置grid區(qū)域中的分隔線是否顯示

show:true,lineStyle:{color:'#666',width:1,//設(shè)置分隔線的類(lèi)型

type:'dashed',},},【代碼編寫(xiě)】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

//設(shè)置網(wǎng)格區(qū)域

splitArea:{//設(shè)置網(wǎng)格區(qū)域是否顯示，默認(rèn)不顯示

show:true,},},【代碼編寫(xiě)】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

//配置系列，系列類(lèi)型通過(guò)type控制

series:[{//設(shè)置系列名稱(chēng)

name:'銷(xiāo)量',//設(shè)置系列類(lèi)型

type:'bar',//設(shè)置系列是否啟用圖例hover時(shí)的聯(lián)動(dòng)高亮

legendHoverLink:true,【代碼編寫(xiě)】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

//設(shè)置圖形上的文本標(biāo)簽

label:{show:true,//設(shè)置相對(duì)位置

position:'insideTop',//設(shè)置旋轉(zhuǎn)角度

rotate:0,color:'#eee',},【代碼編寫(xiě)】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

//設(shè)置圖形的樣式

itemStyle:{//設(shè)置矩形條的顏色

color:'#87CEFA',barBorderRadius:[18,18,0,0],},【代碼編寫(xiě)】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

//設(shè)置矩形條的寬度

barWidth:'20',//設(shè)置矩形條的間距

barCategoryGap:'20%',data:[32,48,36,65,43,62,50,72,45,67,80,52]}]};【圖表展示】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性任務(wù)2-2對(duì)應(yīng)的柱狀圖如圖2-20所示。在瀏覽器中瀏覽對(duì)應(yīng)的柱狀圖。圖2-20任務(wù)2-2對(duì)應(yīng)的柱狀圖快樂(lè)學(xué)習(xí)高效學(xué)習(xí)祝學(xué)習(xí)進(jìn)步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊2熟知ECharts的圖表結(jié)構(gòu)與基本組件【任務(wù)2-3】繪制ECharts柱狀圖和平滑折線圖某城市在某年度1月至12月的降水量分別為6.0ml、32.0ml、70.0ml、86.0ml、68.7ml、100.7ml、125.6ml、112.2ml、78.7ml、48.8ml、36.0ml、19.3ml，平均氣溫分別為6.0℃、10.2℃、10.3℃、11.5℃、10.3℃、13.2℃、14.3℃、16.4℃、18.0℃、16.5℃、12.0℃、5.2℃?！救蝿?wù)描述】【任務(wù)2-3】繪制ECharts柱狀圖和平滑折線圖啟動(dòng)Dreamweaver，創(chuàng)建網(wǎng)頁(yè)task0203.html，將該文件保存到本模塊文件夾Unit02中，在該網(wǎng)頁(yè)中繪制ECharts柱狀圖和平滑折線圖，反映平均氣溫和降水量之間的趨勢(shì)關(guān)系?！救蝿?wù)描述】【代碼編寫(xiě)】【任務(wù)2-3】繪制ECharts柱狀圖和平滑折線圖設(shè)置圖表的配置項(xiàng)和數(shù)據(jù)的代碼如下：option={tooltip:{trigger:'axis',axisPointer:{type:'cross'}},legend:{},【代碼編寫(xiě)】【任務(wù)2-3】繪制ECharts柱狀圖和平滑折線圖xAxis:[{type:'category',axisTick:{alignWithLabel:true},data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']}],【代碼編寫(xiě)】【任務(wù)2-3】繪制ECharts柱狀圖和平滑折線圖yAxis:[{type:'value',name:'降水量',min:0,max:250,position:'right',axisLabel:{formatter:'{value}ml'}},【代碼編寫(xiě)】【任務(wù)2-3】繪制ECharts柱狀圖和平滑折線圖{type:'value',name:'溫度',min:0,max:25,position:'left',axisLabel:{formatter:'{value}℃'}}],【代碼編寫(xiě)】【任務(wù)2-3】繪制ECharts柱狀圖和平滑折線圖series:[{name:'降水量',type:'bar',yAxisIndex:0,data:[6.0,32.0,70.0,86.0,68.7,100.7,125.6,112.2,78.7,48.8,36.0,19.3]},【代碼編寫(xiě)】【任務(wù)2-3】繪制ECharts柱狀圖和平滑折線圖{name:'溫度',type:'line',smooth:true,yAxisIndex:1,data:[6.0,10.2,10.3,11.5,10.3,13.2,14.3,16.4,18.0,16.5,12.0,5.2]}]};【圖表展示】【任務(wù)2-3】繪制ECharts柱狀圖和平滑折線圖任務(wù)2-3對(duì)應(yīng)的柱狀圖和平滑折線圖如圖2-21所示。在瀏覽器中瀏覽對(duì)應(yīng)的柱狀圖。圖2-21中左側(cè)的y軸表示月平均氣溫，右側(cè)的y軸表示月降水量，x軸表示時(shí)間。圖2-21中左側(cè)的y軸表示月平均氣溫，右側(cè)的y軸表示月降水量，x軸表示時(shí)間?？鞓?lè)學(xué)習(xí)高效學(xué)習(xí)祝學(xué)習(xí)進(jìn)步！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)的代碼。【圖表展示】【任務(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】繪制條形圖對(duì)比部分省市的地區(qū)生產(chǎn)總值series:[{name:'2022',type:'bar',data:[41540.9,16132.2,44809.1,28576.1,129513.6,122089.3,78060.6,87576.9]},【代碼編寫(xiě)】【任務(wù)3-5】繪制條形圖對(duì)比部分省市的地區(qū)生產(chǎn)總值{name:'2023',type:'bar',data:[43760.7,16737.3,47218.7,30145.8,135673.2,128222.2,82553.2,92068.7]}]};【圖表展示】【任務(wù)3-5】繪制條形圖對(duì)比部分省市的地區(qū)生產(chǎn)總值任務(wù)3-5對(duì)應(yīng)的條形圖如圖3-18所示。在瀏覽器中瀏覽對(duì)應(yīng)的柱狀圖。圖3-18任務(wù)3-5對(duì)應(yīng)的條形圖快樂(lè)學(xué)習(xí)高效學(xué)習(xí)祝學(xué)習(xí)進(jìn)步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊3繪制ECharts柱狀圖和條形圖【任務(wù)3-6】繪制動(dòng)態(tài)柱狀圖與折線圖（1）啟動(dòng)Dreamweaver，創(chuàng)建網(wǎng)頁(yè)task0306.html，將該文件保存到本模塊文件夾Unit03中。（2）在網(wǎng)頁(yè)task0306.html中繪制動(dòng)態(tài)柱狀圖與折線圖，并進(jìn)行必要的屬性設(shè)置。【任務(wù)描述】【代碼編寫(xiě)】【任務(wù)3-6】繪制動(dòng)態(tài)柱狀圖與折線圖瀏覽電子活頁(yè)3-4中的內(nèi)容，熟悉任務(wù)3-6的對(duì)應(yīng)代碼。在Dreamweaver中編寫(xiě)對(duì)應(yīng)的代碼?！緢D表展示】【任務(wù)3-6】繪制動(dòng)態(tài)柱狀圖與折線圖任務(wù)3-6對(duì)應(yīng)的動(dòng)態(tài)柱狀圖與折線圖如圖3-19所示。在瀏覽器中瀏覽對(duì)應(yīng)的柱狀圖。圖3-19任務(wù)3-6對(duì)應(yīng)的動(dòng)態(tài)柱狀圖與折線圖快樂(lè)學(xué)習(xí)高效學(xué)習(xí)祝學(xué)習(xí)進(jìn)步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊4繪制ECharts折線圖【任務(wù)4-1】繪制銷(xiāo)量折線圖分析促銷(xiāo)措施對(duì)商品銷(xiāo)量的影響（1）啟動(dòng)Dreamweaver，創(chuàng)建網(wǎng)頁(yè)task0401.html，將該文件保存到本模塊文件夾Unit04中。（2）在網(wǎng)頁(yè)task0401.html中繪制銷(xiāo)量折線圖分析促銷(xiāo)措施對(duì)商品銷(xiāo)量的影響，并進(jìn)行必要的屬性設(shè)置?！救蝿?wù)描述】【代碼編寫(xiě)】【任務(wù)4-1】繪制銷(xiāo)量折線圖分析促銷(xiāo)措施對(duì)商品銷(xiāo)量的影響在Dreamweaver中創(chuàng)建網(wǎng)頁(yè)task0401.html，然后編寫(xiě)網(wǎng)頁(yè)task0401.html對(duì)應(yīng)的代碼?！緢D表展示】【任務(wù)4-1】繪制銷(xiāo)量折線圖分析促銷(xiāo)措施對(duì)商品銷(xiāo)量的影響任務(wù)4-1對(duì)應(yīng)的折線圖如圖4-10所示。在瀏覽器中瀏覽對(duì)應(yīng)的柱狀圖。圖4-10任務(wù)4-1對(duì)應(yīng)的折線圖快樂(lè)學(xué)習(xí)高效學(xué)習(xí)祝學(xué)習(xí)進(jìn)步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊4繪制ECharts折線圖【任務(wù)4-2】繪制城市一周氣溫變化的折線圖（1）啟動(dòng)Dreamweaver，創(chuàng)建網(wǎng)頁(yè)task0402.html，將該文件保存到本模塊文件夾Unit04中。（2）在網(wǎng)頁(yè)task0402.html中繪制城市一周氣溫變化的折線圖，并進(jìn)行必要的屬性設(shè)置。【任務(wù)描述】【代碼編寫(xiě)】【任務(wù)4-2】繪制城市一周氣溫變化的折線圖瀏覽電子活頁(yè)4-2中的內(nèi)容，熟悉任務(wù)4-2的對(duì)應(yīng)代碼。在Dreamweaver中編寫(xiě)對(duì)應(yīng)的代碼?！緢D表展示】【任務(wù)4-2】繪制城市一周氣溫變化的折線圖任務(wù)4-2對(duì)應(yīng)的折線圖如圖4-11所示。在瀏覽器中瀏覽對(duì)應(yīng)的柱狀圖。圖4-11任務(wù)4-2對(duì)應(yīng)的折線圖快樂(lè)學(xué)習(xí)高效學(xué)習(xí)祝學(xué)習(xí)進(jìn)步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊4繪制ECharts折線圖【任務(wù)4-3】繪制一天用電量分布圖（1）啟動(dòng)Dreamweave，創(chuàng)建網(wǎng)頁(yè)task0403.html，將該文件保存到本模塊文件夾Unit04中。（2）在網(wǎng)頁(yè)task0403.html中繪制一天用電量分布圖，并進(jìn)行必要的屬性設(shè)置。【任務(wù)描述】【代碼編寫(xiě)】【任務(wù)4-3】繪制一天用電量分布圖瀏覽電子活頁(yè)4-3中的內(nèi)容，熟悉任務(wù)4-3的對(duì)應(yīng)代碼。在Dreamweaver中編寫(xiě)對(duì)應(yīng)的代碼?！緢D表展示】【任務(wù)4-3】繪制一天用電量分布圖任務(wù)4-3對(duì)應(yīng)的折線圖如圖4-12所示。在瀏覽器中瀏覽對(duì)應(yīng)的柱狀圖。圖4-12任務(wù)4-3對(duì)應(yīng)的折線圖快樂(lè)學(xué)習(xí)高效學(xué)習(xí)祝學(xué)習(xí)進(jìn)步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊4繪制ECharts折線圖【任務(wù)4-4】繪制長(zhǎng)沙市空氣質(zhì)量指數(shù)變化折線圖（1）啟動(dòng)Dreamweaver，創(chuàng)建網(wǎng)頁(yè)task0404.html，將該文件保存到本模塊文件夾Unit04中。（2）在網(wǎng)頁(yè)task0404.html中繪制長(zhǎng)沙市空氣質(zhì)量指數(shù)變化折線圖對(duì)比分析10月15天的空氣質(zhì)量指數(shù)變化，并進(jìn)行必要的屬性設(shè)置。【任務(wù)描述】【代碼編寫(xiě)】【任務(wù)4-4】繪制長(zhǎng)沙市空氣質(zhì)量指數(shù)變化折線圖在Dreamweaver中創(chuàng)建網(wǎng)頁(yè)task0404.html，然后編寫(xiě)網(wǎng)頁(yè)task0404.html對(duì)應(yīng)的代碼?！緢D表展示】【任務(wù)4-4】繪制長(zhǎng)沙市空氣質(zhì)量指數(shù)變化折線圖任務(wù)4-4對(duì)應(yīng)的折線圖如圖4-13所示。在瀏覽器中瀏覽對(duì)應(yīng)的折線圖。圖4-13任務(wù)4-4對(duì)應(yīng)的折線圖快樂(lè)學(xué)習(xí)高效學(xué)習(xí)祝學(xué)習(xí)進(jìn)步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊4繪制ECharts折線圖【任務(wù)4-5】繪制函數(shù)圖形（1）啟動(dòng)Dreamweaver，創(chuàng)建網(wǎng)頁(yè)task0405.html，將該文件保存到本模塊文件夾Unit04中。（2）在網(wǎng)頁(yè)task0405.html中繪制函數(shù)圖形，并進(jìn)行必要的屬性設(shè)置。【任務(wù)描述】【代碼編寫(xiě)】【任務(wù)4-5】繪制函數(shù)圖形瀏覽電子活頁(yè)4-4中的內(nèi)容，熟悉任務(wù)4-5的對(duì)應(yīng)代碼。在Dreamweaver中編寫(xiě)對(duì)應(yīng)的代碼?！緢D表展示】【任務(wù)4-5】繪制函數(shù)圖形任務(wù)4-5對(duì)應(yīng)的函數(shù)圖形如圖4-14所示。在瀏覽器中瀏覽對(duì)應(yīng)的函數(shù)圖形。圖4-14任務(wù)4-5對(duì)應(yīng)的函數(shù)圖形快樂(lè)學(xué)習(xí)高效學(xué)習(xí)祝學(xué)習(xí)進(jìn)步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊5繪制ECharts餅圖【任務(wù)5-1】繪制包含扇區(qū)間隙的餅圖（1）啟動(dòng)Dreamweaver，創(chuàng)建網(wǎng)頁(yè)task0501.html，將該文件保存到本模塊文件夾Unit05中。（2）在網(wǎng)頁(yè)task0501.html中繪制包含扇區(qū)間隙的餅圖分析不同訪問(wèn)途徑對(duì)廣告效果的影響，并進(jìn)行必要的屬性設(shè)置?！救蝿?wù)描述】【代碼編寫(xiě)】【任務(wù)5-1】繪制包含扇區(qū)間隙的餅圖在Dreamweaver中創(chuàng)建網(wǎng)頁(yè)task0501.html，然后編寫(xiě)網(wǎng)頁(yè)task0501.html對(duì)應(yīng)的代碼。【圖表展示】【任務(wù)5-1】繪制包含扇區(qū)間隙的餅圖任務(wù)5-1對(duì)應(yīng)的包含扇區(qū)間隙的餅圖如圖5-6所示。在瀏覽器中瀏覽對(duì)應(yīng)的餅圖。圖5-6任務(wù)5-1對(duì)應(yīng)的包含扇區(qū)間隙的餅圖快樂(lè)學(xué)習(xí)高效學(xué)習(xí)祝學(xué)習(xí)進(jìn)步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊5繪制ECharts餅圖【任務(wù)5-2】繪制南丁格爾玫瑰圖（1）啟動(dòng)Dreamweaver，創(chuàng)建網(wǎng)頁(yè)task0502.html，將該文件保存到本模塊文件夾Unit05中。（2）在網(wǎng)頁(yè)task0502.html中繪制南丁格爾玫瑰圖分析不同訪問(wèn)途徑對(duì)廣告效果的影響，并進(jìn)行必要的屬性設(shè)置。【任務(wù)描述】【代碼編寫(xiě)】【任務(wù)5-2】繪制南丁格爾玫瑰圖在Dreamweaver中創(chuàng)建網(wǎng)頁(yè)task0502.html，然后編寫(xiě)網(wǎng)頁(yè)task0502.html對(duì)應(yīng)的代碼。【圖表展示】【任務(wù)5-2】繪制南丁格爾玫瑰圖任務(wù)5-2對(duì)應(yīng)的南丁格爾玫瑰圖如圖5-7所示。在瀏覽器中瀏覽對(duì)應(yīng)的南丁格爾玫瑰圖。圖5-7任務(wù)5-2對(duì)應(yīng)的南丁格爾玫瑰圖快樂(lè)學(xué)習(xí)高效學(xué)習(xí)祝學(xué)習(xí)進(jìn)步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊5繪制ECharts餅圖【任務(wù)5-3】繪制嵌套環(huán)形圖分析不同訪問(wèn)途徑對(duì)廣告效果的影響（1）啟動(dòng)Dreamweaver，創(chuàng)建網(wǎng)頁(yè)task0503.html，將該文件保存到本模塊文件夾Unit05中。（2）在網(wǎng)頁(yè)task0503.html中繪制嵌套環(huán)形圖分析不同訪問(wèn)途徑對(duì)廣告效果的影響，并進(jìn)行必要的屬性設(shè)置。【任務(wù)描述】【代碼編寫(xiě)】【任務(wù)5-3】繪制嵌套環(huán)形圖分析不同訪問(wèn)途徑對(duì)廣告效果的影響瀏覽電子活頁(yè)5-2中的內(nèi)容，熟悉任務(wù)5-3的對(duì)應(yīng)代碼。在Dreamweaver中編寫(xiě)對(duì)應(yīng)的代碼。【圖表展示】【任務(wù)5-3】繪制嵌套環(huán)形圖分析不同訪問(wèn)途徑對(duì)廣告效果的影響任務(wù)5-3對(duì)應(yīng)的嵌套環(huán)形圖如圖5-8所示。在瀏覽器中瀏覽對(duì)應(yīng)的嵌套環(huán)形圖。圖5-8任務(wù)5-3對(duì)應(yīng)的嵌套環(huán)形圖快樂(lè)學(xué)習(xí)高效學(xué)習(xí)祝學(xué)習(xí)進(jìn)步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊6繪制ECharts散點(diǎn)圖和氣泡圖【任務(wù)6-1】繪制男性和女性身高、體重分布圖（1）啟動(dòng)Dreamweaver，創(chuàng)建網(wǎng)頁(yè)task0601.html，將該文件保存到本模塊文件夾Unit06中。（2）在網(wǎng)頁(yè)task0601.html中繪制男性和女性身高、體重分布圖，并進(jìn)行必要的屬性設(shè)置。【任務(wù)描述】【代碼編寫(xiě)】【任務(wù)6-1】繪制男性和女性身高、體重分布圖在Dreamweaver中創(chuàng)建網(wǎng)頁(yè)task0601.html，然后編寫(xiě)網(wǎng)頁(yè)ttask0601.html對(duì)應(yīng)的代碼?！緢D表展示】【任務(wù)6-1】繪制男性和女性身高、體重分布圖任務(wù)6-1對(duì)應(yīng)的散點(diǎn)圖如圖6-5所示。在瀏覽器中瀏覽對(duì)應(yīng)的散點(diǎn)圖。圖6-5任務(wù)6-1對(duì)應(yīng)的散點(diǎn)圖快樂(lè)學(xué)習(xí)高效學(xué)習(xí)祝學(xué)習(xí)進(jìn)步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊6繪制ECharts散點(diǎn)圖和氣泡圖【任務(wù)6-2】繪制城市AQI氣泡圖（1）啟動(dòng)Dreamweaver，創(chuàng)建網(wǎng)頁(yè)task0602.html，將該文件保存到本模塊文件夾Unit06中。（2）在網(wǎng)頁(yè)task0602.html中繪制城市AQI（空氣質(zhì)量指數(shù)）氣泡圖，并進(jìn)行必要的屬性設(shè)置?！救蝿?wù)描述】【代碼編寫(xiě)】【任務(wù)6-2】繪制城市AQI氣泡圖瀏覽電子活頁(yè)6-3中的內(nèi)容，熟悉任務(wù)6-2的對(duì)應(yīng)代碼。在Dreamweaver中編寫(xiě)對(duì)應(yīng)的代碼?！緢D表展示】【任務(wù)6-2】繪制城市AQI氣泡圖任務(wù)6-2對(duì)應(yīng)的氣泡圖如圖6-6所示。在瀏覽器中瀏覽對(duì)應(yīng)的氣泡圖。圖6-6任務(wù)6-2對(duì)應(yīng)的氣泡圖快樂(lè)學(xué)習(xí)高效學(xué)習(xí)祝學(xué)習(xí)進(jìn)步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊7繪制ECharts高級(jí)圖表【任務(wù)7-1】繪制城市AQI雷達(dá)圖（1）啟動(dòng)Dreamweaver，創(chuàng)建網(wǎng)頁(yè)task0701.html，將該文件保存到本模塊文件夾Unit07中。（2）在網(wǎng)頁(yè)task0701.html中繪制城市AQI雷達(dá)圖，并進(jìn)行必要的屬性設(shè)置?！救蝿?wù)描述】【代碼編寫(xiě)】【任務(wù)7-1】繪制城市AQI雷達(dá)圖瀏覽電子活頁(yè)7-2中的內(nèi)容，熟悉任務(wù)7-1的對(duì)應(yīng)代碼。在Dreamweaver中編寫(xiě)對(duì)應(yīng)的代碼?！緢D表展示】【任務(wù)7-1】繪制城市AQI雷達(dá)圖任務(wù)7-1對(duì)的雷達(dá)圖如圖7-7所示。在瀏覽器中瀏覽對(duì)應(yīng)的雷達(dá)圖。圖7-7任務(wù)7-1對(duì)應(yīng)的雷達(dá)圖快樂(lè)學(xué)習(xí)高效學(xué)習(xí)祝學(xué)習(xí)進(jìn)步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊7繪制ECharts高級(jí)圖表【任務(wù)7-2】繪制某城市一年氣溫變化盒須圖（1）啟動(dòng)Dreamweaver，創(chuàng)建網(wǎng)頁(yè)task0702.html，將該文件保存到本模塊文件夾Unit07中。（2）在網(wǎng)頁(yè)task0702.html中繪制某城市一年氣溫變化盒須圖，并進(jìn)行必要的屬性設(shè)置。【任務(wù)描述】【代碼編寫(xiě)】【任務(wù)7-2】繪制某城市一年氣溫變化盒須圖在Dreamweaver中創(chuàng)建網(wǎng)頁(yè)task0702.html，然后編寫(xiě)網(wǎng)頁(yè)task0702.html對(duì)應(yīng)的代碼?！緢D表展示】【任務(wù)7-2】繪制某城市一年氣溫變化盒須圖任務(wù)7-2對(duì)應(yīng)的盒須圖如圖7-8所示。在瀏覽器中瀏覽對(duì)應(yīng)的盒須圖。圖7-8任務(wù)7-2對(duì)應(yīng)的盒須圖快樂(lè)學(xué)習(xí)高效學(xué)習(xí)祝學(xué)習(xí)進(jìn)步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊7繪制ECharts高級(jí)圖表【任務(wù)7-3】繪制日歷熱力圖（1）啟動(dòng)Dreamweaver，創(chuàng)建網(wǎng)頁(yè)task0703.html，將該文件保存到本模塊文件夾Unit07中。（2）在網(wǎng)頁(yè)task0703.html中繪制日歷熱力圖，并進(jìn)行必要的屬性設(shè)置?！救蝿?wù)描述】【代碼編寫(xiě)】【任務(wù)7-3】繪制日歷熱力圖在Dreamweaver中創(chuàng)建網(wǎng)頁(yè)task0703.html，然后編寫(xiě)網(wǎng)頁(yè)task0703.html對(duì)應(yīng)的代碼?！緢D表展示】【任務(wù)7-3】繪制日歷熱力圖任務(wù)7-3對(duì)應(yīng)的日歷熱力圖如圖7-9所示。在瀏覽器中瀏覽對(duì)應(yīng)的日歷熱力圖。圖7-9任務(wù)7-3對(duì)應(yīng)的日歷熱力圖快樂(lè)學(xué)習(xí)高效學(xué)習(xí)祝學(xué)習(xí)進(jìn)步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊7繪制ECharts高級(jí)圖表【任務(wù)7-4】繪制速度儀表盤(pán)（1）啟動(dòng)Dreamweaver，創(chuàng)建網(wǎng)頁(yè)task0704.html，將該文件保存到本模塊文件夾Unit07中。（2）在網(wǎng)頁(yè)task0704.html中繪制速度儀表盤(pán)，并進(jìn)行必要的屬性設(shè)置?！救蝿?wù)描述】【代碼編寫(xiě)】【任務(wù)7-4】繪制速度儀表盤(pán)在Dreamweaver中創(chuàng)建網(wǎng)頁(yè)task0704.html，然后編寫(xiě)網(wǎng)頁(yè)task0704.html對(duì)應(yīng)的代碼?！緢D表展示】【任務(wù)7-4】繪制速度儀表盤(pán)任務(wù)7-4對(duì)應(yīng)的儀表盤(pán)如圖7-10所示。在瀏覽器中瀏覽對(duì)應(yīng)的儀表盤(pán)。圖7-10任務(wù)7-4對(duì)應(yīng)的儀表盤(pán)快樂(lè)學(xué)習(xí)高效學(xué)習(xí)祝學(xué)習(xí)進(jìn)步！Web數(shù)據(jù)可視化教程（基于ECharts）模塊7繪制ECharts高級(jí)圖表【任務(wù)7-5】繪制項(xiàng)目完成率儀表盤(pán)（1）啟動(dòng)Dreamweaver，創(chuàng)建網(wǎng)頁(yè)task0705.html，將該文件保存到本模塊文件夾Unit07中。（2）在網(wǎng)頁(yè)task0705.html中繪制項(xiàng)目完成率儀表盤(pán)，并進(jìn)行必要的屬性設(shè)置。【任務(wù)描述】【代碼編寫(xiě)】【任務(wù)7-5】繪制項(xiàng)目完成率儀表盤(pán)在Dreamweaver中創(chuàng)建網(wǎng)頁(yè)ta