<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<title>Echart-折线图-测试</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<style>
#main { width: 100%; height: 600px; margin: 0 auto; }
</style>
</head>
<body>
<div id="main"></div>

<script>
// 初始化图表（只执行一次）
const myChart = echarts.init(document.getElementById('main'));
const API_URL = 'https://push2his.eastmoney.com/api/qt/stock/trends2/get?fields1=f1,f2,f3,f4,f5,f6,f7,f8,f9,f10,f11,f12,f13&fields2=f51,f52,f53,f54,f55,f56,f57,f58&ut=fa5fd1943c7b386f172d6893dbfba10b&ndays=1&iscr=0&secid=1.588000';

let timer = null; // 定时器变量

// 定义一个获取并渲染数据的函数
function loadChartData() {
  // ===================== 核心：15:01 之后停止自动更新 =====================
  const now = new Date();
  const hours = now.getHours();
  const minutes = now.getMinutes();
  // 15点01分及以后，清除定时器，不再刷新
  if (hours >= 15 && minutes >= 1) {
    if (timer) {
      clearInterval(timer);
      timer = null;
      console.log('已到15:01，自动刷新已停止');
    }
  }

  fetch(API_URL)
    .then(res => res.json())
    .then(data => {
      if (!data?.data?.trends) return;
      const trends = data.data.trends;

      // 解析数据
      const times = [], prices = [], avgs = [];
      trends.forEach(item => {
        const arr = item.split(',');
        times.push(arr[0]);
        prices.push(+arr[1]);
        avgs.push(+arr[2]);
      });

      // 获取最新jg（最后一条数据）
      const lastPrice = prices[prices.length - 1];

      // 计算纵轴范围
      const allPrices = [...prices, ...avgs];
      const priceMin = Math.min(...allPrices);
      const priceMax = Math.max(...allPrices);
      const padding = (priceMax - priceMin) * 0.01;
      const yMin = priceMin - padding;
      const yMax = priceMax + padding;

      // 配置项
      const option = {
        // ===================== 标题显示实时jg =====================
        title: {
          text: `Echart-折线图-测试 | 最新数据：${lastPrice.toFixed(2)}`,
          left: 'center',
          textStyle: { fontSize: 16 }
        },
        tooltip: { trigger: 'axis' },
        grid: { left: '5%', right: '5%', bottom: '10%' },
        xAxis: {
          type: 'category',
          data: times,
          boundaryGap: false,
          axisLabel: { rotate: 45 }
        },
        yAxis: {
          type: 'value',
          min: yMin,
          max: yMax,
          scale: true
        },
        series: [
          {
            name: '现',
            type: 'line',
            data: prices,
            smooth: true,
            symbol: 'none',
            lineStyle: { width: 1.5, color: '#0091FF' }
          }
        ]
      };

      // 更新图表
      myChart.setOption(option, true);

      // 自动显示最后一个数据点
      const lastIndex = times.length - 1;
    })
    .catch(err => console.error('请求失败', err));
}

// 首次加载
loadChartData();

// 每3秒刷新一次
timer = setInterval(loadChartData, 3000);

// 页面关闭时清除定时器
window.addEventListener('beforeunload', () => {
  if (timer) clearInterval(timer);
});
</script>
</body>
</html>