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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

nameTextStyle:{color:"#1e90ff",//設(shè)置x軸標(biāo)題與周圍元素的距離

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

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

nameRotate:90,【代碼編寫】【任務(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],【代碼編寫】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

show:true,lineStyle:{color:'#fff',width:1,type:'solid',},},【代碼編寫】【任務(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月"]},【代碼編寫】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

//配置y軸

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

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

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

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

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

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

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

nameTextStyle:{color:"#1e90ff",//設(shè)置y軸標(biāo)題與周圍元素的距離

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

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

nameRotate:0,【代碼編寫】【任務(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],【代碼編寫】【任務(wù)2-2】繪制ECharts柱狀圖并設(shè)置多樣的屬性

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

//配置系列，系列類型通過type控制

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

name: