WKWebView加载H5图表白屏主因是iOS安全策略限制，需用loadFileURL并配置allowingReadAccessTo；传参用evaluateJavaScript在didFinish后执行；事件回传靠WKScriptMessageHandler；高DPI适配需手动处理devicePixelRatio。
WKWebView 加载 HTML5 图表页面时白屏或图表不渲染
多数情况不是图表库本身问题，而是 iOS 的 WKWebView 默认禁用本地文件的 JavaScript 执行或跨域资源加载。尤其当你用 file:// 协议直接加载本地 index.html（含 Chart.js 或 ECharts），iOS 14+ 会静默阻止 fetch、XMLHttpRequest 和部分 canvas 渲染逻辑。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 改用
loadFileURL(_:allowingReadAccessTo:)加载 HTML，并将图表资源（JS/CSS/数据 JSON）放在Bundle Resources中，同时把资源目录路径传给allowingReadAccessTo: - 避免在 HTML 中写
src="https://cdn.jsdelivr.net/npm/chart.js"—— 需提前下载chart.min.js放进项目，再用相对路径引用 - 若图表依赖外部 API 数据，必须配置
WKWebViewConfiguration的websiteDataStore和启用allowsInlineMediaPlayback = true（虽和图表无关，但某些图表库初始化时会触发媒体上下文检查）
从 Swift 向 HTML5 图表传参：用 evaluateJavaScript(_:completionHandler:) 安全注入数据
不能靠 URL 参数（长度限制 + 编码麻烦），也不该用 stringByEvaluatingJavaScriptFromString（已废弃）。正确做法是等页面 DOMContentLoaded 后，用 evaluateJavaScript 把 Swift 数据转成 JS 对象。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保 HTML 中定义好全局接收函数，例如
window.receiveChartData = function(data) { new Chart(...); } - Swift 端用
JSONSerialization.data(withJSONObject:)转成 JSON 字符串，再拼成 JS 调用语句："window.receiveChartData(\(jsonString));" - 务必在
webView(_:didFinish:)回调中执行，否则 JS 环境未就绪，调用直接失败且无报错 - 注意 iOS 16.4+ 对
evaluateJavaScript的并发限制：同一时刻只允许一个未完成调用，多次快速调用需排队或加锁
图表点击事件回传到 Swift：用 WKScriptMessageHandler 接收 JS 主动通知
HTML5 图表本身不支持原生回调，必须由 JS 主动发消息。比如 Chart.js 的 onClick 里调用 window.webkit.messageHandlers.chartEvent.postMessage(...)，Swift 才能收到。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 注册 handler 时名字必须完全一致：
userContentController.add(self, name: "chartEvent")，JS 里也必须用"chartEvent" - JS 发送的数据会被自动序列化为
[String: Any]，但复杂对象（如 Date、Function）会丢失；建议只传基础类型或扁平 JSON - 别在 handler 里做耗时操作（如刷新 UI 大量 Cell），容易卡住 WebKit 的 UI 线程；需要异步处理请用
DispatchQueue.main.async - 如果图表库使用了
requestIdleCallback或ResizeObserver，iOS 15.4 以下可能不兼容，回传前先用if (typeof window.webkit !== 'undefined')做存在性判断
iOS 17+ 下 ECharts 渲染模糊或缩放异常
根本原因是 WKWebView 在高 DPI 屏幕上默认按物理像素渲染 canvas，而 ECharts 默认用 CSS 像素尺寸初始化，导致 canvas 缓冲区分辨率不足，图像发虚。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在 HTML 的
中强制设置 viewport： - ECharts 初始化前，用 JS 获取
window.devicePixelRatio，手动放大 canvas 的style.width/style.height，并同步设置canvas.width/canvas.height为两倍值 - 更稳妥的做法：在 Swift 中通过
evaluateJavaScript("window.devicePixelRatio")拿到比率后，再传给图表初始化逻辑，避免 JS 端读取时机不对
