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 离线部署——内网、演示机、断网机房都能直接用。本文面向第一次在内网环境交付交互式图表的开发者内容覆盖从拿到预构建文件、接好主题语言包到三行代码点亮第一张图、从仓库自带示例里挑模板最后逐条排查断网时最常遇到的 4 个问题。读完你可以独立完成一个不依赖网络、不依赖 Node、不依赖 CDN 的可视化页面交付。 动手前先想清楚离线图表的三条边界在碰任何文件之前先确认三件事能省掉大量弯路完全不涉及联网。ECharts 是纯前端库浏览器在本地完成全部绘制图表数据、样式、字体都不需要发起任何网络请求——离线和在线看到的画面是一样的。离线部署的本质是搬运文件。把预构建的dist/echarts.min.js和可选的theme/、i18n/资源目录拷进自己的项目用script标签按相对路径引用即可。使用端不需要 Node 环境。最终使用者只需要一个浏览器不用安装任何东西没有构建环节。如果想进一步了解项目定位与构建机制可以翻一下仓库根目录的README.md。 离线包获取的最快方式npm 还是源码构建你要的是预构建文件而不是src/下的 TypeScript 源码——直接引用源码并不方便还得自己走一遍构建。拿dist/有两条路任选其一方式操作适合场景从 npm 包取npm install echarts整份拷贝node_modules/echarts/dist/有 npm 环境时最省事的走法源码本地构建npm install后执行npm run build产物输出到dist/装不了 npm 包或需要定制打包内容时dist/里一共三个文件按场景挑文件内容适用场景echarts.min.js全功能压缩版生产交付首选echarts.js全功能未压缩版调试排查问题echarts.simple.js仅 Line、Bar、Pie 三种图表 Canvas 渲染器在意页面体积的场景精简版到底砍掉了什么看源码入口 src/echarts.simple.ts 就能确认它只注册了三种基础图表够一个只需基础图表的离线页面用。 主题与语言包怎么接两个脚本的加载顺序theme/目录里躺着 20 多个现成主题macarons、dark-blue 这类i18n/ 目录覆盖 20 多种语言全是单个 JS 文件不需要任何构建。用法只有一条铁律两个脚本必须在echarts.init之前加载主题名还要显式传给init的第二个参数script srctheme/macarons.js/script script srci18n/langZH.js/script script var chart echarts.init(dom, macarons, { locale: ZH }); /script引了脚本却不传主题名等于没引——这条在下面的避坑清单里还会出现一次。接好之后就可以画第一张图了。⚡ 验证落地的最短路径三步画好第一张离线图整页只需要三步给容器 → 引脚本 →initsetOption。把下面这份代码存成一个 HTML 文件双击打开就能看到图div idchart stylewidth:600px;height:400px/div script srclib/echarts.min.js/script script var chart echarts.init(document.getElementById(chart)); chart.setOption({ xAxis: { type: category, data: [一月, 二月, 三月, 四月] }, yAxis: {}, series: [{ type: line, data: [820, 932, 901, 1290] }] }); /scripttooltip、图例、缩放这些交互全都在线可用。这份十几行的文件可以直接当作离线交付的冒烟测试图能画出来说明文件搬运这一步没问题。 把 test/ 的 200 示例当离线模板仓库里有个多数人从不打开的宝藏test/目录下有 200 多个可直接运行的 HTML 示例覆盖柱状图、地图、关系图、Sankey、日历、大数据流式渲染等几乎所有图表类型。它们全部走相对路径引用本地脚本断网状态下双击就能打开。几条使用建议索引页是 test/-cases.html按名字找到你要的图表类型。每个 HTML 里的 option 配置就是现成的离线模板——先找一个相近的跑通换成自己的数据再把用不上的删掉比对着文档从零写快得多。大数据量场景看 test/bar-large.html演示了百万级数据怎么渲染、怎么优化。本地资源还能直接进图表custom 系列可以把任意本地图片画进图表示例 test/custom.html 就是这么做到的——断网环境里照样显示是数据不出内网场景的典型做法⚠️ 断网环境最容易出的 4 个问题离线之后没有任何网络可以掩盖问题下面四条是被问得最多的图表区域空白控制台也没有报错。几乎总是容器没有宽高传给init的那个 div 必须显式带width和height父级用 flex 布局时还要确认容器没有被布局挤压成 0。主题脚本引了却没生效。主题脚本要排在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/语言包确认脚本加载顺序在init之前、主题名和 locale 已传入从test/索引页挑一个最接近需求的示例当模板换成自己的数据断网自检DevTools 无 failed 远程请求、容器有宽高、交互正常【免费下载链接】echartsApache ECharts is a powerful, interactive charting and data visualization library for browser项目地址: https://gitcode.com/gh_mirrors/echarts16/echarts创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/26 1:23:11 · 阅读 1.2k ECharts 离线部署完整指南：用 4 个问题在无网环境跑起交互式图表
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 离线部署——内网、演示机、断网机房都能直接用。本文面向第一次在内网环境交付交互式图表的开发者内容覆盖从拿到预构建文件、接好主题语言包到三行代码点亮第一张图、从仓库自带示例里挑模板最后逐条排查断网时最常遇到的 4 个问题。读完你可以独立完成一个不依赖网络、不依赖 Node、不依赖 CDN 的可视化页面交付。 动手前先想清楚离线图表的三条边界在碰任何文件之前先确认三件事能省掉大量弯路完全不涉及联网。ECharts 是纯前端库浏览器在本地完成全部绘制图表数据、样式、字体都不需要发起任何网络请求——离线和在线看到的画面是一样的。离线部署的本质是搬运文件。把预构建的dist/echarts.min.js和可选的theme/、i18n/资源目录拷进自己的项目用script标签按相对路径引用即可。使用端不需要 Node 环境。最终使用者只需要一个浏览器不用安装任何东西没有构建环节。如果想进一步了解项目定位与构建机制可以翻一下仓库根目录的README.md。 离线包获取的最快方式npm 还是源码构建你要的是预构建文件而不是src/下的 TypeScript 源码——直接引用源码并不方便还得自己走一遍构建。拿dist/有两条路任选其一方式操作适合场景从 npm 包取npm install echarts整份拷贝node_modules/echarts/dist/有 npm 环境时最省事的走法源码本地构建npm install后执行npm run build产物输出到dist/装不了 npm 包或需要定制打包内容时dist/里一共三个文件按场景挑文件内容适用场景echarts.min.js全功能压缩版生产交付首选echarts.js全功能未压缩版调试排查问题echarts.simple.js仅 Line、Bar、Pie 三种图表 Canvas 渲染器在意页面体积的场景精简版到底砍掉了什么看源码入口 src/echarts.simple.ts 就能确认它只注册了三种基础图表够一个只需基础图表的离线页面用。 主题与语言包怎么接两个脚本的加载顺序theme/目录里躺着 20 多个现成主题macarons、dark-blue 这类i18n/ 目录覆盖 20 多种语言全是单个 JS 文件不需要任何构建。用法只有一条铁律两个脚本必须在echarts.init之前加载主题名还要显式传给init的第二个参数script srctheme/macarons.js/script script srci18n/langZH.js/script script var chart echarts.init(dom, macarons, { locale: ZH }); /script引了脚本却不传主题名等于没引——这条在下面的避坑清单里还会出现一次。接好之后就可以画第一张图了。⚡ 验证落地的最短路径三步画好第一张离线图整页只需要三步给容器 → 引脚本 →initsetOption。把下面这份代码存成一个 HTML 文件双击打开就能看到图div idchart stylewidth:600px;height:400px/div script srclib/echarts.min.js/script script var chart echarts.init(document.getElementById(chart)); chart.setOption({ xAxis: { type: category, data: [一月, 二月, 三月, 四月] }, yAxis: {}, series: [{ type: line, data: [820, 932, 901, 1290] }] }); /scripttooltip、图例、缩放这些交互全都在线可用。这份十几行的文件可以直接当作离线交付的冒烟测试图能画出来说明文件搬运这一步没问题。 把 test/ 的 200 示例当离线模板仓库里有个多数人从不打开的宝藏test/目录下有 200 多个可直接运行的 HTML 示例覆盖柱状图、地图、关系图、Sankey、日历、大数据流式渲染等几乎所有图表类型。它们全部走相对路径引用本地脚本断网状态下双击就能打开。几条使用建议索引页是 test/-cases.html按名字找到你要的图表类型。每个 HTML 里的 option 配置就是现成的离线模板——先找一个相近的跑通换成自己的数据再把用不上的删掉比对着文档从零写快得多。大数据量场景看 test/bar-large.html演示了百万级数据怎么渲染、怎么优化。本地资源还能直接进图表custom 系列可以把任意本地图片画进图表示例 test/custom.html 就是这么做到的——断网环境里照样显示是数据不出内网场景的典型做法⚠️ 断网环境最容易出的 4 个问题离线之后没有任何网络可以掩盖问题下面四条是被问得最多的图表区域空白控制台也没有报错。几乎总是容器没有宽高传给init的那个 div 必须显式带width和height父级用 flex 布局时还要确认容器没有被布局挤压成 0。主题脚本引了却没生效。主题脚本要排在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/语言包确认脚本加载顺序在init之前、主题名和 locale 已传入从test/索引页挑一个最接近需求的示例当模板换成自己的数据断网自检DevTools 无 failed 远程请求、容器有宽高、交互正常【免费下载链接】echartsApache ECharts is a powerful, interactive charting and data visualization library for browser项目地址: https://gitcode.com/gh_mirrors/echarts16/echarts创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考