index.js

require('jsdom-global')()

var { createCanvas } = require("canvas");
var fs = require('fs');
var path = require('path');
var echarts = require("echarts");

/**
 * default echart option in case the client doesn't define
 */
function getDefaultOption() {
    return {
        title: {
            text: 'test',
        },
        tooltip: {},
        legend: {
            data: ['test'],
        },
        xAxis: {
            data: ["a", "b", "c", "d", "f", "g"],
        },
        yAxis: {},
        series: [{
            name: 'test',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
        }]
    };
}

/**
 * default config for the option, in case the client doesn't
 * define it.
 * 
 * @param {*} option echart option
 */
function getDefaultConfig(option) {
    return {
        width: 500,
        height: 500,
        option,
        enableAutoDispose: true,
    }
}

/**
 * saves the chart passed in the provided path
 * @param {*} chart chart in which thedom will be retrieved and saved
 * as an image
 * @param {*} path directory to the image that will be saved
 */
function saveChart(chart, path) {
    try {
        fs.writeFileSync(path, chart.getDom().toBuffer());
        console.log("Created image:" + path)
    } catch (err) {
        console.error("Error: write file failed: " + err.message)
    }
}

/**
 * retrieves the buffer of the chart
 * @param {*} chart chart in which the buffer will be retrieved
 */
function getBuffer(chart) {
    return chart.getDom().toBuffer();
}

/**
 * @param config = {
        width: 500 // Image width, type is number.
        height: 500 // Image height, type is number.
        option: {}, // Echarts configuration, type is Object.
        //If the path  is not set, return the Buffer of image.
        path:  '', // Path is filepath of the image which will be created.
    }
 *
 */
module.exports = function (config) {

    const createdCanvas = createCanvas(128, 128);
    const ctx = createdCanvas.getContext('2d');

    if (config.font) {
        ctx.font = config.font;
    }

    echarts.setCanvasCreator(function () {
        return createdCanvas;
    });

    const option = getDefaultOption();
    const defaultConfig = getDefaultConfig(option);

    config = Object.assign({}, defaultConfig, config);

    // Disable animation and features that require DOM interaction
    config.option.animation = false;
    
    // Remove tooltip and toolbox for server-side rendering (they require DOM)
    delete config.option.tooltip;
    delete config.option.toolbox;
    
    const canvas = createCanvas(
        parseInt(config.width, 10),
        parseInt(config.height, 10),
    );
    // Add DOM event methods to canvas (no actual functionality needed in Node.js)
    canvas.addEventListener = function() {};
    canvas.removeEventListener = function() {};
    canvas.getAttribute = function(name) {
        if (name === 'width') return this.width;
        if (name === 'height') return this.height;
        return null;
    };
    canvas.setAttribute = function(name, value) {
        if (name === 'width') this.width = value;
        if (name === 'height') this.height = value;
    };
    canvas.style = {};
    
    const chart = echarts.init(canvas);

    chart.setOption(config.option);

    try {
        /**
         * if specified the path, the chart will be saved into it
         */
        if (config.path) {
            saveChart(chart, config.path);
            return;
        }

        /**
         * if not, the buffer will be returned
         */
        return getBuffer(chart);
    } finally {

        /**
         * finally, dispose the chart if client defined so
         */
        if (config.enableAutoDispose) {
            chart.dispose();
        }
    }
}