昨天還沒把全部的東西做好,今天要把它整個連起來,這邊發現了一個問題,官網上的名稱跟一般稱呼不一樣,像是統一獅是統一7-ELEVEn,而這次在實作這個功能的時候是用官網的名稱下去做,之前是用普通的稱呼,為了保持統一性,選項的文字部分不更改,只改value
整個html表單
<form>
<div class="row">
<div class="form-group col-6">
<select name="team" id="team" onchange="get_win()" class="form-control">
<option value="中信兄弟">中信兄弟</option>
<option value="統一7-ELEVEn">統一獅</option>
<option value="富邦">富邦悍將</option>
<option value="樂天">樂天桃猿</option>
</select>
</div>
</div>
</form>
然後發現昨天忘記存隊伍的日期
def store_team_win_date(team, win_date):
db = firestore.client()
doc_ref = db.collection(u'隊伍').document(str(team))
doc = doc_ref.get()
if doc.exists:
doc_ref.update({"時間": win_date})
else:
doc_ref.set({"時間": win_date})
接著是整個ajax
function get_win(){
let team = document.getElementById("team").value;
let chart = echarts.init(document.getElementById('stat'), 'white', { renderer: 'canvas' });
$.ajax({
type: 'POST',
url: "/get_team_win_stat",
data: { "team": team },
success: function (result) {
console.log(result);
let win_percetage = result["勝率"].reverse();
let date_list = result["時間"];
let date = [];
let data = [];
for(let i = 0; i < date_list.length;i++){
let date_split = date_list[i].split("/");
let t = new Date(date_split[0],date_split[1],date_split[2]);
date.push(t);
}
function generatedata(date, val){
return {
name: date.toString(),
value:[
date,
val
]
};
}
for(let i =0 ; i < win_percetage.length; i++){
data.push(generatedata(date[i],win_percetage[i]));
}
option = {
tooltip: {
trigger: 'axis',
formatter: function (params) {
params = params[0];
var date = new Date(params.name);
return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
},
axisPointer: {
animation: false
}
},
xAxis: {
type: 'time',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
splitLine: {
show: false
}
},
series: [{
data: data,
type: 'line'
}]
};
chart.setOption(option);
}
});
}
明天想把四隊的折線圖疊起來