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