nodejs保存echarts图片

canvas和@napi-rs/canvas 可以用于在服务器端处理canvas图形,使用一个即可。

canvas安装方法：https://github.com/Automattic/node-canvas/wiki/Installation:-Windows

@napi-rs/canvas，底层使用rust构建可以直接 npm安装。

npm i @napi-rs/canvas

示例、使用 echarts 和 canvas 库在 Node.js 环境下生成和保存图表图像, 并且通过本地打开操作系统默认图片查看器展示生成的图像。

import * as echarts from 'echarts';
// import {createCanvas} from '@napi-rs/canvas';
import {createCanvas} from "canvas";
import fs from 'fs';
import {exec} from 'child_process';
// import { SVGRenderer, CanvasRenderer } from 'echarts/renderers';
// import _ from 'lodash';
// echarts.use([SVGRenderer, CanvasRenderer]);

function renderChart(config) {
    const canvas = createCanvas(config.width, config.height);
    const chart = echarts.init(canvas);
    chart.setOption(config.option);
    let result;

    if (config.base64) {
        result = canvas.toDataURL(config.formatType);
    } else {
        result = canvas.toBuffer(config.formatType);
    }
    chart.dispose();
    return result;
}

const option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
        },
        {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
        },
        {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
        }
    ]
};

const mime = {
    png: "image/png",
    jpeg: "image/jpeg",
    svg: "image/svg+xml",
    gif: "image/gif",
    pdf: "application/pdf"
};

// 方法一
let res = renderChart({width: 800, height: 600, option, base64: false, formatType: mime.png});
// console.log(res);
fs.writeFileSync("./1.png", res);
exec(`start "" "./1.png"`, (error, stdout, stderr) => {
    if (error) {
        console.error(`exec error: ${error}`);
        return;
    }
    if (stderr) {
        console.error(`stderr: ${stderr}`);
        return;
    }
    console.log(`stdout: ${stdout}`);
});

// 方法二
res = renderChart({width: 800, height: 600, option, base64: true, formatType: mime.png});
// console.log(res);
const base64Data = res.replace(/^data:image\/png;base64,/, '');
const buffer = Buffer.from(base64Data, 'base64');
fs.writeFileSync("./2.png", buffer);