使用node-canvas在服务端渲染echarts图表解析

使用node-canvas在服务端渲染echarts图表，可以实现在后端生成静态图表，并且可以在不需要浏览器环境的情况下使用echarts。

1. 安装node-canvas模块
   要使用node-canvas在服务端渲染echarts图表，需要预先安装node-canvas模块，命令如下：

npm install canvas

注意，node-canvas依赖于Cairo，所以需要在系统中安装Cairo。

1. 基于node-canvas生成画布
   在服务端使用node-canvas时，需要生成画布并设置画布的宽度和高度，将画布传递给echarts进行渲染。示例代码：

const { createCanvas } = require('canvas');
const canvas = createCanvas(800, 600); // 生成画布

1. 基于echarts在画布中渲染图表
   使用node-canvas渲染echarts图表首先需要联合引入echarts和canvas，在享有canvas生成的上下文对象时即可像浏览器环境下那样进行canvas的渲染和echarts图表的绘制。示例代码：

const echarts = require('echarts');
const Canvas = require('canvas');
const canvas = Canvas.createCanvas(800, 600); // 生成画布
const ctx = canvas.getContext('2d');
global.window = {}; // 在Node.js环境下模拟浏览器窗口对象
const chart = echarts.init(ctx, null, {
  devicePixelRatio: 2, // 可以提高图表的清晰度
});

// 绘制基本的柱状图
chart.setOption({
  xAxis: {
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  },
  yAxis: {},
  series: [{
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20, 5],
  }]
});

1. 将渲染完成的图表输出成图片
   在完成图表渲染之后，可以将生成的canvas对象转化为图片文件（如png或jpg格式），再返回给客户端进行展示或持久化存储。示例代码：

const fs = require('fs');
const out = fs.createWriteStream(__dirname + '/chart.png');
const stream = canvas.createPNGStream();
stream.pipe(out);

完整示例1：渲染象限图
下面是一个完整的echarts在服务端渲染象限图的示例代码：

const echarts = require('echarts');
const Canvas = require('canvas');
const canvas = Canvas.createCanvas(800, 600); // 生成画布
const ctx = canvas.getContext('2d');
global.window = {}; // 在Node.js环境下模拟浏览器窗口对象
const chart = echarts.init(ctx, null, {
  devicePixelRatio: 2, // 可以提高图表的清晰度
});

// 绘制象限图
chart.setOption({
  polar: {},
  angleAxis: {
    type: 'category',
    data: ['Growth', 'Price', 'Value', 'Sentiment']
  },
  radiusAxis: {},
  series: [{
    type: 'bar',
    data: [1, 2, 3, 4],
    coordinateSystem: 'polar',
    stack: 'a'
  }, {
    type: 'bar',
    data: [2, 4, 6, 8],
    coordinateSystem: 'polar',
    stack: 'a'
  }, {
    type: 'bar',
    data: [1, 2, 3, 4],
    coordinateSystem: 'polar',
    stack: 'b'
  }, {
    type: 'bar',
    data: [2, 4, 6, 8],
    coordinateSystem: 'polar',
    stack: 'b'
  }]
});

// 将画布转化为图片并保存至本地
const fs = require('fs');
const out = fs.createWriteStream(__dirname + '/chart.png');
const stream = canvas.createPNGStream();
stream.pipe(out);

完整示例2：在Vue项目中使用node-canvas渲染echarts图表
在Vue项目中也可以使用node-canvas渲染echarts图表。下面是一个完整的示例代码：

<template>
  <div>
    <canvas ref="canvas"></canvas>
  </div>
</template>

<script>
import echarts from 'echarts';
import { createCanvas } from 'canvas';

export default {
  name: 'RenderEchartsOnServer',
  data() {
    return {
      options: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
        }]
      }
    }
  },
  mounted() {
    this.renderEchartsOnServer();
  },
  methods: {
    renderEchartsOnServer() {
      const canvas = createCanvas(800, 600);
      const ctx = canvas.getContext('2d');
      global.window = {};
      const chart = echarts.init(ctx, null, {
        devicePixelRatio: 2
      });
      chart.setOption(this.options);

      const chartBase64 = canvas.toDataURL();

      const img = new Image();
      img.onload = () => {
        const canvasElement = this.$refs.canvas;
        canvasElement.width = img.width;
        canvasElement.height = img.height;
        const ctx = canvasElement.getContext('2d');
        ctx.drawImage(img, 0, 0, img.width, img.height);
      }
      img.src = chartBase64;
    }
  }
}
</script>