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

html布局：

 1 <div class="column">
 2             <div class="panel bl bar1">
 3                 <div class="panelFooter"></div>
 4                 <h2>世界疫情数据汇总查询</h2>
 5                 <div class="map-table">
 6                 <table align="center" style="margin:3px"  cellspacing="7px">
 7                 <form id="find_value">
 8                     <label><font color="#ff7f50">输入国家：</font></label>
 9                     <input id="cname" type="text" name="cname" placeholder="" value="">
10                     <input type="button" value="查询" onclick="find_res()">
11                     <input type="reset" value="重置">
12                 </form>
13                 <thead>
14                  <tr style="color: #FFB6C1">
15                 <th>时间</th>
16                 <th>国家</th>
17                 <th>累计确诊</th>
18                 <th>累计治愈</th>
19                 <th>累计死亡</th>
20                 <th>现存确诊</th>
21                 <th>排名</th>
22               </tr>
23                 </thead>
24                 <tbody id="bd_data">
25                 </tbody>
26             </table>
27 <!--                <div class="chart"></div>-->
28 <!--                <div class="panelFooter"></div>-->
29                 </div>
30             </div>
31         </div>

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     position: relative;
16     height: 5rem;
17     /* width: 100%; */
18     border: 1px solid rgba(25, 186, 139, 0.17);
19     background: 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     position: absolute;
26     bottom: 0;
27     left: 0;
28     /* background-color: pink; */
29     height: 10px;
30     width: 100%;
31 }
32
33 .panelFooter::before {
34     position: absolute;
35     top: 0;
36     /* 要给内容 */
37     content: "";
38     left: 0;
39     height: 10px;
40     width: 10px;
41     border-bottom: 2px solid #02a6b5;
42     border-left: 2px solid #02a6b5;
43 }
44
45 .panelFooter::after {
46     position: absolute;
47     top: 0;
48     /* 要给内容 */
49     content: "";
50     right: 0;
51     height: 10px;
52     width: 10px;
53     border-bottom: 2px solid #02a6b5;
54     border-right: 2px solid #02a6b5;
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 def 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['data']);
 17     print(res_china['chinaTotal'])
 18     print(res_china['chinaAdd'])
 19     url='https://api.inews.qq.com/newsqa/v1/automation/foreign/country/ranklist'
 20     headers={'user-agent': '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,headers=headers)
 28     # print(res.text)
 29     response_data_0 = json.loads(res.text.replace('jQuery34102848205531413024_1584924641755(', '')[:-1])  #转化json对象
 30     # print(response_data_0.keys())
 31     # print(response_data_0)
 32     response_data_1=response_data_0['data']
 33     # print(response_data_1)
 34     # print(response_data_1)
 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     for i in response_data_1:
 47         temp=i['y']+'.'+i['date']
 48         tup = time.strptime(temp, '%Y.%m.%d')
 49         # print(tup)
 50         dt = time.strftime('%Y-%m-%d %H:%M:%S', tup)  # 改变时间格式，插入数据库 日期
 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': continent,
 67                      'nowConfirm': nowConfirm,
 68                      'confirm': confirm,
 69                      'confirmAdd': confirmAdd,
 70                      'suspect': suspect,
 71                      'heal': heal,
 72                      'dead': dead,
 73                      'confirmAddCut': confirmAddCut,
 74                      'confirmCompare': confirmCompare,
 75                      'nowConfirmCompare': nowConfirmCompare,
 76                      'healCompare': healCompare,
 77                      'deadCompare': deadCompare,
 78                      }
 79
 80     temp = response_data_1[0]['y'] + '.' + response_data_1[0]['date']
 81     tup = time.strptime(temp, '%Y.%m.%d')
 82     # print(tup)
 83     dt = time.strftime('%Y-%m-%d %H:%M:%S', tup)  # 改变时间格式，插入数据库 日期
 84     world["中国"] = {'dt': dt,
 85                      'continent': "亚洲",
 86                      'nowConfirm': res_china['chinaTotal']['nowConfirm'],
 87                      'confirm': res_china['chinaTotal']['confirm'],
 88                      'confirmAdd': res_china['chinaAdd']['confirm'],
 89                      'suspect': res_china['chinaTotal']['suspect'],
 90                      'heal': res_china['chinaTotal']['heal'],
 91                      'dead': res_china['chinaTotal']['dead'],
 92                      'confirmAddCut': 0,
 93                      'confirmCompare': 0,
 94                      'nowConfirmCompare': 0,
 95                      'healCompare': 0,
 96                      'deadCompare': 0,
 97                      }
 98     return world
 99 def insert_world():
100     """
101     更新 world 表
102     :return:
103     """
104     cursor = None
105     conn = None
106     try:
107         dic = get_world_data()
108         # print(dic)
109         conn, cursor = get_conn()
110         sql = "insert into world values(%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s)"
111         sql_query = 'select %s=(select dt from world order by id desc limit 1)' #对比当前最大时间戳
112         cursor.execute(sql_query,dic['美国']['dt'])
113         print(dic['美国']['dt'])
114         if not cursor.fetchone()[0]:
115             print(f"{time.asctime()}开始插入世界数据")
116             for k, v in dic.items():
117                 cursor.execute(sql, [0,v.get('dt'), k, v.get("continent"), v.get("nowConfirm"),
118                             v.get("confirm"), v.get("confirmAdd"),v.get("suspect"),v.get("heal"), v.get("dead")
119                     , v.get("confirmAddCut"), v.get("confirmCompare"), v.get("nowConfirmCompare"), v.get("healCompare"),
120                 v.get("deadCompare")])
121             conn.commit()  # 提交事务
122             print(f"{time.asctime()}插入世界数据完毕")
123         else:
124             print(f"{time.asctime()}世界数据已是最新数据！")
125     except:
126         traceback.print_exc()
127     finally:
128         close_conn(conn, cursor)

