最近在开发项目的过程中，碰到了前端渲染的瓶颈，在首页加载图片的过程中，渲染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');
网友评论