天天看點

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.