后台js代码（控制图表联动，给表格赋值和查询功能）

  1 //给表格添加数据
  2 function get_table() {
  3     $.ajax({
  4         async: true,
  5         url: "/table",
  6         // dataType:"json",
  7         success: function (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         for(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 (function() {
 39     var myChart = echarts.init(document.querySelector('.map .chart'))
 40     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）',
260             left: 'center',
261             textStyle: {
262                 color: 'white'
263             },
264             top: 'top'
265         },
266         tooltip: {
267             trigger: 'item',
268             formatter: function(params) {
269                 var value = params.value + '';
270                 return params.seriesName + '<br/>' + params.name + ' : ' + value + '人';
271             }
272         },
273         visualMap: {
274             min: 0,
275             max: 1000000,
276             text: ['High', 'Low'],//两端的文本
277             realtime: false,
278             calculable: false,
279             textStyle: {
280                 color: 'white'
281             },
282             color: ['#481380', '#7f78d2', '#efb1ff', '#ffe2ff']
283         },
284         series: [{
285             name: '累计确诊人数',
286             type: 'map',
287             mapType: 'world',
288             roam: true,
289             zoom:1.2,
290             itemStyle: {
291                 normal: {
292                     areaColor: '#f0fcd5',
293                     borderColor: 'rgb(0,108,255)',
294                 },
295                 emphasis: {
296                     //地图里文字的样式
297                     label: {
298                         textStyle:{
299                             size: 18,
300                         },
301                         show: true,
302                         color: 'black'
303                     },
304                     areaColor: '#fce8d5'
305                 }
306             },
307             nameMap: nameMap,
308             // data:
309         }]
310     };
311     // 把配置和数据给实例对象
312     myChart.setOption(option);
313     var virus = []
314     $.ajax({
315         url: '/table',
316         // type: 'get',
317         // data: {},
318         dataType: 'json',
319         success: function(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', function() {
335         myChart.resize()
336     })
337     //实现鼠标放到地图上相应表格高亮
338     $.ajax
339     ({
340         async: true,
341         url: "/table",
342         // dataType:"json",
343         success: function (data)
344         {
345             var table_data = data.data;
346             // alert(table_data)
347             for (var i = 0; i < table_data.length; i++) {
348                 console.log(table_data[i]);
349             }
350
351             //  移入该区域时，高亮
352             myChart.on('mouseOver', function (params) {
353                 console.log(params);//此处写点击事件内容
354                 for (var i = 0; i < table_data.length; i++) {
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, 196, 222,1)")
363                     }
364                 }
365             });
366             //  移出该区域时，取消高亮
367             myChart.on('mouseOut', function (params) {
368                 console.log(params);//此处写点击事件内容
369                 for (var i = 0; i < table_data.length; i++) {
370                     // data11[i].value="0";
371                     if (params.name == table_data[i].c_name) {
372                         //测试如果鼠标离开哪个国家，就弹出哪个国家的名字
373                         //  alert("离开"+params.name)
374                         // console.log(params.name);
375                         //取消高亮
376                         $("#bd_data").children().eq(i).css("background", "rgba(176, 196, 222, 0.1)")
377                     }
378                 }
379             });
380             //下面控制鼠标放到表格上地图高亮
381             // if ("美国" == table_data[i].c_name)
382             // {
383             $("#bd_data").find('tr').mouseenter(function ()
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(function ()
390             {
391                 var hang = $(this).prevAll().length;
392                 myChart.dispatchAction({type: 'downplay', name: table_data[hang].c_name});//取消高亮
393             })
394                 // }
395         }
396     })
397
398    /*  $.ajax({
399         async: true,
400         url: "/table",
401         // dataType:"json",
402         success: function (data)
403         {
404              var table_data=data.data;
405             // 鼠标移入的第几行数据
406
407         }
408      })*/
409 })();
410 //查询js
411 function find_res(){
412     var cname;
413     // $.ajax
414     // ({
415     //     method:"post",            　　
416     //     url:"http://localhost:8080/PycharmProjects/Cov/templates/world.html?_ijt=q6ulfhihrfp8rqkl8id73svio3",
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:true,
431             url:"/find_worldByName",
432             data:{name:cname},
433             success:function (data)
434             {
435                 table_data=data.data;
436                 for(var i=0;i<table_data.length;i++)
437                 {
438                 // console.log(table_data[i]);
439                 }
440             var appendHTML = "";
441         if($(".map-table tbody tr").length>0){
442             $(".map-table tbody tr").remove();
443         }
444         // alert(table_data.length)
445         for(var i=0; i<table_data.length; i++)
446         {
447             //分割日期字符串
448             strdt=table_data[i][1].split(" ");
449             strdt=strdt[0]+strdt[1]+strdt[2]+strdt[3]
450             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").append(appendHTML);
459          }
460             }
461         }
462     )
463 }

flask路由（查询）

1 #根据国家的名字查询
2 @app.route("/find_worldByName")
3 def find_worldByName():
4     #获取用户传来的数据
5     res=[]
6     name = request.values.get("name")
7     res=utils.find_worldByName(name)
8     print(res)
9     return jsonify({"data": res})

Tomorrow the birds will sing.