echarts 文档离线部署

方法一

不用构建最简单方法

1
git clone https://gitee.com/cxvh/echarts-website.git
  • 批量替换https://echarts.apache.org/为http://localhost:3000/
  • 复制粘贴文件
    • echarts-website/zh/asset —> echarts-website/asset
    • echarts-website/zh/css —> echarts-website/asset
    • echarts-website/zh/dist —> echarts-website/asset
    • echarts-website/zh/images —> echarts-website/asset
    • echarts-website/zh/js —> echarts-website/asset
1
2
3
npm install --global serve
cd echarts-website
serve -p 3000

方法二

拉源码手动构建

环境准备

准备Ubuntu环境

  • 虚拟机：VMWare 或者 Hyper-V

  • Ubuntu.ios下载最新的，当前最新ubuntu-24.04-desktop-amd64.iso

Ubuntu环境准备

  • 切换root账号->su root

  • 安装git，（拉取代码用）

  • 安装n(node版本管理工具)

验证环境安装OK

  • git -v

  • node -v

  • npm -v

安装node

  • n install 20
  • n install 18
  • n install 16

拉取代码

echarts的git仓库，全部复制粘贴到命令行

1
2
3
4
5
6
7
8
cd ~
mkdir echarts && cd echarts
git clone https://gitee.com/cxvh/echarts-website.git
git clone https://gitee.com/cxvh/echarts-www.git
git clone https://gitee.com/cxvh/echarts-examples.git
git clone https://gitee.com/cxvh/echarts-doc.git
git clone https://gitee.com/cxvh/echarts-theme-builder.git
git clone https://gitee.com/cxvh/echarts-handbook.git

构建

  • 检查网络是否能打开 github.com

  • 如果npm i失败，多尝试几次

echarts-www 1

环境 node20

  • 切换node版本，输入n，按上下选择20，按enter选中切换

  • 修改替换文件~/echarts/echarts-www/config/env.localsite.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const path = require('path');
const config = require('./common');

config.host = 'http://localhost:3000';
// config.host = 'http://localhost:8000/echarts/echarts-website';

config.cdnPayRootMap = {
    zh: config.host,
    en: 'http://localhost:3000'
};
config.cdnFreeRootMap = {
    zh: config.host,
    en: config.host
};

config.galleryPath = 'http://localhost:3000/examples/';
config.releaseDestDir = path.resolve(__dirname, '../../echarts-website');

module.exports = config;
1
2
3
4
cd ~/echarts/echarts-www
npm i
# npm run localsite
node ./bin/build.js --env localsite --clean

echarts-theme-builder

环境 node17

  • 切换node版本，输入n，按上下选择17，按enter选中切换
1
2
3
cd ~/echarts/echarts-theme-builder
npm i
npm run release

echarts-doc

环境 node16

  • 切换node版本，输入n，按上下选择16，按enter选中切换

  • 修改替换文件~/echarts/echarts-doc/config/env.localsite.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const path = require('path');

module.exports = {
    galleryViewPath: 'http://localhost/echarts-website/examples/${lang}/view.html?c=',
    galleryEditorPath: 'http://localhost/echarts-website/examples/${lang}/editor.html?c=',
    handbookPath: 'http://localhost/echarts-website/handbook/${lang}/',
    websitePath: './',

    imagePath: 'asset/img/',
    gl: {
        imagePath: 'asset/gl/img/'
    },

    releaseDestDir: path.resolve(__dirname, '../../echarts-website'),
    ecWWWGeneratedDir: path.resolve(__dirname, '../../echarts-www/_generated')
};
  • 修改替换js函数~/echarts/echarts-doc/build.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function copySite() {

    // Copy js and css of doc site.
    for (let lang of languages) {
        const jsSrcPath = path.resolve(projectDir, `public/${lang}/js/doc-bundle.js`);
        const cssSrcDir = path.resolve(projectDir, `public/${lang}/css`);
        const jsDestPath = path.resolve(config.releaseDestDir, `${lang}/js/doc-bundle.js`);
        fse.copySync(jsSrcPath, jsDestPath);
        console.log(chalk.green(`js copied to: ${jsDestPath}`));

        const cssDestDir = path.resolve(config.releaseDestDir, `${lang}/css`);
        fse.copySync(cssSrcDir, cssDestDir);
        console.log(chalk.green(`css copied to: ${cssDestDir}`));
    }

    console.log('Copy site done.');
}

  • 修改文件~/echarts/echarts-doc/package.json
1
2
3
4
5
cross-env NODE_OPTIONS=--openssl-legacy-provider

改为

cross-env
  • 开始构建
