Echarts世界地图和网页表格数据交互联动

概述html布局： 1 <div class="column"> 2 <div class="panel bl bar1"> 3 <d 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 ></div>-->28                 <div ></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_name3     # 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 = None105     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.data321             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: virus330                 }]331             })332 333 334     window.addEventListener('resize',1)">335         myChart.resize()336 337     实现鼠标放到地图上相应表格高亮338     $.AJAX339     ({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                         测试如果鼠标放到哪个国家，就d出哪个国家的名字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                         测试如果鼠标离开哪个国家，就d出哪个国家的名字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 查询Js411  find_res(){412     var cname;413      $.AJAX414      ({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").value428     $.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.

总结

以上是内存溢出为你收集整理的Echarts世界地图和网页表格数据交互联动全部内容，希望文章能够帮你解决Echarts世界地图和网页表格数据交互联动所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。