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);