服务端渲染 echarts (前端展示)

ZJ_.

已于 2024-04-30 14:53:31 修改

阅读量311

点赞数 8

于 2024-04-30 14:22:45 首次发布

本文链接：https://blog.csdn.net/weixin_71329368/article/details/138344550

版权

本文介绍了如何使用Node.js的express框架结合echarts库，在服务端通过canvas渲染图表，然后将生成的图片作为二进制流发送给客户端显示的过程。

摘要由CSDN通过智能技术生成

将echarts在node服务端渲染为图片，并将图片发送给页面展示。

服务端：

1. 准备条件

安装环境：

npm i express echarts canvas

注释：

express：node的http框架，用于与页面通信
echarts：node提供的echarts模块，与前端的echarts语法一致
canvas：服务端使用 canvas 绘图渲染 ehcarts

2. 构建

/**
 * controller/charts文件，用于绘制 echart
 */
const echarts = require('echarts');
const { createCanvas } = require('canvas');

function echartRender() {
  // 1. 用 canvas 定义具有宽高盒子
  const canvas = createCanvas(800, 600);
  // 2. 初始化
  let chart = echarts.init(canvas);
  // 3. 内容
  const option = {
    title: { text: 'ECharts 示例' },
    tooltip: {},
    xAxis: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
    yAxis: {},
    series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20, 10] }],
  };
  
  chart.setOption(option);

  // 将 Canvas 转换为 Buffer
  const image = canvas.toBuffer();
    
  // 如果不再需要图表，调用 dispose 以释放内存
  chart.dispose();
  chart = null;
    
  return image
}
module.exports = echartRender

/**
 * index.js 用于将 echart 发送给页面
 */
const express = require('express');
const echartRender = require("./controller/charts") // 单独封装的 echarts 实现，在前一个代码块
const path = require("path")

// 1. 构建一个 http 服务程序
const app = express();

// 2. 静态文件, 将 client 目录下的 html页面 挂载到 3000 端口
app.use(express.static(path.join(__dirname, '..', 'client')))

// 3. 生成 ECharts 图表的图片并发送到客户端
app.get('/chart', (req, res) => {
  const image = echartRender() // 单独封装的 echarts 实现，在前一个代码块
  res.send(image);
});

// 4. 监听 3000 端口
app.listen(3000, () => {
  console.log(`Server is running on http://localhost:${3000}`);
});

客户端：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./plugin/axios.min.js"></script>
</head>
<style>
  .echart {
    width: 500px;
  }
</style>

<body>
  <!-- 渲染 echart 的盒子 -->
  <img src="" alt="echarts" class="echart">
  <!-- Ajax 请求, 在后一个代码块 -->
  <script src="./index.js"></script>
</body>

</html>

// 请求 echart
async function echartAjax() {
  const baseURL = location.origin
  const url = baseURL + '/chart'
  // 1. 请求接口，获取 echart 图片
  const res = await axios.get(url, {
    responseType: 'blob'
  })
  // 2. 获取 img 标签, 渲染 echart
  const echart = document.querySelector('.echart')
  echart.src = URL.createObjectURL(res.data)
}
echartAjax()

实现逻辑：

使用nodejs中的echarts模块借助canvas渲染为buffer，将echarts的二进制流使用express发送http请求给客户端。
客户端将服务端发送过来的二进制流数据接收Blob大对象，并且可以使用URL.createObjectURL(Blob)将Blob转换为可访问的url，达到在客户端展示服务端渲染ecahrts图片的功能