Echarts世界地图和网页表格数据交互联动
发布时间：2021-07-06 05:40:39 所属栏目：大数据 来源： https://www.cnblogs.com/rainb
导读：html布局： 1 div class ="column" 2 ="panel bl bar1" 3 ="panelFooter" / div 4 h2 世界疫情数据汇总查询 / 5 ="map-table" 6 table align ="center" style ="margin:3px" cellspacing ="7px" 7 form id ="find_value" 8 label font color ="#ff7f50" 输入
html布局： 1 <div class="column">
2 ="panel bl bar1" 3 ="panelFooter"></div 4 h2>世界疫情数据汇总查询</ 5 ="map-table">
6 table align="center" style="margin:3px" cellspacing="7px" 7 form id="find_value" 8 label><font color="#ff7f50">输入国家：font 9 input ="cname" type="text" name placeholder="" value=""10 type="button"="查询" onclick="find_res()"11 ="reset"="重置"12 form13 thead14 tr style="color: #FFB6C1"15 th>时间16 >国家17 >累计确诊18 >累计治愈19 >累计死亡20 >现存确诊21 >排名22 tr23 24 tbody ="bd_data"25 tbody26 table27 <!-- <div class="chart"></div>-->
28 <div class="panelFooter"></div>29 30 31 >
CSS布局： 1 th{
2 font-size: 14px;
3 }
4 td{
5 font-size: 12px;
6 background: rgba(176,196,222,0.4);
7 }
8 .map-table{
9 position: absolute;
10 margin: 20px 10px 10px 10px;
11 overflow:scroll;
12 height: 9.2rem;
13 }
14 .panel {
15 relative;
16 5rem;
17 /* width: 100%; */
18 border: 1px solid rgba(25,186,139,0.17);
19 rgba(21,25,101,0.5) url('../images/line(1).png');
20 padding: 0 0.1875rem 0.5rem;
21 margin-bottom: 0.3rem;
22 }
23
24 .panelFooter {
25 26 bottom: 0;
27 left:28 background-color: pink; 29 10px;
30 width: 100%;
31 }
32
33 .panelFooter::before {
34 35 top:36 要给内容 37 content: "";
38 39 40 41 border-bottom: 2px solid #02a6b5;
42 border-left:43 }
44
45 .panelFooter::after {
46 47 48 49 50 right:51 52 53 54 border-right:55 }
数据库查询代码：结果类型： [ { },{ } ] 1 def find_worldByName(c_name):
2 sql = " SELECT * FROM world WHERE c_name LIKE '%%%%%s%%%%' order by dt desc "%c_name
3 # sql_temp = " SELECT * FROM world WHERE c_name LIKE '"+c_name+"'"
4 res = query(sql)
5 list= []
6 for i in res:
7 print(i)
8 list.append(i)
9 return list;
爬取世界疫情数据（中国的数据已经另外爬取并和世界数据一起存入数据库）1 """ 2 获取全球疫情数据 3 4 get_world_data(): 5 爬取中国数据 6 china_url = 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5&callback=jQuery34102848205531413024_1584924641755&_=1584924641756' 7 china_headers = { 8 user-agent': Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML,like Gecko) Chrome/70.0.3538.25 Safari/537.36 Core/1.70.3741.400 QQBrowser/10.5.3863.400 9 } 10 res = requests.get(china_url,headers=china_headers) 11 输出全部信息 12 print(res.text) 13 china_response_data = json.loads(res.text.replace(jQuery34102848205531413024_1584924641755(','')[:-1]) 14 print(china_response_data) 15 print(json.loads(china_response_data[data']).keys()) 16 res_china=json.loads(china_response_data[]); 17 print(res_china[chinaTotal 18 chinaAdd 19 url=https://api.inews.qq.com/newsqa/v1/automation/foreign/country/ranklist 20 headers={WOW64) AppleWebKit/537.36 (KHTML,like Gecko) Chrome/86.0.4240.198 Safari/537.36} 21 创建会话对象 22 session = requests.session() 23 请求接口 24 result = session.get('https://api.inews.qq.com/newsqa/v1/automation/foreign/country/ranklist') 25 打印结果 26 print(result.text) 27 res = requests.get(url,1)">headers) 28 29 response_data_0 = json.loads(res.text.replace('')[:-1]) 转化json对象 30 print(response_data_0.keys()) 31 print(response_data_0) 32 response_data_1=response_data_0[] 33 print(response_data_1) 34 35 print(response_data_1[0].keys()) 36 data = jsonpath.jsonpath(resJson_1,'$.data.*') 37 print(resJson_1.keys()) 38 for d in data: 39 res = '日期:' + d['date'] + '--' + d['continent'] + '--' + d['name'] + '--' + '新增确诊:' + str( 40 d['confirmAdd']) + '累计确诊:' + str(d['confirm']) + '治愈:' + str(d['heal']) + '死亡:' + str(d['dead']) 41 file = r'C:/Users/Administrator/Desktop/world_data.txt' 42 with open(file,'w+',encoding='utf-8') as f: 43 f.write(res + 'n') # 加n换行显示 44 f.close() 45 world={} 46 response_data_1: 47 temp=i[y']+.'+i[date 48 tup = time.strptime(temp,1)">%Y.%m.%d) 49 print(tup) 50 dt = time.strftime(%Y-%m-%d %H:%M:%S 改变时间格式，插入数据库 日期 51 print(dt) 52 c_name=i[name'] 国家 53 continent=i[continent'] 所属大洲 54 nowConfirm=i[nowConfirm现有确诊 55 confirm=i[confirm累计确诊 56 confirmAdd=i[confirmAdd'] 新增确诊 57 suspect=i[suspect现有疑似 58 heal=i[heal'] 累计治愈 59 dead=i[dead累计死亡 60 confirmAddCut=i[confirmAddCut 61 confirmCompare=i[confirmCompare 62 nowConfirmCompare=i[nowConfirmCompare 63 healCompare=i[healCompare 64 deadCompare=i[deadCompare 65 world[c_name] = {dt:dt, 66 : continent,1)"> 67 : nowConfirm,1)"> 68 : confirm,1)"> 69 : confirmAdd,1)"> 70 : suspect,1)"> 71 : heal,1)"> 72 : dead,1)"> 73 : confirmAddCut,1)"> 74 : confirmCompare,1)"> 75 : nowConfirmCompare,1)"> 76 : healCompare,1)"> 77 : deadCompare,1)"> 78 } 79 80 temp = response_data_1[0]['] + ' + response_data_1[0][ 81 tup = time.strptime(temp,1)"> 82 print(tup) 83 dt = time.strftime( 84 world[中国"] = {: dt,1)"> 85 亚洲",1)"> 86 ': res_china['][],1)"> 87 88 89 90 91 92 : 0,1)"> 93 94 95 96 97 } 98 return world 99 insert_world(): 100 101 更新 world 表 102 :return: 103 104 cursor = None 105 conn =106 try: 107 dic = get_world_data() 108 print(dic) 109 conn,cursor = get_conn() 110 sql = insert into world values(%s,%s,%s)" 111 sql_query = select %s=(select dt from world order by id desc limit 1)' 对比当前最大时间戳 112 cursor.execute(sql_query,dic[美国113 print(dic[114 if not cursor.fetchone()[0]: 115 print(f{time.asctime()}开始插入世界数据116 for k,v dic.items(): 117 cursor.execute(sql,[0,v.get('),k,1)">"),1)">),1)">118 v.get(119,1)">120 v.get()]) 121 conn.commit() 提交事务 122 {time.asctime()}插入世界数据完毕123 else124 {time.asctime()}世界数据已是最新数据！125 except126 traceback.print_exc() 127 finally128 close_conn(conn,cursor) 后台js代码（控制图表联动，给表格赋值和查询功能）? 1 //给表格添加数据 2 function get_table() { 3 $.ajax({ 4 async: true 5 url: "/table" 6 dataType:"json", 7 success: (data) { 8 var table_data=data.data; 9 alert(table_data) 10 for(var i=0;i<table_data.length;i++){ 11 console.log(table_data[i]); 12 } 13 var appendHTML = ""; 14 if($(".map-table tbody tr").length>0 15 $(".map-table tbody tr").remove(); 16 } 17 alert(table_data.length) 18 var i=0; i<table_data.length; i++ 19 分割日期字符串 20 strdt=table_data[i].dt.split(" "); 21 strdt=strdt[0]+strdt[1]+strdt[2]+strdt[3] 22 appendHTML = "<tr align='center' style='color:aquamarine;'><td>"+ 23 strdt+"</td><td>"+ 24 table_data[i].c_name+"</td><td>"+ 25 table_data[i].confirm+"</td><td>"+ 26 table_data[i].heal+"</td><td>"+ 27 table_data[i].dead+"</td><td>"+ 28 table_data[i].nowConfirm+"</td><td>"+ 29 (i+1)+"</td></tr>" 30 $(".map-table tbody").append(appendHTML); 31 32 33 }) 34 35 get_table(); 36 setInterval(get_table,100000 37 地图模块 38 (() { var myChart = echarts.init(document.querySelector('.map .chart')) var nameMap = 41 "Canada": "加拿大" 42 "Turkmenistan": "土库曼斯坦" 43 "Saint Helena": "圣赫勒拿" 44 "Lao PDR": "老挝" 45 "Lithuania": "立陶宛" 46 "Cambodia": "柬埔寨" 47 "Ethiopia": "埃塞俄比亚" 48 "Faeroe Is.": "法罗群岛" 49 "Swaziland": "斯威士兰" 50 "Palestine": "巴勒斯坦" 51 "Belize": "伯利兹" 52 "Argentina": "阿根廷" 53 "Bolivia": "玻利维亚" 54 "Cameroon": "喀麦隆" 55 "Burkina Faso": "布基纳法索" 56 "Aland": "奥兰群岛" 57 "Bahrain": "巴林" 58 "Saudi Arabia": "沙特阿拉伯" 59 "Fr. Polynesia": "法属波利尼西亚" 60 "Cape Verde": "佛得角" 61 "W. Sahara": "西撒哈拉" 62 "Slovenia": "斯洛文尼亚" 63 "Guatemala": "危地马拉" 64 "Guinea": "几内亚" 65 "Dem. Rep. Congo": "刚果（金）" 66 "Germany": "德国" 67 "Spain": "西班牙" 68 "Liberia": "利比里亚" 69 "Netherlands": "荷兰" 70 "Jamaica": "牙买加" 71 "Solomon Is.": "所罗门群岛" 72 "Oman": "阿曼" 73 "Tanzania": "坦桑尼亚" 74 "Costa Rica": "哥斯达黎加" 75 "Isle of Man": "曼岛" 76 "Gabon": "加蓬" 77 "Niue": "纽埃" 78 "Bahamas": "巴哈马" 79 "New Zealand": "新西兰" 80 "Yemen": "也门" 81 "Jersey": "泽西岛" 82 "Pakistan": "巴基斯坦" 83 "Albania": "阿尔巴尼亚" 84 "Samoa": "萨摩亚" 85 "Czech Rep.": "捷克" 86 "United Arab Emirates": "阿拉伯联合酋长国" 87 "Guam": "关岛" 88 "India": "印度" 89 "Azerbaijan": "阿塞拜疆" 90 "N. Mariana Is.": "北马里亚纳群岛" 91 "Lesotho": "莱索托" 92 "Kenya": "肯尼亚" 93 "Belarus": "白俄罗斯" 94 "Tajikistan": "塔吉克斯坦" 95 "Turkey": "土耳其" 96 "Afghanistan": "阿富汗" 97 "Bangladesh": "孟加拉国" 98 "Mauritania": "毛里塔尼亚" 99 "Dem. Rep. Korea": "朝鲜"100 "Saint Lucia": "圣卢西亚"101 "Br. Indian Ocean Ter.": "英属印度洋领地"102 "Mongolia": "蒙古"103 "France": "法国"104 "Cura?ao": "库拉索岛"105 "S. Sudan": "南苏丹"106 "Rwanda": "卢旺达"107 "Slovakia": "斯洛伐克"108 "Somalia": "索马里"109 "Peru": "秘鲁"110 "Vanuatu": "瓦努阿图"111 "Norway": "挪威"112 "Malawi": "马拉维"113 "Benin": "贝宁"114 "St. Vin. and Gren.": "圣文森特和格林纳丁斯"115 "Korea": "韩国"116 "Singapore": "新加坡"117 "Montenegro": "黑山共和国"118 "Cayman Is.": "开曼群岛"119 "Togo": "多哥"120 "China": "中国"121 "Heard I. and McDonald Is.": "赫德岛和麦克唐纳群岛"122 "Armenia": "亚美尼亚"123 "Falkland Is.": "马尔维纳斯群岛（福克兰）"124 "Ukraine": "乌克兰"125 "Ghana": "加纳"126 "Tonga": "汤加"127 "Finland": "芬兰"128 "Libya": "利比亚"129 "Dominican Rep.": "多米尼加"130 "Indonesia": "印度尼西亚"131 "Mauritius": "毛里求斯"132 "Eq. Guinea": "赤道几内亚"133 "Sweden": "瑞典"134 "Vietnam": "越南"135 "Mali": "马里"136 "Russia": "俄罗斯"137 "Bulgaria": "保加利亚"138 "United States": "美国"139 "Romania": "罗马尼亚"140 "Angola": "安哥拉"141 "Chad": "乍得"142 "South Africa": "南非"143 "Fiji": "斐济"144 "Liechtenstein": "列支敦士登"145 "Malaysia": "马来西亚"146 "Austria": "奥地利"147 "Mozambique": "莫桑比克"148 "Uganda": "乌干达"149 "Japan": "日本本土"150 "Niger": "尼日尔"151 "Brazil": "巴西"152 "Kuwait": "科威特"153 "Panama": "巴拿马"154 "Guyana": "圭亚那"155 "Madagascar": "马达加斯加"156 "Luxembourg": "卢森堡"157 "American Samoa": "美属萨摩亚"158 "Andorra": "安道尔"159 "Ireland": "爱尔兰"160 "Italy": "意大利"161 "Nigeria": "尼日利亚"162 "Turks and Caicos Is.": "特克斯和凯科斯群岛"163 "Ecuador": "厄瓜多尔"164 "U.S. Virgin Is.": "美属维尔京群岛"165 "Brunei": "文莱"166 "Australia": "澳大利亚"167 "Iran": "伊朗"168 "Algeria": "阿尔及利亚"169 "El Salvador": "萨尔瓦多"170 "C?te d'Ivoire": "科特迪瓦"171 "Chile": "智利"172 "Puerto Rico": "波多黎各"173 "Belgium": "比利时"174 "Thailand": "泰国"175 "Haiti": "海地"176 "Iraq": "伊拉克"177 "S?o Tomé and Principe": "圣多美和普林西比"178 "Sierra Leone": "塞拉利昂"179 "Georgia": "格鲁吉亚"180 "Denmark": "丹麦"181 "Philippines": "菲律宾"182 "S. Geo. and S. Sandw. Is.": "南乔治亚岛和南桑威奇群岛"183 "Moldova": "摩尔多瓦"184 "Morocco": "摩洛哥"185 "Namibia": "纳米比亚"186 "Malta": "马耳他"187 "Guinea-Bissau": "几内亚比绍"188 "Kiribati": "基里巴斯"189 "Switzerland": "瑞士"190 "Grenada": "格林纳达"191 "Seychelles": "塞舌尔"192 "Portugal": "葡萄牙"193 "Estonia": "爱沙尼亚"194 "Uruguay": "乌拉圭"195 "Antigua and Barb.": "安提瓜和巴布达"196 "Lebanon": "黎巴嫩"197 "Uzbekistan": "乌兹别克斯坦"198 "Tunisia": "突尼斯"199 "Djibouti": "吉布提"200 "Greenland": "丹麦"201 "Timor-Leste": "东帝汶"202 "Dominica": "多米尼克"203 "Colombia": "哥伦比亚"204 "Burundi": "布隆迪"205 "Bosnia and Herz.": "波斯尼亚和黑塞哥维那"206 "Cyprus": "塞浦路斯"207 "Barbados": "巴巴多斯"208 "Qatar": "卡塔尔"209 "Palau": "帕劳"210 "Bhutan": "不丹"211 "Sudan": "苏丹"212 "Nepal": "尼泊尔"213 "Micronesia": "密克罗尼西亚"214 "Bermuda": "百慕大"215 "Suriname": "苏里南"216 "Venezuela": "委内瑞拉"217 "Israel": "以色列"218 "St. Pierre and Miquelon": "圣皮埃尔和密克隆群岛"219 "Central African Rep.": "中非"220 "Iceland": "冰岛"221 "Zambia": "赞比亚"222 "Senegal": "塞内加尔"223 "Papua New Guinea": "巴布亚新几内亚"224 "Trinidad and Tobago": "特立尼达和多巴哥"225 "Zimbabwe": "津巴布韦"226 "Jordan": "约旦"227 "Gambia": "冈比亚"228 "Kazakhstan": "哈萨克斯坦"229 "Poland": "波兰"230 "Eritrea": "厄立特里亚"231 "Kyrgyzstan": "吉尔吉斯斯坦"232 "Montserrat": "蒙特塞拉特"233 "New Caledonia": "新喀里多尼亚"234 "Macedonia": "马其顿"235 "Paraguay": "巴拉圭"236 "Latvia": "拉脱维亚"237 "Hungary": "匈牙利"238 "Syria": "叙利亚"239 "Honduras": "洪都拉斯"240 "Myanmar": "缅甸"241 "Mexico": "墨西哥"242 "Egypt": "埃及"243 "Nicaragua": "尼加拉瓜"244 "Cuba": "古巴"245 "Serbia": "塞尔维亚"246 "Comoros": "科摩罗"247 "United Kingdom": "英国"248 "Fr. S. Antarctic Lands": "南极洲"249 "Congo": "刚果（布）"250 "Greece": "希腊"251 "Sri Lanka": "斯里兰卡"252 "Croatia": "克罗地亚"253 "Botswana": "博茨瓦纳"254 "Siachen Glacier": "锡亚琴冰川地区" 255 256 var option =257 title: { 258 text: '全球各国确诊情况'259 subtext: '累计确诊人数（截止至北京时间2020-06-09 08:30）',1)">260 left: 'center'261 textStyle: { 262 color: 'white' 263 },1)">264 top: 'top' 265 },1)">266 tooltip: { 267 trigger: 'item'268 formatter: (params) { 269 var value = params.value + ''270 return params.seriesName + '<br/>' + params.name + ' : ' + value + '人'271 272 273 visualMap: { 274 min: 0275 max: 1000000276 text: ['High','Low'],两端的文本 277 realtime: false278 calculable: 279 280 color: 'white' 281 282 color: ['#481380','#7f78d2','#efb1ff','#ffe2ff'283 284 series: [{ 285 name: '累计确诊人数'286 type: 'map'287 mapType: 'world'288 roam: 289 zoom:1.2290 itemStyle: { 291 normal: { 292 areaColor: '#f0fcd5'293 borderColor: 'rgb(0,108,255)'294 },1)">295 emphasis: { 296 地图里文字的样式 297 label: { 298 textStyle:{ 299 size: 18300 },1)">301 show: 302 color: 'black' 303 },1)">304 areaColor: '#fce8d5' 305 } 306 307 nameMap: nameMap,1)">308 data: 309 }] 310 }; 311 把配置和数据给实例对象 312 myChart.setOption(option); 313 var virus =314 315 url: '/table'316 type: 'get',1)">317 data: {},1)">318 dataType: 'json'319 success: (data) { 320 var num = data.data 321 for (var i = 0; i < num.length; i++) { 322 virus.push({ name: num[i].c_name,value: num[i].confirm }) 323 324 myChart.hideLoading() 325 必须在这里在设置一遍，这里涉及到的问题不太懂，只知道如不再设置，而在ajax外赋值是没有作用的 326 myChart.setOption({ 加载数据图表 327 series: [{ 328 根据名字对应到相应的系列 329 data: virus 330 }] 331 }) 332 333 334 window.addEventListener('resize',1)">335 myChart.resize() 336 337 实现鼠标放到地图上相应表格高亮 338 $.ajax 339 ({ 340 async: 341 url: "/table"342 343 success: (data) 344 { 345 var table_data = data.data; 346 347 var i = 0; i < table_data.length; i++348 console.log(table_data[i]); 349 350 351 移入该区域时，高亮 352 myChart.on('mouSEOver',1)"> (params) { 353 console.log(params);此处写点击事件内容 354 355 data11[i].value="0"; 356 if (params.name == table_data[i].c_name) { 357 测试如果鼠标放到哪个国家，就弹出哪个国家的名字 358 alert(params.name) 359 console.log(params.name); 360 addressList[i].value="1"; 361 选中高亮 362 $("#bd_data").children().eq(i).css("background","rgba(176,1)"363 } 364 365 }); 366 移出该区域时，取消高亮 367 myChart.on('mouSEOut',1)">368 console.log(params);此处写点击事件内容 369 370 371 372 测试如果鼠标离开哪个国家，就弹出哪个国家的名字 373 alert("离开"+params.name) 374 375 取消高亮 376 $("#bd_data").children().eq(i).css("background",0.1)"377 } 378 } 379 380 下面控制鼠标放到表格上地图高亮 381 if ("美国" == table_data[i].c_name) 382 { 383 $("#bd_data").find('tr').mouseenter( () 384 { alert("!!!") 385 var hang = $(this).prevAll().length; 386 myChart.dispatchAction({type: 'highlight',name: table_data[hang].c_name});高亮 387 388 389 $("#bd_data").find('tr').mouseleave(390 { 391 392 myChart.dispatchAction({type: 'downplay',1)">393 394 } 395 396 397 398 $.ajax({ 399 async: true,1)">400 url: "/table",1)">401 // dataType:"json",1)">402 success: function (data) 403 404 var table_data=data.data; 405 // 鼠标移入的第几行数据 406 407 408 })409 })(); 410 查询js 411 find_res(){ 412 var cname; 413 $.ajax 414 ({ 415 method:"post", 416 url:"http://localhost:8080/PycharmProjects/Cov/templates/world.html?_ijt=q6ulfhihrfp8rqkl8id73svio3",1)">417 success:function(data) 418 { 419 //form表单数据的转化，转化成[ { name:,value: },{ name:,value: } ] 420 all=$('#find_value').serializeArray() 421 // console.log(all['cname']) 422 console.log(all[0]) 423 cname=all[0]['value'] 424 alert(cname) 425 } 426 }) 427 cname=document.getElementById("cname").value 428 $.ajax( 429 430 sync:431 url:"/find_worldByName"432 data:{name:cname},1)">433 success:434 435 table_data=436 437 { 438 439 440 441 442 $(".map-table tbody tr"443 444 445 446 447 分割日期字符串 448 strdt=table_data[i][1].split(" "449 strdt=strdt[0]+strdt[1]+strdt[2]+strdt[3450 appendHTML = "<tr align='center' style='color:aquamarine;'><td>"+ 451 strdt+"</td><td>"+ 452 table_data[i][2]+"</td><td>"+ 453 table_data[i][5]+"</td><td>"+ 454 table_data[i][8]+"</td><td>"+ 455 table_data[i][9]+"</td><td>"+ 456 table_data[i][4]+"</td><td>"+ 457 (i+1)+"</td></tr>"458 $(".map-table tbody"459 } 460 461 462 ) 463 } flask路由（查询）根据国家的名字查询
2 @app.route(/find_worldByName3 find_worldByName():
4 获取用户传来的数据
5 res=[]
6 name = request.values.get(7 res=utils.find_worldByName(name)
8 print(res)
return jsonify({": res})
? Tomorrow the birds will sing. （编辑：北几岛） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |