Web數(shù)據(jù)可視化教程（基于ECharts）Web數(shù)據(jù)可視化教程（基于ECharts）Web數(shù)據(jù)可視化教程（基于ECharts）【訓(xùn)練9-4】的對應(yīng)代碼Web數(shù)據(jù)可視化教程（基于ECharts）option={series:[{type:'scatter',data:[[0,0]],symbolSize:1,label:{show:true,//在文本中，可以對部分文本采用rich中定義樣式。//這里需要在文本中使用標(biāo)記符號：//`{styleName|textcontenttextcontent}`標(biāo)記樣式名。//注意，換行仍是使用'\n'。formatter:['{a|這段文本采用樣式a}','{b|這段文本采用樣式b，}這段文本采用默認(rèn)樣式，{x|這段文本采用樣式x}'].join('\n'),backgroundColor:'#eee',borderColor:'#333',borderWidth:3,borderRadius:5,padding:10,color:'#333',fontSize:14,fontFamily:'Arial',padding:[15,10,10,5],lineHeight:30,rich:{a:{color:'red',lineHeight:10},b:{color:'#339911',height:40},x:{fontSize:18,fontFamily:'MicrosoftYaHei',color:'blue',borderColor:'#449933',borderRadius:4}}}}],xAxis:{axisLabel:{show:false},axisLine:{show:false},splitLine:{show:false},axisTick:{show:false},min:-1,max:1},yAxis:{axisLabel:{show:false},axisLine:{show:false},splitLine:{show:false},axisTick:{show:false},min:-1,max:1}};Web數(shù)據(jù)可視化教程（基于ECharts）【訓(xùn)練9-5】的對應(yīng)代碼Web數(shù)據(jù)可視化教程（基于ECharts）option={series:[{type:'scatter',symbolSize:1,data:[{value:[0,0],label:{show:true,formatter:['Plaintext','{textBorder|textBorderColor+textBorderWidth}','{textShadow|textShadowColor+textShadowBlur+textShadowOffsetX+textShadowOffsetY}','{bg|backgroundColor+borderRadius+padding}','{border|borderColor+borderWidth+borderRadius+padding}','{shadow|shadowColor+shadowBlur+shadowOffsetX+shadowOffsetY}'].join('\n'),backgroundColor:'#eee',borderColor:'#333',borderWidth:2,borderRadius:5,padding:10,color:'#000',fontSize:14,shadowBlur:3,shadowColor:'#888',shadowOffsetX:0,shadowOffsetY:3,lineHeight:30,rich:{textBorder:{fontSize:20,textBorderColor:'#000',textBorderWidth:3,color:'#fff'},textShadow:{fontSize:16,textShadowBlur:5,textShadowColor:'#000',textShadowOffsetX:3,textShadowOffsetY:3,color:'#fff'},bg:{backgroundColor:'#339911',color:'#fff',borderRadius:15,padding:5},border:{color:'#000',borderColor:'#449911',borderWidth:1,borderRadius:3,padding:5},shadow:{backgroundColor:'#992233',padding:5,color:'#fff',shadowBlur:5,shadowColor:'#336699',shadowOffsetX:6,shadowOffsetY:6}}}}]}],xAxis:{show:false,min:-1,max:1},yAxis:{show:false,min:-1,max:1}};Web數(shù)據(jù)可視化教程（基于ECharts）【任務(wù)9-2】的對應(yīng)代碼Web數(shù)據(jù)可視化教程（基于ECharts）<scripttype="text/javascript">vardom=document.getElementById('main');varmyChart=echarts.init(dom,null,{renderer:'canvas',useDirtyRect:false});varapp={};varROOT_PATH='image/';varoption;constweatherIcons={Sunny:ROOT_PATH+'sunny_128.png',Cloudy:ROOT_PATH+'cloudy_128.png',Showers:ROOT_PATH+'showers_128.png'};option={title:{text:'天氣數(shù)據(jù)統(tǒng)計',subtext:'虛擬數(shù)據(jù)',left:'center'},tooltip:{trigger:'item',formatter:'{a}<br/>:{c}(13migoz%)'},legend:{bottom:10,left:'center',data:['區(qū)域A','區(qū)域B','區(qū)域D','區(qū)域C','區(qū)域E']},series:[{type:'pie',radius:'65%',center:['50%','50%'],selectedMode:'single',data:[{value:1548,name:'區(qū)域E',label:{formatter:['{title|}{abg|}','{weatherHead|天氣狀況}{valueHead|天數(shù)}{rateHead|百分比}','{hr|}','{Sunny|}{value|202}{rate|55.3%}','{Cloudy|}{value|142}{rate|38.9%}','{Showers|}{value|21}{rate|5.8%}'].join('\n'),backgroundColor:'#eee',borderColor:'#777',borderWidth:1,borderRadius:4,rich:{title:{color:'#eee',align:'center'},abg:{backgroundColor:'#333',width:'100%',align:'right',height:25,borderRadius:[4,4,0,0]},Sunny:{height:30,align:'left',backgroundColor:{image:weatherIcons.Sunny}},Cloudy:{height:30,align:'left',backgroundColor:{image:weatherIcons.Cloudy}},Showers:{height:30,align:'left',backgroundColor:{image:weatherIcons.Showers}},weatherHead:{color:'#333',height:24,align:'left'},hr:{borderColor:'#777',width:'100%',borderWidth:0.5,height:0},value:{width:20,padding:[0,20,0,30],align:'left'},valueHead:{color:'#333',width:20,padding:[0,20,0,30],align:'center'},rate:{width:40,align:'right',padding:[0,10,0,0]},rateHead:{color:'#333',width:40,align:'center',padding:[0,10,0,0]}}}},{value:735,name:'區(qū)域C'},{value:510,name:'區(qū)域D'},{value:434,name:'區(qū)域B'},{value:335,name:'區(qū)域A'}],emphasis:{itemStyle:{shadowBlur:10,shadowOffsetX:0,shadowColor:'rgba(0,0,0,0.5)'}}}]};if(option&&typeofoption==='object'){myChart.setOption(option);}window.addEventListener('resize',myChart.resize);</script>Web數(shù)據(jù)可視化教程（基于ECharts）【任務(wù)9-3】的對應(yīng)代碼Web數(shù)據(jù)可視化教程（基于ECharts）constsymbolSize=20;constdata=[[40,-10],[-30,-5],[-76.5,20],[-63.5,40],[-22.1,50]];option={title:{text:'嘗試拖動這些點',left:'center'},tooltip:{triggerOn:'none',formatter:function(params){return('X:'+params.data[0].toFixed(2)+'<br>Y:'+params.data[1].toFixed(2));}},grid:{top:'8%',bottom:'12%'},xAxis:{min:-100,max:70,type:'value',axisLine:{onZero:false}},yAxis:{min:-30,max:60,type:'value',axisLine:{onZero:false}},dataZoom:[{type:'slider',xAxisIndex:0,filterMode:'none'},{type:'slider',yAxisIndex:0,filterMode:'none'},{type:'inside',xAxisIndex:0,filterMode:'none'},{type:'inside',yAxisIndex:0,filterMode:'none'}],series:[{id:'a',type:'line',smooth:true,symbolSize:symbolSize,data:data}]};setTimeout(function(){//Addshadowcircles(whichisnotvisible)toenabledrag.myChart.setOption({graphic:data.map(function(item,dataIndex){return{type:'circle',position:myChart.convertToPixel('grid',item),shape:{cx:0,cy:0,r:symbolSize/2},invi