服务端渲染 ECharts 图表

通常情况下，Apache ECharts ^TM 会在浏览器中动态的渲染图表，并且根据用户的交互来更新渲染。但是在下面这些比较特殊的场景，我们也需要在服务端中渲染图表并且输出到浏览器中：

• 需要缩短前端的渲染时间，保证第一时间显示图表
• 需要在 Markdown, PDF 等不支持动态运行脚本的环境中嵌入图表

在这些场景下，ECharts 也提供了两种服务端渲染（server-side rendering，SSR）的方案：SVG 渲染或 Canvas 渲染。

通常情况下，应优先考虑使用服务端 SVG 渲染方案，如果 SVG 不适用，也可以考虑 Canvas 渲染方案。

使用服务端渲染也有一定的局限性，尤其是和交互相关的一些操作无法支持。因此，如果有交互需求，可参考下文的“服务端渲染 Hydration”。

服务端 SVG 渲染

如果你在使用 5.3.0 以及更新的版本，我们强烈推荐你使用 5.3.0 里新引入的零依赖的服务端 SVG 字符串渲染方案：

const echarts = require('echarts');
// 在 SSR 模式下第一个参数不需要再传入 DOM 对象
const chart = echarts.init(null, null, {
  renderer: 'svg', // 必须使用 SVG 模式
  ssr: true, // 开启 SSR
  width: 400, // 需要指明高和宽
  height: 300
});
// 像正常使用一样 setOption
chart.setOption({
  //...
});
// 输出字符串
const svgStr = chart.renderToSVGString();

整体使用的代码结构跟在浏览器中使用一样，首先是 init 初始化一个图表实例，然后通过 setOption 设置图表的配置项。但是 init 传入的参数会跟在跟浏览器中使用有所不同：

• 首先因为在服务端会采用字符串拼接的方式来渲染得到 SVG，我们并不需要容器来展示渲染的内容，所以我们可以在 init 的时候第一个 container 参数传入 null 或者 undefined 。
• 然后我们在 init 的第三个参数中，我们需要通过显示指定 ssr: true 来告诉 ECharts 我们需要开启服务端渲染的模式，该模式下 ECharts 会关闭动画循环的模块以及事件交互的模块。
• 在服务端渲染中我们也必须要通过 width 和 height 显示的指定图表的高和宽，因此如果你的图表是需要根据容器大小自适应的话，可能需要思考一下服务端渲染是否适合你的场景了。

在浏览器中我们在 setOption 完之后 ECharts 就会自动进行渲染将结果绘制到页面中，后续也会在每一帧判断是否有动画需要进行重绘。NodeJS 中我们在设置了 ssr: true 后则没有这个过程。取而代之我们使用了 renderToSVGString ，将当前的图表渲染到 SVG 字符串，进一步得再通过 HTTP Response 返回给前端或者缓存到本地。

HTTP Response 返回给前端：

res.writeHead(200, {
  'Content-Type': 'application/xml'
});
res.write(chart.renderToSVGString());
res.end();

或者保存到本地：

fs.writeFile('bar.svg', chart.renderToSVGString(), 'utf-8');

下面是一个完整的在 CodeSandbox 中搭建一个最简单的 NodeJS 服务器然后使用 ECharts 服务端 SVG 渲染的效果：