使用phantomJs服务器端导出Echarts图片

最新推荐文章于 2025-04-30 11:24:42 发布

zor_chen

最新推荐文章于 2025-04-30 11:24:42 发布

阅读量1.6w

点赞数 2

CC 4.0 BY-SA版权

文章标签： phantomJs Echarts

本文链接：https://blog.csdn.net/zor_chen/article/details/31371501

本文介绍了如何利用PhantomJs在服务器端直接生成Echarts图表并导出为图片，避免了需要在页面上显示图表的需求。通过在服务器端运行 PhantomJs，结合Echarts的options，创建图表并在webpage.evaluate()中执行echarts.init()，最后使用webpage.render()方法生成图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：

在使用Echarts过程中，有需求在页面上图表显示和服务器端导出报表。在Echarts中，原生态提供了getImage()方法，但是都需要在页面上生成。事实上，可以通过页面上使用getImage()获得base64 encode的图片数据，传输至服务器端导出图片。但是在项目需求中，有一种场景在导出报表时，页面可能不需要生成图片。因此只能调研是否在服务器端直接生成。

思路：

phantomJs作为一个headless浏览器，支持网页截图。通过调用phantomJs,传入Echarts生成图表所需的options，与在页面上类似的方法，调用phantomJs的webpage模块，通过使用webpage.evaluate()在页面中生成div容器，调用echarts.init(container)生成图表，最终调用phantomJs的webpage.render()生成图片。

代码：

(function() {
	var system = require('system');
	var fs = require('fs');
	var config = {
		// define the location of js files
		JQUERY : 'jquery.1.9.1.min.js',
		ESL : 'esl.js',
		ECHARTS : 'echarts-plain.js',
		// default container width and height
		DEFAULT_WIDTH : '800',
		DEFAULT_HEIGHT : '400'
	}, parseParams, render, pick, usage;

	usage = function() {
		console.log("\nUsage: phantomjs echarts-convert.js -options options -outfile filename -width width -height height"
						+ "OR"
						+ "Usage: phantomjs echarts-convert.js -infile URL -outfile filename -width width -height height\n");
	};

	pick = function() {
		var args =

最低0.47元/天解锁文章