使用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');