echarts在后台生成图片的研究及最终解决办法

最新推荐文章于 2026-04-22 02:18:00 发布

原创最新推荐文章于 2026-04-22 02:18:00 发布 · 2.6w 阅读

22 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#echarts #nodejs #canvas #phantomJS #后台生成

Js 专栏收录该内容

3 篇文章

订阅专栏

本文探讨了如何在后台生成echarts图表以满足分析报告的需求。作者首先考虑了模拟浏览器和使用nodejs，但遇到了中文乱码问题。最终，通过 phantomjs 实现了“后台网页截图”，解决了问题。文中还提到了phantomjs的自动登录功能，以获取登录后网站的资源。

我们项目中前端使用echarts图表来展示数据。近期接到一个新需求，需要在后台生成分析报告，就是要有固定的许多分析图表都要在后台生成，加上语言描述，最终生成word文档提供下载。显然，这里几十张上百张echarts图表的生成不能通过打开浏览器通过js来实现了，需要在后台进行生成。

一、前言

接到需求后，首先想到了是不是可以通过模拟浏览器点击打开网页的方法，将得到的echarts图片一一保存，又想到是不是需要另一台windows服务器，写bat脚本进行浏览器的打开网页保存图片等的操作......（由于之前没用过phantomjs这个神器，后边详细说明过程，这里思路是正确的，只是不需要真实的浏览器而已）

二、使用nodejs来生成echarts的摸索（可行的方法之一）

这里看到了nodejs上的相关的组件，包括这个node-echarts组件：https://github.com/suxiaoxin/node-echarts 这里大家也可以进行尝试，是通过node-canvas和node-echarts两个node组件来生成图片的。只需要将echarts的option属性给定即可，是可以生成echarts图表的。

我研究了两天时间，而我最终由于生成的echarts图片的中文乱码问题，发现是canvas不能很好的支持导致的（canvas有支持字体库导入的API，但是API似乎没有发布），这里大家可以自己进行尝试，或者echarts图中没有中文的情况，可以用这种方法来实现。（安装这个node组件需要gcc4.8.5以上，c++11来进行编译，centos6.X的gcc可能要自己升级一下。node-echarts组件的依赖是以下两个包，大家也可以分别进行研究）

npm安装过程中如果遇到问题可以和我进行讨论，或者make & make install 过程中有问题也可以进行讨论，遇到的问题就不再一一列举了。

"dependencies": {
    "canvas-prebuilt": "^1.6.5-prerelease.1",
    "echarts": "^3.6.2"
  }

关于node-canvas有很多npm安装的前置条件，需要yum或其他方法安装 node-canvas地址 https://github.com/Automattic/node-canvas

三、最终使用的方案（使用phantomjs来进行“后台网页截图”）

经过nodejs一番折腾后，网上查阅了大量的资料没有找到合适的答案，最后发现确实可以实现最初的想法，使用phantomjs即可。先搬过来一段介绍：

phantomjs是一个基于webkit内核的无头浏览器。即没有UI界面的一个浏览器，只是其内的点击、翻页等人为相关操作需要程序设计实现。PhantomJS提供JavaScript API接口，即通过编写js程序可以直接与webkit内核交互，在此之上可以结合Java语言等，通过Java语言调用js等相关操作。（网上phantomJS相关的资料和API很多，大家可以自行查找用法并尝试）

简单的网页截图示例：

var page = require('webpage').create();
var address = 'http://baidu.com';//填写需要打印的HTML文件
var output = './1.png';//存储文件路径和名称
page.viewportSize = { width: 1280, height: 800 };//设置长宽
page.open(address, function (status) {
    if (status !== 'success') {
        console.log('Unable to load the address!');
        phantom.exit();
    } else {
        window.setTimeout(function () {
            page.render(output);
            phantom.exit();
        }, 500);
    }
});

当然也可以截取页面的一部分（将page.open函数中进行截图div区域的选择即可）

        page.open(address, function (status) {
		if (status !== 'success') {
			console.log('Unable to load the address!');
			phantom.exit();
		} else {
			window.setTimeout(function () {
				length = page.evaluate(function () {
					//此函数在目标页面执行的，上下文环境非本phantomjs，所以不能用到这个js中其他变量
					var div = document.getElementById('bar-chart-container'); //要截图的div的id
					var bc = div.getBoundingClientRect();
					var top = bc.top;
					var left = bc.left;
					var width = bc.width;
					var height = bc.height;
					window.scrollTo(0, 10000);//滚动到底部
					return [top, left, width, height];
				});
				console.log(length);
				page.clipRect = { //截图的偏移和宽高
					top: length[0],
					left: length[1],
					width: length[2],
					height: length[3]
				};

			}, 5000);

			window.setTimeout(function () {
				page.render(output);
				phantom.exit();
			}, 5000 + 500);
		}
	});

最终，就得到了phantomJS在后台截图得到的echarts图表了，真实截图如下：

phantomJS截图是所见即所得，火狐或者谷歌看到的图案是怎样，那么后台截图得到的就是同样的。需求完成。

四、补充

在phantomJS使用的时候，由于我们web系统是需要登录后使用的，这里还涉及到了一些phantomJS的cookie自动登录的知识，只需要将cookie的key和value加入phantom脚本中，就可以实现自动登录，来请求站点下的所有资源了。见博文http://blog.csdn.net/yx0628/article/details/78275714