ECharts 离线部署指南4步在无网环境下跑起交互式图表【免费下载链接】echartsApache ECharts is a powerful, interactive charting and data visualization library for browser项目地址: https://gitcode.com/gh_mirrors/echarts16/echartsApache ECharts 是一个纯 JavaScript 编写的图表与数据可视化库不依赖任何网络接口天然适合做ECharts 离线部署。本文面向刚接触 ECharts 的开发者从拿到库文件开始讲到本地渲染第一张图表、利用仓库自带示例库扩展最后给出断网环境常见的 4 个坑。读完你可以独立在内网、演示机或涉密环境中交付一个可交互的可视化页面。 先想清楚离线部署到底要解决什么很多新手一上来就 clone 仓库其实先想明白三件事ECharts 是纯前端库所有渲染发生在浏览器本地图表数据、样式、字体都不需要联网请求离线和在线的可视化效果完全一致。离线部署的本质是搬运文件把预构建的dist/echarts.min.js和可选的theme/、i18n/资源复制到你的本地项目用script标签按相对路径引入即可。不需要 Node 环境最终用户只需要一个浏览器无需安装任何东西。想进一步了解项目定位和构建方式可以看仓库的 README.md。 第一步获取 ECharts 离线包仓库里src/是 TypeScript 源码直接引用并不方便。有两种拿预构建文件的方式方式一从 npm 包获取推荐。执行npm install echarts后node_modules/echarts/dist/下就是全部产物拷贝dist目录即可。方式二从源码构建。仓库本身不提供现成的dist/目录需要本地构建一次npm install npm run build # 产物输出到 dist/ 目录构建完成后dist/下有三个关键文件按需选择文件内容适用场景echarts.min.js全功能压缩版生产环境首选echarts.js全功能未压缩版调试排查echarts.simple.js精简版仅含折线、柱状、饼图 Canvas 渲染器页面体积敏感的场景精简版的组成可以直接从源码入口 src/echarts.simple.ts 看到它只注册了 Line、Bar、Pie 三种图表适合只需要基础图表的离线页面。 第二步用本地文件渲染第一张图表把dist/echarts.min.js复制到项目里例如lib/目录写一个 HTML 文件核心就三步给容器 → 引脚本 →init加setOptiondiv idchart stylewidth:600px;height:400px/div script srclib/echarts.min.js/script script var chart echarts.init(document.getElementById(chart)); chart.setOption({ title: { text: 离线图表 }, tooltip: {}, xAxis: { data: [衬衫, 羊毛衫, 雪纺衫, 裤子, 高跟鞋, 袜子] }, yAxis: {}, series: [{ name: 销量, type: bar, data: [5, 20, 36, 10, 10, 20] }] }); /script双击这个 HTML 文件即可运行tooltip、图例、缩放等交互全部可用。主题与国际化theme/目录有 20 多个内置主题如 macarons、dark-bluei18n/目录覆盖 20 多种语言见 i18n/。用法是先引入脚本再把主题名和语言代码传给initscript srctheme/macarons.js/script script srci18n/langZH.js/script script var chart echarts.init( document.getElementById(chart), macarons, { locale: ZH } ); /script本地资源也可以直接参与渲染。ECharts 的 custom 系列能把任意本地图片画进图表仓库示例 test/custom.html 就把这张本地图片渲染进了图表单元格——断网环境下照样显示这也是数据不出内网场景的典型做法 第三步把 test 目录当成离线示例库这是仓库里最被低估的部分test/ 目录下有 200 多个可直接运行的 HTML 示例覆盖柱状图、地图、关系图、Sankey、日历、大数据流式渲染等几乎所有图表类型。它们全部通过相对路径引用本地脚本断网状态下双击就能打开。使用建议打开 test/-cases.html 可以看到全部示例的索引页按名称找你要的图表类型。每个 HTML 内的 option 配置就是现成的离线模板改成自己的数据路径即可。大数据量场景可参考 test/bar-large.html它演示了百万级数据的渲染优化方式。这比对着文档从零写要快得多先跑通一个相近的示例再删减配置。⚠️ 避坑指南断网环境最容易踩的 4 个坑图表区域空白控制台无报错90% 是容器没有宽高。#chart必须显式设置width和height父级布局用 flex 时注意给容器确定尺寸。主题没生效主题脚本必须先于echarts.init加载且init的第二个参数要传主题名字符串只引脚本不传名字不会应用。大图表卡顿离线环境没有网络掩盖延迟性能问题更明显。优先用echarts.min.js而不是未压缩版数据超过 5000 点时开启dataZoom缩放窗口或做聚合降采样。路径全部用相对路径离线部署后任何 CDN 域名都不可达包括示例里可能出现的字体、地图 GeoJSON。检查script标签和image字段的src是否都指向本地文件浏览器断网后打开 DevTools 的 Network 面板确认没有任何failed的远程请求。✅ 行动清单从 npm 包或npm run build拿到dist/echarts.min.js复制到项目lib/目录写一个含固定宽高容器的 HTMLinitsetOption跑通第一张图表按需引入theme/主题和i18n/语言包注意脚本加载顺序在断网状态下打开 test/-cases.html 索引页挑一个最接近需求的示例做模板断网自检DevTools 里确认无远程请求、容器有宽高、主题语言参数已传入【免费下载链接】echartsApache ECharts is a powerful, interactive charting and data visualization library for browser项目地址: https://gitcode.com/gh_mirrors/echarts16/echarts创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考