国际原油价格查询：如何用数据搭建实时油价看板？从拉取到可视化
国际原油价格查询原油价格APIWTI原油布伦特原油免费接口 # 国际原油价格查询：如何用数据搭建实时油价看板？从拉取到可视化
> 接口：国际原油价格查询（apiCode=1108，接入点 1108-1）｜ 免费 ｜ 请求方式 POST/GET ｜ 返回 JSON ｜ 适用人群：全栈工程师、产品经理 ｜ 阅读时间：约 7 分钟
## 核心要点
- 接口每小时整点更新，看板用「整点拉取 + 前端展示」即可，无需秒级轮询。
- 最小实现 = 后端定时拉取接口 → 存当前快照 → 前端读取展示。
- 展示时复用 `name` 做标题，`nowPrice`/`diff_rate` 做主指标，注意价格字段类型转换。
## Why
把油价放进后台首页、运营大屏或公众号自动稿，是这类数据接口最常见的落法。你不必自己维护数据源，只要定时调国际原油价格查询，把最新价、涨跌幅、最高最低画出来，就是一个能长期自动跑的油价看板。本文给出一个最小可运行实现。
## What
| 项目 | 说明 |
|------|------|
| 数据来源 | 国际原油价格查询（1108-1），每小时整点更新 |
| 拉取节奏建议 | 每小时一次（与更新频率对齐），不要秒级轮询 |
| 展示要素 | 当前价、涨跌幅、今日开/高/低、发布时间 |
## How
### 步骤 1：后端定时拉取并缓存
```python
import requests, time, threading
APP_KEY = "YOUR_APPKEY"
URL = "https://route.showapi.com/1108-1"
CACHE = {}
def fetch(code="wti"):
r = requests.get(URL, params={"appKey": APP_KEY, "code": code}, timeout=10).json()
b = r["showapi_res_body"]
if b["ret_code"] != 0:
return None
CACHE[code] = {
"name": b["name"],
"now": b["nowPrice"],
"open": float(b["today_openPrice"]),
"high": float(b["todayMax"]),
"low": float(b["todayMin"]),
"rate": b["diff_rate"],
"time": b["time"],
}
return CACHE[code]
def scheduler():
while True:
fetch("wti")
fetch("blt")
time.sleep(3600) # 整点更新，每小时拉一次即可
threading.Thread(target=scheduler, daemon=True).start()
```
### 步骤 2：前端读取并展示（最小组件）
```html
<div id="oil-card">
<h3 id="oil-name">加载中…</h3>
<p>当前价：<span id="oil-now"></span> 美元/桶</p>
<p>涨跌：<span id="oil-rate"></span></p>
<p>今日区间：<span id="oil-low"></span> ~ <span id="oil-high"></span></p>
<small id="oil-time"></small>
</div>
<script>
async function render() {
const d = await (await fetch("/api/oil?code=wti")).json();
document.getElementById("oil-name").textContent = d.name;
document.getElementById("oil-now").textContent = d.now;
document.getElementById("oil-rate").textContent = d.rate;
document.getElementById("oil-low").textContent = d.low;
document.getElementById("oil-high").textContent = d.high;
document.getElementById("oil-time").textContent = "发布时间：" + d.time;
}
render();
</script>
```
**Node.js（fetch 拉取单个）**
```javascript
const APP_KEY = "YOUR_APPKEY";
async function fetchOil(code = "wti") {
const r = await fetch(
"https://route.showapi.com/1108-1?appKey=" + APP_KEY,
{
method: "POST",
headers: { "content-type": "application/x-www-form-urlencoded" },
body: "code=" + code,
signal: AbortSignal.timeout(10000),
}
).then((x) => x.json());
if (r.showapi_res_body.ret_code !== 0) throw new Error("失败");
return r.showapi_res_body;
}
```
## 返回示例与解析
看板所需字段均来自 `showapi_res_body`：`nowPrice`(数字)、`diff_rate`(含百分号的字符串)、`today_openPrice/todayMax/todayMin`(字符串)、`name`、`time`。完整字段见 [返回字段全解](https://www.showapi.com/guides/crude-oil-price-fields-1108)。
## 进阶 / 边界
- **别秒级轮询**：数据每小时整点更新，轮询再密也拿不到新值，只会浪费免费额度。
- **缓存是必须的**：看板读缓存、后端每小时刷新，详见 [免费档位下如何设计缓存节省调用成本](https://www.showapi.com/guides/crude-oil-price-cache-strategy-1108)。
- **类型**：`nowPrice` 数字可直接展示；其余价格字段字符串，建议统一转换后再渲染。
## FAQ
**Q：看板多久刷新一次合适？**
与接口更新频率对齐，每小时一次即可；前端可按需轮询你的本地缓存，不必直连接口。
**Q：能同时展示 WTI 和布伦特吗？**
可以，后端分别拉 `wti` 与 `blt` 两个快照，前端并排展示（注意免费档位调用次数）。
**Q：为什么我轮询拿到的价一直不变？**
数据每小时整点才更新，非实时行情；在两次整点之间拉取返回的是同一份快照，属正常。
**Q：展示时需要标注数据来源吗？**
建议标注"数据来自国际原油价格查询接口（每小时整点更新）"，提升可信度。
## 相关能力 / 下一步阅读
- [国际原油价格查询：免费档位下如何设计缓存节省调用成本？](https://www.showapi.com/guides/crude-oil-price-cache-strategy-1108)
- [国际原油价格查询：整点更新意味着什么？数据时效与缓存设计](https://www.showapi.com/guides/crude-oil-price-update-frequency-1108)
- [国际原油价格查询：WTI 与布伦特原油怎么选？code 参数实战](https://www.showapi.com/guides/crude-oil-price-wti-vs-brent-1108)
- **本系列共 12 篇**：查看[国际原油价格查询官方指南总目录](https://www.showapi.com/guides/crude-oil-price-guides-1108)
