服务端渲染（Server-Side Rendering）

由于标准范式图表组件库基于ECharts进行封装，所以服务端图表渲染方案也大致遵循ECharts 服务端渲染。

一、服务端 SVG 字符串渲染

var express = require('express');
var standardchart = require('../assets/bundle.umd.js');
var app = express();

function renderChartSVG() {
  // ssr模式下不需要传入DOM对象，但是仍可以选择图表主题
  const chart = standardchart.init(null, 'mobile-app-light', {
    renderer: 'svg', // 为StandardChart指定渲染方式
    ssr: true, // 开启服务端渲染
    width: 400, // 指定图表宽度
    height: 300, // 指定高度
  });

  // play方法的使用和正常情况没有差别
  chart.play({
    option: {
      animationDuration: 10000,
      xAxis: {
        type: 'category',
        axisPointer: {
          show: true,
        },
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'line',
        },
      ],
    },
  });
  //
  return chart.renderToSVGString();
}

代码和本地浏览器中绘制图表相差不大，首先也需要init初始化图表实例，然后通过play方法设置图表配置项。但是需要注意的是：

因为服务端只需要绘制图表，不需要再展示渲染内容，所以init 方法的第一个参数dom为null或者undefined。
需要对init的第三个参数初始化配置opts中的渲染模式renderer声明为svg,并且开启服务端渲染模式ssr: true，最后为图表手动指定宽高width: xxx及height: xxx，如果对应图表需要自适应容器大小的话，那就需要通过请求参数或者其他处理来适配场景了。
服务端渲染模式下，图表会关闭一般的动画和几乎所有的交互模块。如果需要渲染一些交互和动画较复杂的图表例如动态条形图、动态折线图、气泡图等，可能就要思考一下服务端渲染是否适合应用场景了。

二、服务端 Canvas 渲染

对于像静态图表或者页面中的可视化缩略图这样，希望输出一张图片而不是 SVG 的场景，一般推荐通过node-canvas完成渲染。

var express = require("express");
var standardchart = require("../assets/bundle.umd.js");
const { createCanvas } = require("canvas");

var app = express();

function renderChart() {
  // 用node-canvas创建一个canvas容器，用来绘制图表
  const canvas = createCanvas(400, 300);
  const chart = standardchart.init(canvas, 'mobile-app-light');

  chart.play({
    option: {
      animationDuration: 10000,
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
      },
      yAxis: {
        type: "value"
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "line"
        }
      ]
    }
  });
  return canvas;
}


// 响应直接返回一张图片
app.get('/line-canvas', (req, res) => {
  res.writeHead(200, {
    "Content-Type": "image/png"
  });
  res.write(renderChart().toBuffer('image/png'));
  res.end();
})

var server = app.listen(8080, () => {
  const host = server.address().address;
  const port = server.address().port;
  console.log('监听中');
})

下面是 standardchart 内部为支持服务端渲染需要修改的部分

ssr 模式下，初始化时传入的 DOM 元素可能为空，但是目前 StandardChart 内部没有在这方面做特殊处理。
node 环境下，document、window 等全局对象和部分浏览器下的方法如 DOMapi 失效，但是在图表库代码层还有应用，ssr 模式下会报错。主要是 window、
默认情况下，图表组件全部在 canvas 容器内完成绘制，但是 tooltip 默认用 DOM 实现，ssr 模式下需要在主题（或者业务方）将 tooltip 的绘制方式转为富文本，但是会导致 tooltip 的一些配置失效，例如 formatter 如果返回 DOM 元素则失效。
动态系列的图表多半通过 helper 和时间轴组件有一定关系，ssr 模式下，大部分交互和动画失效，因此动态系列的图表目前暂不支持服务端渲染。

一、服务端 SVG 字符串渲染​

二、服务端 Canvas 渲染​

一、服务端 SVG 字符串渲染

二、服务端 Canvas 渲染