Node.js 服务端生成 ECharts 图片的终极方案

前端

2023-10-19 11:16:05

利用 ECharts 在 Node.js 服务端无缝生成图表图片

摘要：

本文将指导您在 Node.js 服务端使用 ECharts 生成图表图片，以便轻松将它们嵌入到报告中。我们将介绍安装、配置和使用 ECharts 以及需要注意的注意事项。

背景：

在分析报告中，图表对于展示数据和趋势至关重要。为了增强报告的可读性和吸引力，将 ECharts 图片嵌入其中变得越来越普遍。本文将逐步介绍如何在服务端实现这一目标。

搭建 ECharts 服务

安装和配置

安装 ECharts 库： 使用 npm install echarts 安装 ECharts 库。
创建一个 Node.js 项目： 创建 echarts-server 目录并使用 npm init -y 和 npm install express echarts 初始化一个新的项目。
配置 Express 应用： 在 app.js 文件中创建一个 Express 应用并添加一个路由来处理图表生成请求。

图表生成

获取图表数据和选项： 从客户端请求中提取图表数据和选项。
初始化 ECharts 实例： 使用 echarts.init(res) 初始化一个 ECharts 实例，并将响应作为参数传递。
设置图表选项： 使用 setOption() 方法设置图表选项。
导出为 PNG 图片： 调用 exportToPng() 方法将图表导出为 PNG 图片并将其作为响应返回。

注意事项

安装 ECharts 库： 确保在服务端安装 ECharts 库。
返回图表图片： 将 chart.exportToPng() 的结果返回给客户端。
指定查询参数： 访问 /chart 路径时，在查询参数中指定 data 和 options。

代码示例

app.js

const express = require('express');
const app = express();

app.get('/chart', (req, res) => {
  const chartData = req.query.data;
  const chartOptions = req.query.options;

  const chart = echarts.init(res);
  chart.setOption(chartOptions);
  chart.exportToPng().then((png) => {
    res.end(png);
  });
});

app.listen(3000);