Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Server side SVG rendering of ECharts
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();
@h4rm

This comment has been minimized.

Copy link

@h4rm h4rm commented Jul 2, 2020

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.