使用nodejs生成圖片的嘗試
最近在開發專案的過程中，碰到了前端渲染的瓶頸，在首頁載入圖片的過程中，渲染echarts圖片過多容易導致頁面的卡頓。因此嘗試了下，使用nodejs 優先生成好圖片之後，再由使用者進行開發。
依賴如下：
1) node-echarts
node 生成圖片主要依賴於 node-echarts 模組（如果沒有，請使用 npm install node-echarts）;
2) echarts.min.js
根據你的樣式需要，去官網下載下這個東西，然後注意引入即可。
程式碼如下：
var node_echarts = require('node-echarts');
console.time('start');
node_echarts({
width: 500, // Image width, type is number.
height: 500, // Image height, type is number.
option: {
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'
}
]
}, // Echarts configuration, type is Object.
//If the path is not set, return the Buffer of image.
path: './aa.png', // Path is filepath of the image which will be created.
enableAutoDispose: true //Enable auto-dispose echarts after the image is created.
});
node_echarts({
width: 500, // Image width, type is number.
height: 500, // Image height, type is number.
option: {
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'
}
]
}, // Echarts configuration, type is Object.
//If the path is not set, return the Buffer of image.
path: './bb.png', // Path is filepath of the image which will be created.
enableAutoDispose: true //Enable auto-dispose echarts after the image is created.
});
console.timeEnd('start');