如何在ExpressJS中使用Echarts？求生成Base64图表图片方案

我之前刚好做过类似的需求，给你一步步梳理下怎么在Express项目里实现ECharts转Base64图片，亲测可行～

1. 安装必备依赖 #

因为Node.js环境没有浏览器的DOM环境，ECharts需要借助canvas库来完成离线渲染。所以除了echarts本身，还要安装canvas：

npm install echarts canvas

2. 核心代码实现 #

下面是一个完整的示例，创建一个Express路由来生成并返回Base64格式的图表图片：

const express = require('express');
const echarts = require('echarts');
const { createCanvas, registerFont } = require('canvas');

const app = express();

// 可选：如果需要显示中文，提前注册中文字体（避免乱码）
// 这里需要你把字体文件放到项目目录，比如./fonts/NotoSansSC-Regular.ttf
registerFont('./fonts/NotoSansSC-Regular.ttf', { family: 'Noto Sans SC' });

app.get('/api/chart-to-base64', (req, res) => {
  // 创建Canvas实例，设置图表的宽高
  const canvas = createCanvas(800, 600);
  // 初始化ECharts实例，传入Canvas对象
  const chartInstance = echarts.init(canvas);

  // 定义你的ECharts配置项（这里用折线图示例，你可以替换成自己的图表配置）
  const chartOption = {
    title: { 
      text: '一周用户活跃度统计',
      textStyle: { fontFamily: 'Noto Sans SC' } // 指定中文字体
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      axisLabel: { fontFamily: 'Noto Sans SC' }
    },
    yAxis: { type: 'value' },
    series: [{
      name: '活跃用户数',
      data: [1200, 1800, 1500, 900, 2100, 2500, 1900],
      type: 'line',
      smooth: true
    }]
  };

  // 渲染图表
  chartInstance.setOption(chartOption);

  // 将Canvas转换为Base64格式的图片（支持png/jpeg格式）
  // 如果是jpeg，可以添加质量参数：canvas.toDataURL('image/jpeg', 0.8)
  const base64Image = canvas.toDataURL('image/png');

  // 返回Base64数据给前端
  res.status(200).json({
    success: true,
    base64: base64Image,
    tip: "可以直接把这个base64放到img标签的src属性中展示"
  });
});

app.listen(3000, () => {
  console.log('服务已启动，访问 http://localhost:3000/api/chart-to-base64 查看结果');
});

3. 关键注意事项 #

• 中文乱码问题：如果图表需要显示中文，一定要注册对应的中文字体文件，不然会出现方块乱码。可以从系统字体目录复制字体文件到项目中，或者使用开源的思源黑体等字体。
• 性能优化：如果有大量请求生成图表，建议缓存已生成的Base64结果，或者使用Node.js的Worker线程来处理渲染逻辑，避免阻塞Express的主线程。
• 图表配置兼容性：大部分ECharts的配置项在离线渲染中都支持，但一些依赖DOM交互的功能（比如tooltip点击事件）会无效，毕竟是离线生成图片。

内容的提问来源于stack exchange，提问作者christ