最近在开发项目的过程中, 碰到了前端渲染的瓶颈, 在首页加载图片的过程中, 渲染 echarts 图片过多容易导致页面的卡顿. 因此尝试了下, 使用 Node.JS 优先生成好图片之后, 再由用户进行开发.
依赖如下:
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');
来源: http://www.jianshu.com/p/d877a24e7c82