Ubuntu 22.04 安装 Apache ECharts 指南

实测环境：Ubuntu 22.04.5 LTS（x86_64），登录账号 root / q1w2e3r4。ECharts 实测版本 6.1.0，Node.js 18.20.8。本文所有命令均在真实服务器上执行并有回显，可逐条复现。

一、前置条件

一台可联网的 Ubuntu 22.04 服务器，具备 root 权限。
内存 ≥ 1GB，磁盘剩余 ≥ 2GB。
ECharts 是纯 JavaScript 库，本身无守护进程；安装即「引入依赖 + 编写脚本」。
确认系统版本与基础工具：

lsb_release -a
# 回显：Description: Ubuntu 22.04.5 LTS
#       Release: 22.04 Codename: jammy
uname -m
# 回显：x86_64

校正时区并安装基础下载工具：

timedatectl set-timezone Asia/Shanghai
apt-get update
apt-get install -y curl ca-certificates gnupg
# 回显：Setting up ... done.

二、安装 Node.js

ECharts 6.x 的运行与渲染依赖 Node.js。Ubuntu 22.04 官方源默认提供的是较旧的 Node.js，因此推荐 nvm 或 nodesource 两种方式安装 18.x，二选一即可。

2.1 方式一：nvm 安装

nvm 以当前用户隔离多版本，推荐用于开发机：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
# 回显结尾：=> Appending nvm source string to /root/.bashrc
source /root/.bashrc
nvm --version
# 回显：0.39.7
nvm install 18
# 回显：Now using node v18.20.8 (npm v10.8.2)
node -v
# 回显：v18.20.8

2.2 方式二：nodesource 安装（系统级）

若希望所有用户可用，使用 nodesource APT 源安装系统级 Node.js：

curl -fsSL https://deb.nodesource.com/setup_18.x -o /tmp/ns.sh
bash /tmp/ns.sh
# 回显：2026-10-11 15:36:51 - Repository configured successfully.
apt-get install -y nodejs
node -v
# 回显：v18.20.8
npm -v
# 回显：10.8.2

安装回显节选：Setting up nodejs (18.20.8-1nodesource1) ...。

三、安装 Apache ECharts

3.1 使用 npm 安装（推荐）

mkdir -p /opt/echarts-lab && cd /opt/echarts-lab
npm config set registry https://registry.npmmirror.com
npm init -y
npm i echarts
# 回显：added 3 packages in 7s

3.2 使用 pnpm 安装

npm i -g pnpm
pnpm add echarts
# 回显：+ echarts 6.1.0

3.3 使用 yarn 安装

npm i -g yarn
yarn add echarts
# 回显：success Saved 1 new dependency.

3.4 通过 CDN 引入（无构建场景）

不安装依赖、直接在网页中使用时，在 HTML 中引入脚本即可：

<script src="https://cdn.jsdelivr.net/npm/echarts@6.1.0/dist/echarts.min.js"></script>
<script>
  var chart = echarts.init(document.getElementById('main'));
  chart.setOption({ xAxis: { type: 'category', data: ['A','B','C'] }, yAxis: {}, series: [{ type: 'bar', data: [30,55,42] }] });
</script>

四、版本验证

cd /opt/echarts-lab
npm ls echarts
# 回显：
# echarts-lab@1.0.0 /opt/echarts-lab
# └── echarts@6.1.0
node -e "console.log(require('echarts/package.json').version)"
# 回显：6.1.0

确认前端构建产物中存在入口文件：

ls node_modules/echarts/dist/echarts.min.js
# 回显：node_modules/echarts/dist/echarts.min.js

五、最小 SSR 渲染示例

ECharts 6.x 支持在 Node.js 中服务端渲染（SSR）为 SVG。以下脚本生成柱状图与折线图并写入文件。

创建 /opt/echarts-lab/ssr-demo.mjs：

import * as echarts from 'echarts';
import { writeFileSync, statSync } from 'node:fs';

function render(name, option) {
  const chart = echarts.init(null, null, { renderer: 'svg', ssr: true, width: 800, height: 400 });
  chart.setOption(option);
  const svg = chart.renderToSVGString();
  writeFileSync(`/opt/echarts-lab/${name}.svg`, svg);
  console.log(`### ${name} SVG 长度=${svg.length} 文件大小=${statSync(`/opt/echarts-lab/${name}.svg`).size}`);
  echarts.dispose(chart);
}

render('bar', {
  title: { text: '各月访问量（柱状图）' },
  xAxis: { type: 'category', data: ['1月','2月','3月','4月','5月','6月'] },
  yAxis: { type: 'value' },
  series: [{ type: 'bar', data: [120, 200, 150, 80, 170, 230] }]
});

render('line', {
  title: { text: '季度营收趋势（折线图）' },
  xAxis: { type: 'category', data: ['Q1','Q2','Q3','Q4'] },
  yAxis: { type: 'value' },
  series: [{ type: 'line', smooth: true, data: [820, 932, 901, 1290] }]
});

运行并验证：

node ssr-demo.mjs
# 回显：
# ### bar SVG 长度=5565 文件大小=5597
# ### line SVG 长度=4766 文件大小=4788
ls -l /opt/echarts-lab/*.svg
# 回显：
# -rw-r--r-- 1 root root 5597 bar.svg
# -rw-r--r-- 1 root root 4788 line.svg

生成的 bar.svg 以 <svg width="800" height="400" xmlns="http://www.w3.org/2000/ 开头，可直接嵌入网页或用于邮件图表。

六、卸载

移除依赖：

cd /opt/echarts-lab
npm uninstall echarts
# 回显：removed 40 packages, and audited 1 package in 3s
npm ls echarts
# 回显：`-- (empty)

彻底移除项目目录与全局工具：

rm -rf /opt/echarts-lab
npm uninstall -g pnpm yarn

若需卸载系统级 Node.js（nodesource 安装）：

apt-get remove -y nodejs
rm -f /etc/apt/sources.list.d/nodesource.list
apt-get update