Server side SVG rendering of ECharts

echarts-svg.js

const echarts = require("echarts");
const Canvas = require('canvas');
const {JSDOM} = require('jsdom');
const fs = require('fs');
echarts.setCanvasCreator(() => {
    return new Canvas(100, 100);
});

const {window} = new JSDOM();
global.window = window;
global.navigator = window.navigator;
global.document = window.document;

const root = document.createElement('div');
root.style.cssText = 'width: 500px; height: 500px;';

const chart = echarts.init(root, null, {
    renderer: 'svg'
});
chart.setOption({
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        data: ['销量']
    },
    xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [{
        animation: false,
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});

fs.writeFileSync('basic.svg', root.querySelector('svg').outerHTML, 'utf-8');

chart.dispose();

Hi, thanks for this snippet.
I just noticed that I cannot set the font-size because the rendered svg contains style="font: sans-serif 12px normal normal bold 12px;" instead of style="font-size: 12px". Any idea how to influence this behavior?

Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload.
D:\echarts-node\index.js:6
  return new Canvas(100, 100);
         ^

TypeError: Canvas is not a constructor
    at Object.createCanvas (D:\echarts-node\index.js:6:10)

能否把依赖包的版本标注一下？

@elewen 新版本的 node-canvas 改用

const { createCanvas } = require('canvas')
echarts.setCanvasCreator(() => {
    return createCanvas(200, 200);
});

Even with createCanvas, ECharts still complains about that.

Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload.

Manage to fix that with

root.style.cssText = "width: 500px; height: 500px;";


// This is a work-around for the warning:
//  Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight.
//  They should not be 0.For example, you may need to call this in the callback of window.onload.
Object.defineProperty(root, "clientWidth", {value: 500});
Object.defineProperty(root, "clientHeight", {value: 500});

Can I get a tooltip in rendering on the Server side SVG rendering?

 tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
  
              },
            },

parameter set this way has no working

looks like a great elegant solution, but looks like Canvas doesnt work with arm64 docker

Update: new [email protected] has provided a zero dependency SSR solution.

const echarts = require('echarts');

// In SSR mode the first parameter does not need to be passed in as a DOM object
const chart = echarts.init(null, null, {
  renderer: 'svg', // must use SVG mode
  ssr: true, // enable SSR
  width: 400, // need to specify height and width
  height: 300
});

// setOption as normal
chart.setOption({
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
});

// Output string
const svgStr = chart.renderToSVGString();

The feature doc:
https://echarts.apache.org/handbook/en/basics/release-note/5-3-0/#server-side-rendering-with-zero-dependencies

Can you add a feature to get image buffers from SVG render like png, jpeg?

Can you add a feature to get image buffers from SVG render like png, jpeg?

It'll be really useful to me also!

I get an error message if I use Nodejs:

/echarts.js:123
 env.touchEventsSupported = 'ontouchstart' in window && !browser.ie && !browser.edge;
                                                     ^

ReferenceError: window is not defined
    at detect (/home/pi/node_modules/echarts/dist/echarts.js:123:54)
    at /home/pi/node_modules/echarts/dist/echarts.js:97:9
    at /home/pi/node_modules/echarts/dist/echarts.js:22:68
    at Object.<anonymous> (/home/pi/node_modules/echarts/dist/echarts.js:25:2)
    at Module._compile (node:internal/modules/cjs/loader:1375:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1434:10)
    at Module.load (node:internal/modules/cjs/loader:1206:32)
    at Module._load (node:internal/modules/cjs/loader:1022:12)
    at Module.require (node:internal/modules/cjs/loader:1234:19)
    at require (node:internal/modules/helpers:176:18)

Node.js v21.5.0

See also apache/echarts#19670

更新：新版[email protected]已经提供零依赖的SSR解决方案。

const echarts = require('echarts');

// In SSR mode the first parameter does not need to be passed in as a DOM object
const chart = echarts.init(null, null, {
  renderer: 'svg', // must use SVG mode
  ssr: true, // enable SSR
  width: 400, // need to specify height and width
  height: 300
});

// setOption as normal
chart.setOption({
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
});

// Output string
const svgStr = chart.renderToSVGString();

功能文档： https ://echarts.apache.org/handbook/en/basics/release-note/5-3-0/#server-side-rendering-with-zero-dependencies

太牛了，对我很有帮助！不需要什么jsdom了