<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AG Grid 股票实时行情</title>
<!-- AG Grid 核心库 -->
<script
src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"
></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
#stockGrid {
height: 600px;
width: 100%;
margin-top: 20px;
}
/* 涨/跌样式 */
.price-up {
color: #f4333c; /* 涨红 */
}
.price-down {
color: #009688; /* 跌绿 */
}
.price-flat {
color: #333; /* 平盘 */
}
</style>
</head>
<body>
<h2>股票模拟实时行情（AG Grid）</h2>
<div id="stockGrid"></div>
<script>
// 1. 模拟初始股票数据
const generateInitialStockData = () => {
const stocks = [
{
code: "600000",
name: "浦发银行",
price: 8.62,
change: 0,
changePercent: 0,
},
{
code: "600036",
name: "招商银行",
price: 35.45,
change: 0,
changePercent: 0,
},
{
code: "000858",
name: "五粮液",
price: 178.20,
change: 0,
changePercent: 0,
},
{
code: "002594",
name: "比亚迪",
price: 235.80,
change: 0,
changePercent: 0,
},
{
code: "601318",
name: "中国平安",
price: 42.65,
change: 0,
changePercent: 0,
},
{
code: "600519",
name: "贵州茅台",
price: 1890.50,
change: 0,
changePercent: 0,
},
{
code: "300750",
name: "宁德时代",
price: 185.60,
change: 0,
changePercent: 0,
},
{
code: "601689",
name: "拓普集团",
price: 56.80,
change: 0,
changePercent: 0,
},
];
return stocks;
};
// 2. 模拟实时价格更新
const updateStockPrice = (rowData) => {
return rowData.map((stock) => {
// 随机生成价格波动（±0.5% 以内）
const fluctuation = (Math.random() - 0.5) * 0.005;
const newPrice = (stock.price * (1 + fluctuation)).toFixed(2);
const change = (newPrice - stock.price).toFixed(2);
const changePercent = ((change / stock.price) * 100).toFixed(2);
return {
...stock,
price: parseFloat(newPrice),
change: parseFloat(change),
changePercent: parseFloat(changePercent),
};
});
};
// 3. 配置列定义
const columnDefs = [
{
headerName: "股票代码",
field: "code",
width: 100,
},
{
headerName: "股票名称",
field: "name",
width: 120,
},
{
headerName: "当前价格(元)",
field: "price",
type: "numericColumn",
width: 140,
// 价格格式化 + 涨跌样式
cellRenderer: (params) => {
const change = params.data.change;
let className = "price-flat";
if (change > 0) className = "price-up";
if (change < 0) className = "price-down";
return `<span class="${className}">${
params.value.toFixed(2)
}</span>`;
},
},
{
headerName: "涨跌额(元)",
field: "change",
type: "numericColumn",
width: 120,
cellRenderer: (params) => {
let className = "price-flat";
if (params.value > 0) className = "price-up";
if (params.value < 0) className = "price-down";
return `<span class="${className}">${
params.value.toFixed(2)
}</span>`;
},
},
{
headerName: "涨跌幅(%)",
field: "changePercent",
type: "numericColumn",
width: 120,
cellRenderer: (params) => {
let className = "price-flat";
if (params.value > 0) className = "price-up";
if (params.value < 0) className = "price-down";
return `<span class="${className}">${params.value}%</span>`;
},
},
];
// 4. 初始化 AG Grid
const initGrid = () => {
// 初始数据
let rowData = generateInitialStockData();
// Grid 配置
const gridOptions = {
columnDefs: columnDefs,
rowData: rowData,
defaultColDef: {
sortable: true,
filter: true,
resizable: true, // 列可调整宽度
},
animateRows: true, // 行更新时动画效果
rowHeight: 35, // 行高
headerHeight: 40, // 表头高度
};
// 挂载 Grid 到 DOM
const gridDiv = document.querySelector("#stockGrid");
const api = agGrid.createGrid(gridDiv, gridOptions);
// 5. 定时更新数据（模拟实时行情，每2秒刷新一次）
setInterval(() => {
rowData = updateStockPrice(rowData);
api.setGridOption("rowData", rowData); // 更新数据
}, 2000);
};
// 页面加载完成后初始化
document.addEventListener("DOMContentLoaded", initGrid);
</script>
</body>
</html>
浙公网安备 33010602011771号