将ECharts图表插入到Word文档中
文章目录
-
- 在后端调用JS代码
- 准备ECharts库
- 生成Word文档
- 项目地址
-
- 库封装
- 本文示例 EChartsGen_DocTemplateTool_Sample
如何通过ECharts在后台生成图片，然后插入到Word文档中？
首先要解决一个问题：总所周知，ECharts是前端的一个图表库，如何在后台调用JS代码？这里就要用到PhantomJS了。
PhantomJS是一个基于WebKit的JavaScript API，它使用QtWebKit作为核心浏览器的功能，使用WebKit编译、解释和执行JavaScript代码。任何可以在基于WebKit的浏览器上做的事情，它都能做到。它不仅是一个隐形的浏览器，提供了诸如CSS选择器、支持Web标准、DOM操作、JSON、HTML5、Canvas、SVG等功能，同时也提供了处理文件I/O的操作。
之前写过一个文档模板工具，其中可以通过占位符插入图片。
用PhantomJS生成ECharts图表的Png图片，利用文档模板工具插入图片即可实现这个需求。
下面就来看看如何实现。
在后端调用JS代码
创建一个.netstandard2.1的类库项目。为了方便调用，我们安装一个PhantomJS包装器：NReco.PhantomJS
dotnet add package NReco.PhantomJS --version 1.1.0
这只是一个包装器，因此还需要一个可执行文件，前往官网下载PhantomJS。
因为直接使用编译好的可执行文件，因此需要下载对应的平台版本，这里我下载了Windows以及Linux 64-bit版本。
将下载好的可执行文件解压放置在项目根目录下的libs目录中。
这样我们可以直接在.net中调用PhantomJS了。
准备ECharts库
jQuery
下载jquery-3.6.3.min.js: https://code.jquery.com/jquery-3.6.3.min.js
ECharts
下载echarts.min.js： https://github.com/apache/echarts/tree/5.4.3/dist
ECharts转换器
echarts-convert在github上有众多版本，echarts-convert的代码来源于这里：https://github.com/wadezhan/billfeller.github.io/issues/85
这里选择
(function () {
var system = require('system');
var fs = require('fs');
var config = {
// define the location of js files
JQUERY: 'jquery-3.6.3.min.js',
//ESL: 'esl.js',
ECHARTS: 'echarts.min.js',
// default container width and height
DEFAULT_WIDTH: '1920',
DEFAULT_HEIGHT: '800'
}, 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 = arguments, i, arg, length = args.length;
for (i = 0; i < length; i += 1) {
arg = args[i];
if (arg !== undefined && arg !== null && arg !== 'null' && arg != '0') {
return arg;
}
}
};
parseParams = function () {
var map = {}, i, key;
console.log("--logs:\n")
console.log(system.args)
if (system.args.length < 2) {
usage();
phantom.exit();
}
for (i = 0; i < system.args.length; i += 1) {
if (system.args[i].charAt(0) === '-') {
key = system.args[i].substr(1, i.length);
if (key === 'infile') {
// get string from file
// force translate the key from infile to options.
key = 'options';
try {
map[key] = fs.read(system.args[i + 1]).replace(/^\s+/, '');
} catch (e) {
console.log('Error: cannot find file, ' + system.args[i + 1]);
phantom.exit();
}
} else {
map[key] = system.args[i + 1].replace(/^\s+/, '');
}
}
}
return map;
};
render = function (params) {
var page = require('webpage').create(), createChart;
var bodyMale = config.SVG_MALE;
page.onConsoleMessage = function (msg) {
console.log(msg);
};
page.onAlert = function (msg) {
console.log(msg);
};
createChart = function (inputOption, width, height, config) {
var counter = 0;
function decrementImgCounter() {
counter -= 1;
if (counter < 1) {
console.log(messages.imagesLoaded);
}
}
function loadScript(varStr, codeStr) {
var script = $('