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();

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 echarts@5.3.0 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