Top
«

apache echarts-examples 离线部署攻略，离线开发的童鞋有福了

内部账号 发布于 阅读：50 私有分类

echarts官网demo界面，可以很方便的查询各种图表的制作方式和代码。但是某些离线场景下，就没那么方便了。

demo界面官网地址

 https://echarts.apache.org/examples/zh/index.html

离线部署的帖子很多，不是很老，就是执行不了。本文使用官方开源代码，全新编译，nginx部署，方便后面有需要的兄弟。

1.序目

阅读本文者，默认你本地已安转好nodejs、git、nginx等环境，并有一定的操作基础。

2.准备工作

      2.1 下载源码，在官方demo页面右上角，有githup图标，请注意，点击打开的不是echarts-examples的界面，需要在apache下重新搜索echarts，找到echarts-examples，链接为https://github.com/apache/echarts-examples，打不开的时候可以试试https://bgithub.xyz/apache/echarts-examples

        

#git clone 代码
git clone https://github.com/apache/echarts-examples

     2.2 阅读文档

image.png

2.3 编译代码并验证

按文档执行相关操作,如果顺利，在联网环境下你访问http://127.0.0.1/ 就已经能看见示例主页面了，如果提示403，可以尝试访问http://127.0.0.1/zh/index.html.示例页面查看也无问题。

#进入目录
cd echarts-examples
#安装依赖，必须--force
npm i --force
#编译代码
npm run compile:example
#将编译好的程序复制到nginx的html目录
cp ./public/*  ${nginx_root}/html

image.png

   

3.离线适配

3.1 下载引用的cdn资源。

因为官方示例引用了10几个cdn资源，当处于离线环境的时候，无法正常访问刚才部署的echarts-examples。（模拟可以尝试拔网线|开发人员工具断网等方式）。

image.png

我们需要找到项目引用的cdn资源文件，分两部分

3.1.1 html文件的直接引用资源

参考/html/zh/index.html，可以看到一共引用了7个资源文件，复制链接，将其下载到/html/wai/目录.最终文件大概如图，此图已包含js引用的资源

image.png

3.1.2 js文件加载的引用资源

需要浏览器的开发者工具，打开任意一个官方示例，开始录制网络日志。之后搜索https://fastly.jsdelivr.net

image.png

需要将这些资源文件分别下载下来，本文为方便也将其下载在/html/wai目录下，注意有些资源需要多级文件夹，比如

https://fastly.jsdelivr.net/npm/echarts/dist/echarts.min.js
 
需要将其保存在/html/wai/echarts/dist/下。其他类似。
 
tip:官方示例加载引用的三方js大部分相似，但是也有例外的，所以总共需要多少外部资源文件没去统计，按照3.1.1章节的图去下载，基本上大部分示例都可以运行了。也可以直接去文末下载整理好的buding包。
 

3.2 调整已编译好的程序。

总计需要调整七个文件，两类。

3.2.1 html类 ：分别为/html/zh/和/html/en/目录下的六个html文件，使用以下内容，替换原html文件中的head内容。

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="shortcut icon"
      href="../wai/favicon.png"
    />
    <title>ECharts Examples</title>
    <style>
      body {
        margin: 0;
      }
      ul,
      li {
        margin: 0;
        padding: 0;
      }
    </style>
    <link
      rel="stylesheet"
      href="../wai/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="../wai/index.min.css"
    />
    <script src="../wai/vue.min.js"></script>
    <script src="../wai/jquery.min.js"></script>
    <script src="../wai/bootstrap.min.js"></script>
    <script src="../wai/index.min.js"></script>
  </head>

3.2.2 js文件类 /html/js/example-bundle.js文件，调整代码2687行，用以下代码替换。

var JSDELIVR_ROOT = '../wai/';

3.3离线验证

可以尝试拔网线|开发人员工具断网等方式进行验证，打开本地连接http://127.0.0.1/zh/index.html 对各种示例依次验证，如有示例打不开，重复上述步骤，直到补充完资源文件即可。

3.4现成的文件下载

以下文件可直接下载后覆盖到nginx的html目录，点击下载非离线版本程序。点击下载离线运行补丁文件

下载后直接将内容释放到启动好的nginx html目录下访问即可。

 

 

祝离线开发的同学工作顺利。

echarts 离线部署