<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts 示例</title>
    <!-- 引入 ECharts -->
    <script src="../static/js/echarts.min.js"></script>
</head>
<body>
    <!-- 输入框和按钮 -->
    <div>
        <input type="text" id="stockCode" placeholder="输入股票代码">
        <input type="text" id="jysl" value="0" placeholder="输入交易量阈值">
        <button onclick="fetchData()">查询</button>
    </div>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1000px;height:600px;"></div>
    <script>
        // ECharts图表初始化
        var myChart = echarts.init(document.getElementById('main'));

        function fetchData() {

            let inputValue = document.getElementById('jysl').value;
            var stockCode = document.getElementById('stockCode').value;
            // 检查code是否以'6'开头，据此设置market值
            var market = stockCode.startsWith('6') ? '1' : '0';
            var baseUrl = "http://push2ex.eastmoney.com/getStockFenShi?pagesize=6000&ut=7eea3edcaed734bea9cbfc24409ed989&dpt=wzfscj&pageindex=0&id=3007792&sort=1&ft=1&code=REPLACE_CODE&market=REPLACE_MARKET";
            var url = baseUrl.replace("REPLACE_CODE", stockCode).replace("REPLACE_MARKET", market);
            
            fetch(url)
                .then(function(response) {
                    return response.json();
                })
                .then(function(jsonData) {
                    // 这里的jsonData就是你从服务器获取的数据
                    // 下面是数据处理的代码，可能需要根据实际数据结构进行调整

                    var data = jsonData.data.data; // 根据实际结构调整路径

                    // 数据处理：按每分钟聚合
                    var buyData = {};  // 买方数据
                    var sellData = {}; // 卖方数据
                    data.forEach(function(item) {
                        var minute = Math.floor(item.t / 100); // 取整到分钟
                        if (item.v >= inputValue) { // 只有当v值大于或等于100时才进行处理
                            if (item.bs === 1) {
                                if (!sellData[minute]) sellData[minute] = 0;
                                sellData[minute] += item.v;
                            } else if (item.bs === 2) {
                                if (!buyData[minute]) buyData[minute] = 0;
                                buyData[minute] += item.v;
                            }
                        }
                    });

                    // 准备ECharts数据
                    var categories = [];
                    var buyValues = [];
                    var sellValues = [];
                    
                    // 获取所有时间点并按数字大小排序
                    var allMinutes = new Set([...Object.keys(buyData), ...Object.keys(sellData)]);
                    var sortedMinutes = Array.from(allMinutes).map(Number).sort((a, b) => a - b);
                    
                    sortedMinutes.forEach(function(minute) {
                        // 格式化时间显示 (例如: 093000 -> 09:30:00)
                        var timeStr = minute.toString().padStart(6, '0');
                        var formattedTime = timeStr.substring(0,2) + ':' + timeStr.substring(2,4) + ':' + timeStr.substring(4,6);
                        categories.push(formattedTime);
                        buyValues.push(buyData[minute] || 0);
                        sellValues.push(sellData[minute] || 0);
                    });

                    // 设置ECharts选项
                    var option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {
                            data:['买方', '卖方']
                        },
                        xAxis: {
                            data: categories,
                            axisLabel: {
                                rotate: 45 // 旋转标签以避免重叠
                            }
                        },
                        yAxis: {
                            type: 'value',
                            name: '交易量'
                        },
                        series: [{
                            name: '买方',
                            type: 'bar',
                            data: buyValues,  // 修复：买方显示买方数据
                            stack: '总量',
                            itemStyle: {
                                color: '#ff4d4f' // 红色表示买方
                            }
                        }, {
                            name: '卖方',
                            type: 'bar',
                            data: sellValues, // 修复：卖方显示卖方数据
                            stack: '总量',
                            itemStyle: {
                                color: '#52c41a' // 绿色表示卖方
                            }
                        }],
                        dataZoom: [{
                            type: 'inside', // 内置于坐标系中，通过鼠标滚轮或触控板操作进行数据区域缩放
                            start: 0,       // 数据窗口范围的起始百分比，表示数据窗口包含数据序列的起始部分
                            end: 100        // 数据窗口范围的结束百分比，初始设置为100%，即展示全部数据
                        }, {
                            type: 'slider', // 滑动条型数据区域缩放组件
                            start: 0,
                            end: 100
                        }],
                    };

                    // 显示图表。
                    myChart.setOption(option);
                })
                .catch(function(error) {
                    console.log('Request failed', error);
                });
        }
    </script>
</body>
</html>
