
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Charts</title>
    <script src="files/emin.js"></script>
    <style>
        html, body { height: 100%; margin: 0; }
        .chart-container { width: 99%; height: 97%; }
    </style>
</head>
<body>
    <div id="chart1" class="chart-container"></div>
    <div id="buttonContainer" style="position: absolute; top: 20px; left: 120px;">
    <input type='checkbox' id='showValues'><span style=font-size:12px>数值</span>&nbsp;&nbsp;&nbsp;&nbsp;
        <button id="lineButton">折线图</button>
        <button id="barButton">柱形图</button>
    </div>
    <script>
        function getRandomColor() {
            var letters = '0123456789ABCDEF';
            var color = '#';
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }
        var chart1 = echarts.init(document.getElementById('chart1'));
        var title_1 = "【表1】线线比对";
        var title_2 = "各目标线分数来源于市教研院";
        var kemu = ["数学物理类","英语物理类","历史历史类",];
        var fen666 = [ 
{exam: "高三12月市 13中",marks:[61.1,69.4,62.1,]},
{exam: "高三12月市 16中",marks:[83.9,89.1,69.4,]},
{exam: "高三12月市 培正",marks:[81.2,84.1,66.2,]},

];;
        var currentType = 'line';
        function getSeriesData(type) {
            return fen666.map(exam => ({
                name: exam.exam, type: exam.exam.includes('目标') ? 'line' : type, data: exam.marks,
                symbol: exam.exam.includes('目标') ? 'emptyCircle' : 'circle',
                symbolSize: exam.exam.includes('目标') ? 15 : 20,
                itemStyle: { color: exam.exam.includes('目标') ? 'grey' : getRandomColor() },
                lineStyle: { width: exam.exam.includes('目标') ? 2 : 5, type: exam.exam.includes('目标') ? 'dashed' : 'solid' },
                label: { show: document.getElementById('showValues').checked, position: 'top', fontSize: 12 }
            }));
        }
        var option1 = {
            title: { text: title_1, subtext: title_2, left: 'center' },
            tooltip: { trigger: 'axis' },
            legend: { data: fen666.map(exam => exam.exam), top: '10%', right: '5%', orient: 'vertical', itemGap: 10 },
            grid: { left: '3%', right: '10%', top: '15%', bottom: '7%' },
            xAxis: { type: 'category', data: kemu,
                axisLabel: {
                    align: 'center', fontSize: 16, fontFamily: 'Microsoft YaHei',
                    formatter: function(value) { return value.replace(/(物理类|历史类)/g, '\n$1'); }
                },
                axisTick: { alignWithLabel: true },
                axisLine: { onZero: false }
            },
            yAxis: { type: 'value',
                min: function(value) { return Math.floor((value.min - 10) / 10) * 10; },
                max: function(value) { return Math.ceil((value.max + 10) / 10) * 10; }
            },
            series: getSeriesData('line')
        };
        chart1.setOption(option1);
        function changeChartType(type) {
            currentType = type;
            option1.series = getSeriesData(type);
            chart1.setOption(option1);
        }
        document.getElementById('lineButton').onclick = function() { changeChartType('line'); };
        document.getElementById('barButton').onclick = function() { changeChartType('bar'); };
        document.getElementById('showValues').onchange = function() {
            option1.series = getSeriesData(currentType);
            chart1.setOption(option1);
        };
    </script>
</body>
</html>
