dinner_vote/templates/chart.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-9">
                <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-2">
                <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 %}