1
2
3
4
cd ~/echarts/echarts-doc
npm i
npm run build:site
npm run localsite

echarts-examples

环境 node16

  • 切换node版本，输入n，按上下选择16，按enter选中切换

  • 修改文件~/echarts/echarts-examples/src/explore/ExampleCard.vue 68行

1
2
3
4
5
return './editor.html?' + hash.join('&');

// 改为

return './zh/editor.html?' + hash.join('&');
  • 修改文件 ~/echarts/echarts-examples/package.json
1
2
3
4
5
cross-env NODE_OPTIONS=--openssl-legacy-provider

// 改为

cross-env
  • 修改替换文件 ~/echarts/echarts-examples/build/minify-loader.js
1
2
3
4
// 压缩示例代码，不删报错，删了其他代码文件很大，感兴趣同学自行处理此处报错
module.exports = function minifyLoader(source, map, meta) {
  return source;
};
  • 开始构建
1
2
3
4
cd ~/echarts/echarts-examples
npm i
npm run localsite
npm run release

echarts-www 2

环境 node20

  • 切换node版本，输入n，按上下选择20，按enter选中切换
1
2
3
4
cd ~/echarts/echarts-www/bin
node ./releasePages.js
cd ~/echarts/echarts-www
node bin/build.js --env localsite

echarts-handbook

环境 node16

  • 切换node版本，输入n，按上下选择16，按enter选中切换

  • 修改替换文件~/echarts/echarts-handbook/configs/config.localsite.js

1
2
3
4
5
6
7
8
9
10
11
export default {
  routerBase: '/handbook',
  rootPath: 'http://localhost:3000/handbook',
  exampleViewPath:
    'http://localhost:3000/examples/${lang}/view.html?c=',
  exampleEditorPath:
    'http://localhost:3000/examples/${lang}/editor.html?c=',
  mainSitePath: 'http://localhost:3000/',
  optionPath: 'http://localhost:3000/option.html#',
  gitRepo: 'apache/echarts-handbook'
}
  • 修改替换js函数~/echarts/echarts-handbook/build/generate-contributors.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
async function ghWeb() {
  const GH_CONTRIBUTOR_URL = 'https://github.com/apache/echarts-handbook/contributors/master/'
  // All contributors
  const GH_CONTRIBUTOR_LIST_URL = 'https://github.com/apache/echarts-handbook/contributors-list/master/'
  const total = paths.length
  const tasks = new Array(total)
  for (let i = 0; i < total; ++i) {
    ((i) => {
      const path = paths[i].slice(2)
      // console.log('fetching contributors of path', path)
      // tasks[i] = fetch(GH_CONTRIBUTOR_LIST_URL + path)
      //   .then(response => response.text())
      //   .then(async html => {
      //     let $ = cheerio.load(html)
      //     let contributors
      //     const links = $('li > a')
      //     if (links.length) {
      //       contributors = links.map((i, link) => $(link).attr('href').slice(1)).toArray()
      //     } else {
      //       // for special case, for example, ghost account
      //       html = await (await fetch(GH_CONTRIBUTOR_URL + path)).text()
      //       $ = cheerio.load(html)
      //       let creator = $('span.Link--primary').text()
      //       if (creator && (creator = creator.trim())) {
      //         contributors = [creator]
      //       }
      //     }
      //     entries[path] = contributors = contributors || []
      //     console.log('fetched contributors of path', path, contributors)
      //   })
      //   .catch(e => {
      //     console.error('failed to fetch contributors of path', path, e)
      //   })
    })(i)
  }
  const results = await Promise.allSettled(tasks)
  const errorCount = results.filter(r => r.status === 'rejected').length
  console.log(`
    All Done!
      ${total} Total, 
      ${total - errorCount} Successful,
      ${errorCount} Errors`
  )
  console.log('\nResults', entries)
  Object.keys(entries).length && writeToFile()
}
  • 修改文件~/echarts/echarts-handbook/package.json
1
2
3
4
5
cross-env NODE_OPTIONS=--openssl-legacy-provider

改为

cross-env
  • 开始构建
1
2
3
4
5
6
7
cd ~/echarts/echarts-handbook
npm i
rm -rf dist
rm -rf .nuxt
npm run build:localsite
rm -rf ../echarts-www/handbook
cp -R ./dist ../echarts-www/handbook

echarts-website

cd ~/echarts/echarts-website

  • 复制粘贴文件
    • ./zh/asset —> ./asset
    • ./zh/css —> ./asset
    • ./zh/dist —> ./asset
    • ./zh/images —> ./asset
    • ./zh/js —> ./asset
1
2
npm i serve -g
serve ~/echarts/echarts-website -p 3000