服务端渲染Echarts，Docker部署Echarts服务

Echarts是百度发布的一套优秀的浏览器端图表控件，Echarts是基于html5的canvas绘图实现。由于项目中需要在服务端使用Echarts生成图表，故本文记录服务端渲染Echarts图表的实现过程，并制作成docker镜像，方便后续使用。

1.准备工作

mkdir node-echarts

目录结构

node-echarts/
├── Dockerfile
├── package.json	 // 依赖
├── fonts/			// 字体
└── server.js		// echarts服务启动文件

Dockerfile

FROM node:16

MAINTAINER hzw

RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime

RUN mkdir -p /node-echarts

WORKDIR /node-echarts

ADD ./server.js ./
ADD ./package.json ./
ADD ./fonts/ /usr/share/fonts/

RUN apt-get update && apt-get install libcairo2-dev libjpeg-dev libpango1.0-dev libgif-dev build-essential g++ -y
RUN npm --registry https://registry.npm.taobao.org install
RUN npm --registry https://registry.npm.taobao.org install pm2 -g

EXPOSE 9919

CMD pm2 start server.js -i max --no-daemon

package.json

{
  "dependencies": {
    "body-parser": "^1.20.0",
    "canvas": "^2.9.1",
    "echarts": "^5.3.2",
    "express": "^4.17.3"
  }
}

server.js

var express = require('express');
var app = express();
var bodyParser = require('body-parser')
var echarts = require("echarts");
const { createCanvas } = require("canvas");

echarts.setPlatformAPI(() => {
    return createCanvas();
});

function renderChart(data) {
    const canvas = createCanvas(data.width, data.height);
    const chart = echarts.init(canvas);

    chart.setOption(data.option);
    return canvas;
}

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended: true}))

app.post('/genEchartsImage', function (req, res) {
    res.writeHead(200, {
        "Content-Type": "image/png"
    });
    res.write(renderChart(req.body).toBuffer("image/png"));
    res.end();
})

var server = app.listen(9919, function () {

    var host = server.address().address
    var port = server.port

    console.log(`服务运行在http://${host}:${port}`)

})

2.制作镜像（需要联网）

cd node-echarts
docker build -t node-echarts .

3.启动服务

docker run -itd -p 9919:9919 node-echarts

4.调用服务

postman调用http://宿主机IP:9919/genEchartsImage接口，POST方法，body传入json格式的echarts配置参数，接口返回结果为图片文件。

5.注意：

1.Debian中npm安装canvas时需要先安装libcairo2-dev、libjpeg-dev、libpango1.0-dev、libgif-dev、build-essential、g++，否则canvas可能安装失败。即Dockerfile中：

apt-get update && apt-get install libcairo2-dev libjpeg-dev libpango1.0-dev libgif-dev build-essential g++ -y

2.如果node-charts输出的图片中文乱码，是缺少中文字体，需安装中文字体到该容器中。即Dockerfile中：

ADD ./fonts/ /usr/share/fonts/

其中，fonts为中文字体文件夹，可从windows或mac系统中拷贝。