CentOS 8 安装 Apache ECharts 指南

在 CentOS 8 服务器安装 Node.js 与 Apache ECharts 6.x:nvm/nodesource 安装 Node、npm/pnpm/yarn 与 CDN 引入、版本验证、最小 SSR 渲染示例及卸载。

Apache EChartsApache ECharts2026/10/12

CentOS 8 安装 Apache ECharts 指南

实测环境:CentOS Linux 8(x86_64),登录账号 root / q1w2e3r4。ECharts 实测版本 6.1.0,Node.js 18.20.8。 本文所有命令均在真实服务器上执行并有回显,可逐条复现。

一、前置条件

  • 一台可联网的 CentOS 8 服务器,具备 root 权限。
  • 内存 ≥ 1GB,磁盘剩余 ≥ 2GB。
  • ECharts 是纯 JavaScript 库,本身无守护进程;安装即「引入依赖 + 编写脚本」。
  • 确认系统版本与基础工具:
cat /etc/redhat-release
# 回显:CentOS Linux release 8.5.2111
uname -m
# 回显:x86_64
  • 若服务器时间为 UTC,建议校正为本地时区:
timedatectl set-timezone Asia/Shanghai
date
# 回显:Sun Oct 11 15:35:22 CST 2026

二、安装 Node.js

ECharts 6.x 的运行与渲染依赖 Node.js。CentOS 8 官方 AppStream 源最高只提供到 nodejs 16,因此本文给出 nvm 与 nodesource 两种更高版本安装方式,二选一即可。

2.1 方式一:nvm 安装

nvm 以普通用户隔离多版本,推荐用于开发机:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
# 回显结尾:=> Downloading nvm ... => 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 RPM 源安装系统级 Node.js:

dnf -y install curl
curl -fsSL https://rpm.nodesource.com/setup_18.x -o /tmp/ns.sh
bash /tmp/ns.sh
# 回显:Repository is configured and updated.
dnf -y install nodejs
node -v
# 回显:v18.20.8
npm -v
# 回显:10.8.2

注意:CentOS 8 已停止常规更新,若 dnf 报源错误,可将仓库指向 vault 或镜像源后再执行。

三、安装 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 6s

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 安装):

dnf -y remove nodejs
rm -f /etc/yum.repos.d/nodesource*.repo
dnf clean all