98 lines
3.1 KiB
HTML
98 lines
3.1 KiB
HTML
|
{% extends "base.html" %}
|
||
|
|
{% block title %}晚餐吃什么鸭{% endblock %}
|
||
|
|
{% block head %}
|
||
|
|
{{ super() }}
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
{% block content %}
|
||
|
|
<div class="pt-1 mb-3">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-10">
|
||
|
|
<select id="dateSelect" class="form-select" aria-label="日期选择">
|
||
|
|
{% for recent_result in recent_results %}
|
||
|
|
<option value="{{ recent_result.datestr }}" {{ 'selected' if date==recent_result.datestr else '' }}>
|
||
|
|
{{ recent_result.datestr }}
|
||
|
|
</option>
|
||
|
|
{% endfor %}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="col-1">
|
||
|
|
<button type="button" class="btn btn-primary" onclick="back()">返回</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="main" style="width: 100%;height:400px;"></div>
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
{% block script %}
|
||
|
|
{{ super() }}
|
||
|
|
<script src="/static/echarts.min.js"></script>
|
||
|
|
<!--suppress JSSuspiciousNameCombination -->
|
||
|
|
<script>
|
||
|
|
function back() {
|
||
|
|
window.location.href = '/dinner';
|
||
|
|
}
|
||
|
|
|
||
|
|
$("#dateSelect").change(function () {
|
||
|
|
window.location.href = 'chart?date=' + $("#dateSelect").val();
|
||
|
|
});
|
||
|
|
const chartEl = document.getElementById('main');
|
||
|
|
const menus = {{ menus | tojson }};
|
||
|
|
const legendData = [], seriesData = [];
|
||
|
|
for (let menu in menus) {
|
||
|
|
legendData.push(menu);
|
||
|
|
seriesData.push({value: menus[menu], name: menu});
|
||
|
|
}
|
||
|
|
const option = {
|
||
|
|
title: {
|
||
|
|
text: '{{date}}',
|
||
|
|
left: 'center',
|
||
|
|
top: 'center'
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
orient: 'horizontal',
|
||
|
|
left: 20,
|
||
|
|
right: 20,
|
||
|
|
top: 10,
|
||
|
|
data: legendData
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: 'pie',
|
||
|
|
radius: ['30%', '35%'],
|
||
|
|
center: ['50%', '50%'],
|
||
|
|
data: seriesData,
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
position: 'outside',
|
||
|
|
color: '#1B233E',
|
||
|
|
formatter: function (params) {
|
||
|
|
return params.name + ' ' + params.percent + '%'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
function resizeChart() {
|
||
|
|
let windowWidth = window.innerWidth;
|
||
|
|
let windowHeight = window.innerHeight;
|
||
|
|
if (windowWidth > windowHeight) {
|
||
|
|
windowHeight = 600;
|
||
|
|
} else {
|
||
|
|
windowHeight = windowWidth * 110 / 100;
|
||
|
|
}
|
||
|
|
chartEl.style.width = windowWidth * 95 / 100 + "px";
|
||
|
|
chartEl.style.height = windowHeight + "px";
|
||
|
|
}
|
||
|
|
|
||
|
|
resizeChart();
|
||
|
|
const mainChart = echarts.init(chartEl);
|
||
|
|
window.addEventListener('resize', function () {
|
||
|
|
resizeChart()
|
||
|
|
mainChart.resize();
|
||
|
|
});
|
||
|
|
mainChart.setOption(option);
|
||
|
|
</script>
|
||
|
|
{% endblock %}
|