第三周总结
本周进行第一次代码任务：根据老师提供的sql表，将疫情信息进行数据可视化展示。由于实现这项功能需要ECharts，所以本周的学习重心在ECharts里，此外，HTML之间传值的话就需要使用ajax了，因为form提交需要另外开个页面，感觉很麻烦。舍友教给了我动态添加HTML元素的方法。以下是本周学习中几个印象较深的代码片段：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>查询日期</title> 6 <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> 7 <script src="js/echarts.js"></script> 8 </head> 9 <body> 10 日期:<input type="text" name="date"> 11 <button onclick="search()">查询</button> 12 <!--引用引入的echarts文件，这里我作了两个图，因此声明两个div --> 13 <div id="charts" style="width:1000px;height:800px;float:left"></div> 14 <div id="charts2" style="width:1000px;height:800px;float:left"></div> 15 <script type="text/javascript"> 16 <!--写点击事件--> 17 function search(){ 18 date=$("input[name=date]").val(); 19 <!--ajax传值主体，设置post，传值类型为json--> 20 $.ajax({ 21 type:"post", 22 url:"ChartServlet", 23 datatype:"json", 24 data:{"date":date}, 25 success:function(msg){ 26 var json=JSON.parse(msg); 27 var province=[]; 28 var confirmed=[]; 29 size=json.length; 30 <!--这里进行了动态添加table表格--> 31 tr="<tr><th>省份</th><th>确诊人数</th><th>治愈人数</th><th>死亡人数</th></tr>"; 32 $('.head').append(tr); 33 for(i=0;i<size;i++){ 34 $('.main').append("<tr></tr>"); 35 province.push(json[i].Province); 36 confirmed.push(json[i].Confirmed); 37 } 38 $('.main tr').each(function(i){ 39 $(this).append("<td>"+json[i].Province+"</td>"); 40 $(this).append("<td>"+json[i].Confirmed+"</td>"); 41 $(this).append("<td>"+json[i].Cured+"</td>"); 42 $(this).append("<td>"+json[i].Dead+"</td>"); 43 }) 44 45 var mychart=echarts.init(document.getElementById('charts')); 46 var mychart2=echarts.init(document.getElementById('charts2')); 47 <!--定义柱状图的格式--> 48 var option={ 49 title:{ 50 text:'各省疫情当日确诊人数情况' 51 }, 52 tooltip:{}, 53 legend:{ 54 data:['确诊人数'] 55 }, 56 xAxis:{ 57 axisLabel:{interval:0,rotate:30}, 58 data:province 59 }, 60 yAxis:{}, 61 series:[{ 62 name:'确诊人数', 63 type:'bar', 64 data:confirmed 65 }] 66 }; 67 <!--定义折线图的格式--> 68 var option2={ 69 title:{ 70 text:'各省疫情当日确诊人数情况' 71 }, 72 tooltip:{}, 73 legend:{ 74 data:['确诊人数'] 75 }, 76 xAxis:{ 77 axisLabel:{interval:0,rotate:30}, 78 data:province 79 }, 80 yAxis:{}, 81 series:[{ 82 name:'确诊人数', 83 type:'line', 84 data:confirmed 85 }] 86 }; 87 <!--调用--> 88 mychart.setOption(option); 89 mychart2.setOption(option2); 90 }, 91 error:function(){ 92 alert("请求失败"); 93 } 94 }); 95 } 96 </script> 97 <!--动态添加的表格格式 --> 98 <table border="2"> 99 <thead class="head"> 100 </thead> 101 <tbody class="main"></tbody> 102 </table> 103 </body> 104 </html>
这段代码里是我第一次使用ECharts和ajax。别人的ajax代码写得比较精练，我因为是初学，那些可省略的表头并没有省略，方便以后翻阅的时候能够明白写的是什么。由于ajax传过来的是json数据，因此在接受数据后要进行格式转换。在进行这步时我利用了谷歌浏览器的查看浏览器的console功能，来看看自己的参数是否成功传递过来。动态添加表格则是先声明了<thead>和<tbody>，再通过jQuery进行动态添加即可。
下面是地图的核心模块，需要导入地图文件china.js
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>第二阶段</title> 6 <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> 7 <script src="js/echarts.js"></script> 8 <script type="text/javascript" src="js/china.js"></script> 9 </head> 10 <body> 11 日期:<input type="text" name="date"> 12 <button onclick="search()">查询</button> 13 <div id="charts" style="width:1000px;height:1000px"></div> 14 <script type="text/javascript"> 15 function search(){ 16 date=$("input[name=date]").val(); 17 $.ajax({ 18 type:"post", 19 url:"ChartServlet", 20 datatype:"json", 21 data:{"date":date}, 22 success:function(msg){ 23 var json=JSON.parse(msg); 24 var mapdata=[]; 25 size=json.length; 26 <!--json数组数据写在mapdata里，最后赋给地图，value定义的是确诊人数数据，这也是染色参考标准--> 27 for(i=0;i<size;i++){ 28 mapdata.push({name:json[i].Province,value:json[i].Confirmed}); 29 } 30 var mychart=echarts.init(document.getElementById('charts')); 31 <!--中国地图已经引入，这里编写其他信息--> 32 var option={ 33 backgroundColor:'#ccc', 34 title:{ 35 text:'各省疫情当日确诊人数情况' 36 }, 37 <!--重写悬浮提示框，这样在鼠标指到某省时会显示更多详细数据--> 38 tooltip:{ 39 trigger:'item', 40 formatter:function(params){ 41 <!--由于写入mapdata时是按顺序写的，因此获取到下标后对应的json数组下标是一致的，直接显示其他数据即可--> 42 index=params.dataIndex; 43 res="<p>"+params.name+"</p><p>确诊人数:"+json[index].Confirmed 44 +"</p><p>疑似人数:"+json[index].Yisi 45 +"</p><p>治愈人数:"+json[index].Cured 46 +"</p><p>死亡人数:"+json[index].Dead+"</p>"; 47 return res; 48 } 49 }, 50 <!--定义染色，以及染色参考数据，这里是依次对应的--> 51 visualMap:{ 52 show:true, 53 x:'left', 54 y:'bottom', 55 splitList:[ 56 {start:10000}, 57 {start:5000,end:9999}, 58 {start:1000,end:4999}, 59 {start:1,end:999}, 60 ], 61 color:['#930000','#EA0000','#ff7575','#F9F900'] 62 }, 63 series:[{ 64 name:'确诊人数', 65 type:'map', 66 mapType:'china', 67 roam:false, 68 label:{ 69 normal:{ 70 show:true 71 }, 72 emphasis:{ 73 show:false 74 } 75 }, 76 <!--data赋值mapdata--> 77 data:mapdata 78 }] 79 }; 80 81 mychart.setOption(option); 82 }, 83 error:function(){ 84 alert("请求失败"); 85 } 86 }); 87 } 88 </script> 89 </body> 90 </html>
可以看到在构造上与上述的柱状图和折线图大体相同，都是声明元素，传入数据。这里要注意的是formatter重写提示框。
最后是地图下钻：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>第三阶段</title> 6 <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> 7 <script src="js/echarts.js"></script> 8 <script type="text/javascript" src="js/china.js"></script> 9 </head> 10 <body> 11 日期:<input type="text" name="date"> 12 <button onclick="search()">查询</button> 13 <div id="charts" style="width:1000px;height:1000px"></div> 14 <script type="text/javascript"> 15 function search(){ 16 date=$("input[name=date]").val(); 17 <!--这里是第一次请求，目的是显示第二阶段的中国地图全貌--> 18 $.ajax({ 19 type:"post", 20 url:"ChartServlet", 21 datatype:"json", 22 data:{"date":date}, 23 success:function(msg){ 24 var json=JSON.parse(msg); 25 var mapdata=[]; 26 var citydata=[]; 27 size=json.length; 28 for(i=0;i<size;i++){ 29 mapdata.push({name:json[i].Province,value:json[i].Confirmed}); 30 } 31 var mychart=echarts.init(document.getElementById('charts')); 32 <!--这里注册省份的地图，需要事先引入相应的json文件--> 33 var ThePro={ 34 '安徽':'mapjson/anhui.json', 35 '北京':'mapjson/beijing.json', 36 '重庆':'mapjson/chongqing.json', 37 '福建':'mapjson/fujian.json', 38 '甘肃':'mapjson/gansu.json', 39 '广东':'mapjson/guangdong.json', 40 '广西':'mapjson/guangxi.json', 41 '桂州':'mapjson/guizhou.json', 42 '海南':'mapjson/hainan.json', 43 '河北':'mapjson/hebei.json', 44 '黑龙江':'mapjson/heilongjiang.json', 45 '河南':'mapjson/henan.json', 46 '香港':'mapjson/hongkong.json', 47 '湖北':'mapjson/hubei.json', 48 '湖南':'mapjson/hunan.json', 49 '江苏':'mapjson/jiangsu.json', 50 '江西':'mapjson/jiangxi.json', 51 '吉林':'mapjson/jilin.json', 52 '辽宁':'mapjson/liaoning.json', 53 '澳门':'mapjson/macau.json', 54 '内蒙古':'mapjson/neimenggu.json', 55 '宁夏':'mapjson/ningxia.json', 56 '青海':'mapjson/qinghai.json', 57 '山西':'mapjson/shan1xi.json', 58 '陕西':'mapjson/shan3xi.json', 59 '山东':'mapjson/shandong.json', 60 '上海':'mapjson/shanghai.json', 61 '四川':'mapjson/sichuan.json', 62 '台湾':'mapjson/taiwan.json', 63 '新疆':'mapjson/xinjiang.json', 64 '西藏':'mapjson/xizang.json', 65 '云南':'mapjson/yunnan.json', 66 '浙江':'mapjson/zhejiang.json' 67 }; 68 <!--中国地图全貌的设置，与第二阶段一样--> 69 var option={ 70 backgroundColor:'#ccc', 71 title:{ 72 text:'各省疫情当日确诊人数情况' 73 }, 74 tooltip:{ 75 trigger:'item', 76 formatter:function(params){ 77 index=params.dataIndex; 78 res="<p>"+params.name+"</p><p>确诊人数:"+json[index].Confirmed 79 +"</p><p>疑似人数:"+json[index].Yisi 80 +"</p><p>治愈人数:"+json[index].Cured 81 +"</p><p>死亡人数:"+json[index].Dead+"</p>"; 82 return res; 83 } 84 }, 85 visualMap:{ 86 show:true, 87 x:'left', 88 y:'bottom', 89 splitList:[ 90 {start:10000}, 91 {start:5000,end:9999}, 92 {start:1000,end:4999}, 93 {start:1,end:999}, 94 ], 95 color:['#930000','#EA0000','#ff7575','#F9F900'] 96 }, 97 series:[{ 98 name:'确诊人数', 99 type:'map', 100 mapType:'china', 101 roam:false, 102 label:{ 103 normal:{ 104 show:true 105 }, 106 emphasis:{ 107 show:false 108 } 109 }, 110 data:mapdata 111 }], 112 }; 113 <!--增加点击事件--> 114 mychart.setOption(option,false); 115 mychart.on("click",chartClick); 116 function chartClick(param){ 117 <!--点击时获取所点击的省份名称--> 118 mychart.setOption(option,false); 119 var selectedPro=param.name; 120 if(!ThePro[selectedPro]){ 121 option.series.splice(1); 122 option.legend=null; 123 option.visualMap=null; 124 mychart.setOption(option,true); 125 return; 126 } 127 <!--第二次ajax请求，注意url的改变--> 128 $.ajax({ 129 type:"post", 130 url:"CityServlet", 131 datatype:"json", 132 data:{"dateC":date}, 133 success:function(msgC){ 134 console.log(msgC); 135 var jsonC=JSON.parse(msgC); 136 var citydata=[]; 137 sizeC=jsonC.length; 138 for(j=0;j<sizeC;j++){ 139 citydata.push({name:jsonC[j].City,value:jsonC[j].CityConfirmed}); 140 } 141 <!--根据点击省份的名称获取该省份的地图，随后进行相关界定--> 142 $.get(ThePro[selectedPro],function(geojson){ 143 echarts.registerMap(selectedPro,geojson); 144 option={ 145 backgroundColor:'#ccc', 146 title:{ 147 text:'河北省确诊人数情况' 148 }, 149 tooltip:{ 150 trigger:'item', 151 }, 152 <!--这里染色标准进行了改动，因为省内的确诊人数量级不同--> 153 visualMap:{ 154 show:true, 155 x:'left', 156 y:'bottom', 157 splitList:[ 158 {start:10}, 159 {start:7,end:9}, 160 {start:4,end:6}, 161 {start:1,end:3}, 162 ], 163 color:['#930000','#EA0000','#ff7575','#F9F900'] 164 }, 165 <!--注意mapType，这里selectedPro实际就是省份名称，String格式--> 166 series:[{ 167 name:'确诊人数', 168 type:'map', 169 mapType:selectedPro, 170 roam:false, 171 label:{ 172 normal:{ 173 show:true 174 }, 175 emphasis:{ 176 show:false 177 } 178 }, 179 data:citydata 180 }], 181 }; 182 mychart.setOption(option,true); 183 }) 184 }, 185 error:function(){ 186 alert("请求失败"); 187 } 188 }); 189 } 190 }, 191 error:function(){ 192 alert("请求失败"); 193 } 194 }); 195 196 } 197 </script> 198 </body> 199 </html>
这里要导入很多地域的json文件，手动构造地图，这样才能给每个板块施加点击事件，其他方法我还没有学会。结合老师给的文件信息，我只实现了河北省那一个地方的地图下钻。而且要注意，sql里的地名信息与画图不同，可能多了省或市，若对应不上数据是不会显示的。
以上就是本周学习内容。
