ECharts折线图可清晰展示库存周转率时间序列变化，需将月份数组填入xAxis.data、数值数组填入series[0].data，确保数值为数字类型；同时在图旁添加动态高亮卡片显示当前值及环比变化，增强业务可读性。

直接用 ECharts 画一个带时间轴的折线图 + 当前值高亮卡片，就能清晰展示库存周转率报表。静态 HTML 页面完全够用，不需要额外框架或服务端渲染。

怎么把库存周转率数据塞进 ECharts 折线图

库存周转率是时间序列指标（比如“2025-01: 4.2；2025-02: 3.9…”），ECharts 的 line 图型最匹配。关键不是画图，而是让数据结构对得上：

• option.xAxis.data 填月份/季度数组，如 ['2025-01', '2025-02', '2025-03']
• option.series[0].data 填对应数值，如 [4.2, 3.9, 4.5]
• 别把字符串当数字传——"4.2" 会导致坐标轴错乱，必须用 parseFloat() 或直接写数字
• 如果后端返回的是对象数组（如 [{month: "2025-01", turnover: 4.2}]），前端需先用 .map() 拆出两个平行数组

为什么仪表盘里要加个“当前值”大卡片

周转率本身是个比率，业务方第一眼要看的是“现在是多少”“比上期涨了还是跌了”。光靠折线图不够直观：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 在折线图下方或右上角加一个 <div class="kpi-card">，显示 <code>4.3 + ↑0.2 箭头
• 计算环比：取最后两项数据做差，current - previous，正数标绿色，负数标红色
• 避免硬编码“上期”——用 data[data.length - 2] 动态取，防止数据少于 2 条时报错
• 这个卡片不依赖 ECharts 渲染周期，DOM 更新更快，用户感知更及时

接入真实库存接口时最容易卡在哪

本地静态数据跑得通，一接真实 API 就白屏或报错，90% 出在三处：

立即学习“前端免费学习笔记（深入）”；

• 跨域问题：Chrome 直接双击打开 index.html 会触发 file:// 协议限制，fetch 被拦截。必须起本地服务，比如 npx http-server 或 VS Code Live Server 插件
• 字段名不一致：后端可能叫 inventory_turnover_rate，而你代码里写的是 turnover，解构时用 const { inventory_turnover_rate: turnover } = item 显式映射
• 空数据兜底缺失：某个月没数据，后端返回 null 或 undefined，直接 push 进 data 数组会导致图表断点。加一层 if (item.turnover != null) 过滤

真正麻烦的不是画图，是让“库存周转率”这个业务概念，在前端不丢失语义地落地——月份对齐、单位统一（是否带 %）、小数位数（财务要求保留 2 位，但 ECharts 默认四舍五入到整数），这些细节一旦错位，业务方一眼就能挑出来。