最可控直接用 绘制基金净值折线图，因其可精确控制坐标轴刻度、日期对齐、数值精度（保留4位小数）及响应式缩放，避免第三方库自动缩放掩盖微小但关键波动（如单日涨跌0.015%）。
用 canvas 绘制基金净值折线图最可控
直接用 而不是 ECharts 或 Chart.js，是因为基金净值数据量通常不大（几百条以内），且需精确控制坐标轴刻度、日期对齐、数值精度（比如保留 4 位小数）、以及响应式缩放行为。第三方库默认的自动缩放和 tooltip 格式容易掩盖净值微小但关键的波动（如单日涨跌 0.015%）。
实操建议：
- 用
new Date()解析基金日期字段（格式必须为"2024-06-28"或"2024/06/28"，避免使用带时分秒的字符串，否则Date.parse()在 Safari 下可能返回NaN） - X 轴按日期等距分布，不按时间戳线性映射——因为节假日无数据，强行线性会导致“跳空”被拉平；应先提取所有日期，再用索引作横坐标
- Y 轴范围不能简单取
Math.min()/Math.max()：需扩展 2%～3%，否则首尾点紧贴边框，视觉上误判趋势强度 - 绘制前用
ctx.clearRect(0, 0, canvas.width, canvas.height)清屏，否则 resize 后重绘会残留旧线条
基金净值数据从哪里来？别硬爬天天基金网
天天基金网接口（如 https://api.fund.eastmoney.com/f10/lsjz?fundCode=000001...）已加签名校验，且返回 JSON 中的 LSJZList 字段是倒序（最新在前），前端直接用会把走势画反。更稳妥的做法是走合规渠道或模拟真实场景：
- 若页面用于内部系统，建议后端统一调用中证指数公司或中国结算的开放 API，返回标准
date+nav（单位：元）数组，避免前端处理时区、复权、暂停申赎标记等逻辑 - 若仅为演示，可本地建一个
fund-data.json，结构为：[{"date":"2024-06-01","nav":1.2345},{"date":"2024-06-02","nav":1.2367},...]，用fetch('./fund-data.json')加载，注意设置Cache-Control: no-cache防止浏览器缓存旧净值 - 切勿在前端拼接带
callback=xxx的 JSONP 请求——现代基金接口已不支持，且存在 XSS 风险
toFixed(4) 显示净值但别用它做计算
基金净值常需显示为 1.2345 这种格式，但 parseFloat(val.toFixed(4)) 会引入浮点误差（例如 1.0055.toFixed(4) 在某些 Chrome 版本返回 "1.0054"）。显示和计算必须分离：
- 渲染到 DOM 时用
nav.toFixed(4)，仅用于文本内容 - 所有坐标换算、斜率判断、涨跌幅计算，一律用原始 Number 类型（如后端返回的
1.2345000000000001）参与运算 - Y 轴标签文字仍用
toFixed(4)，但对应的实际像素位置由未截断数值决定，否则会出现“标签写的是 1.2345，线却画在 1.23447 的位置”这种错位 - 如果需高精度比较（如判断是否创新高），用
Math.abs(a - b) ，而非a === b
移动端触摸拖拽看历史细节，但别忽略 click 兼容
用户想左右滑动查看长周期走势，touchstart/touchmove 是必须的，但只写 touch 事件会丢失 PC 端鼠标操作，且 iOS Safari 的 touchend 偶发不触发：
- 同时监听
mousedown/mousemove/mouseup和touchstart/touchmove/touchend，用同一套偏移量逻辑 - 阻止
touchmove默认行为（e.preventDefault()），否则页面会跟着滑动，但仅在 canvas 区域内阻止，避免影响页面其他滚动 - 记录起始
clientX，每次移动计算 delta，更新scrollOffset变量，重绘时不改变数据，只调整可见窗口的起始索引 - 松手后加个 300ms 内的
click判断：若位移
基金净值图表真正的难点不在画线，而在于日期对齐的语义准确性、浮点显示与计算的严格分离、以及拖拽交互中不丢失原始数据分辨率——这些地方一松懈，用户就可能把 0.001% 的波动看成趋势拐点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
