Render and generate Echarts pictures on the server side using PHANTOMJS

1, using the JAR package

<dependency>     <groupId>org.apache.commons</groupId>   <artifactId>commons-exec</artifactId>   <version>1.3</version></dependency><dependency>    <groupId>com.github.abel533</groupId>    <artifactId>ECharts</artifactId>    <version>3.0.0.2</version></dependency><dependency>    <groupId>com.google.code.gson</groupId>    <artifactId>gson</artifactId></dependency><dependency>    <groupId>com.github.abel533</groupId>    <artifactId>ECharts</artifactId>    <version>3.0.0.2</version></dependency>

, 2, create the JS (echarts-convert.js) you want to use

function Base64 () {//private property _keystr = "abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz0123456789+/=    ";        Public method for Encoding This.encode = function (input) {var output = "";        var chr1, CHR2, CHR3, Enc1, Enc2, enc3, Enc4;        var i = 0;        input = _utf8_encode (input);            while (I < input.length) {chr1 = Input.charcodeat (i++);            CHR2 = Input.charcodeat (i++);            CHR3 = Input.charcodeat (i++);            ENC1 = Chr1 >> 2; ENC2 = ((Chr1 & 3) << 4) |            (CHR2 >> 4); Enc3 = ((CHR2 &) << 2) |            (CHR3 >> 6);            Enc4 = CHR3 & 63;            if (IsNaN (CHR2)) {enc3 = Enc4 = 64;            } else if (IsNaN (CHR3)) {Enc4 = 64; } output = output + _keystr.charat (ENC1) + _keystr.charat (ENC2) + _keystr.charat (enc3) +        _keystr.charat (ENC4); } return output;   }//Public method for decoding This.decode = function (input) {var output = "";        var chr1, CHR2, CHR3;        var enc1, Enc2, enc3, Enc4;        var i = 0;        input = Input.replace (/[^a-za-z0-9\+\/\=]/g, "");            while (I < input.length) {enc1 = _keystr.indexof (Input.charat (i++));            ENC2 = _keystr.indexof (Input.charat (i++));            enc3 = _keystr.indexof (Input.charat (i++));            Enc4 = _keystr.indexof (Input.charat (i++)); CHR1 = (enc1 << 2) |            (Enc2 >> 4); CHR2 = ((Enc2 &) << 4) |            (enc3 >> 2); CHR3 = ((enc3 & 3) << 6) |            Enc4;            Output = output + String.fromCharCode (CHR1);            if (enc3! =) {output = output + String.fromCharCode (CHR2);            if (enc4! =) {output = output + String.fromCharCode (CHR3);        }} output = _utf8_decode (output);   return output; }//Private method for UTF-8 encoding _utf8_encode = function (string) {string = String.Replace (/\r\n/g, "\        n ");        var utftext = "";            for (var n = 0; n < string.length; n++) {var c = string.charcodeat (n);            if (c < d) {utftext + = String.fromCharCode (c);                } else if ((C > 127) && (C < 2048)) {Utftext + = String.fromCharCode ((c >> 6) | 192);            Utftext + = String.fromCharCode ((C & 63) | 128);                } else {utftext + = String.fromCharCode ((c >> 12) | 224);                Utftext + = String.fromCharCode (((c >> 6) & 63) | 128);            Utftext + = String.fromCharCode ((C & 63) | 128);    }} return utftext;        }//Private method for UTF-8 decoding _utf8_decode = function (utftext) {var string = "";        var i = 0;        var c = C1 = C2 = 0;  while (I < utftext.length) {          c = utftext.charcodeat (i);                if (c < +) {string + String.fromCharCode (c);            i++;                } else if ((C > 191) && (C < 224)) {C2 = Utftext.charcodeat (i+1); string + = String.fromCharCode (((C &) << 6) |                (C2 & 63));            i + = 2;                } else {c2 = Utftext.charcodeat (i+1);                C3 = Utftext.charcodeat (i+2); string + = String.fromCharCode (((C &) << 12) | ((C2 &) << 6) |                (C3 & 63));            i + = 3;    }} return string; }}///////////////////////////////////system = require (' system '); Get the parameter var Jspath = System.args[0];var Base64jsonstr = system.args[1];//will base64 decrypt var paramsjsonstr = new Base64 (). Decode ( BASE64JSONSTR);//Convert to JSON object var jsonobj = Json.parse (paramsjsonstr); var option = jsonobj.opt; var width = jsonobj.width; va R height = jsonobj.height; var outfile= Jsonobj.outfile; var filesuffix = Jsonobj.type; function Convert (params) {this.params = params; This.external = {JQUERY3: ' Jquery-1.9.1.min.js ', ECHARTS3: ' Echarts3.8.5.min.js '}; External js this.page = require (' webpage '). Create ();    Client This.page.onConsoleMessage = function (msg, linenum, SourceID) {console.log ('----console----' +msg);    };    var instance = this;        This.page.onError = function (msg, trace) {var msgstack = [' PHANTOM ERROR: ' + msg];             if (trace && trace.length) {msgstack.push (' trace: '); Trace.foreach (function (t) {Msgstack.push (' + ' + (T.file | | t.sourceurl) + ': ' + t.line + (t.function ?             ' (in function ' + t.function + ') ': '));         });        } console.error (Msgstack.join (' \ n ')); Instance.output ("", false, MSG); Failed, return error message};}    Convert.prototype.init = function () {var instance = this; Instance.page.open ("About:blank", function(status)        {//Inject dependent JS packet var hasjquery = instance.page.injectJs (instance.external.JQUERY3);        var Hasechart = Instance.page.injectJs (instance.external.ECHARTS3); Check if JS references success if (!hasjquery | | |!hasechart) {output ("Could not found" + external. JQUERY3 + "or" + external.        ECHARTS3, false);        }//Create Echarts instance.page.evaluate (Instance.createechartsdom, instance.params); Define clipping range, if definition intercepts full screen instance.page.clipRect = {top:0, left:0, width:instance        . Params.width, Height:instance.params.height};        Render var result = Instance.render ();    Successful output, return picture or other information Instance.output (result, true); });}    Convert.prototype.render = function () {var instance = this;        Switch (instance.params.type) {case ' file '://Render picture Instance.page.render (Instance.params.outfile);    return instance.params.outfile; Case ' base64 ': DEfault:var base64 = instance.page.renderBase64 (' PNG ');    return base64;    }}convert.prototype.output = function (content, success, msg) {var instance = this; Console.log (success?    "[SUCCESS]:": "[ERROR]:" + content);    Instance.page.close (); Instance.exit (Instance.params); Exit}; Convert.prototype.exit = function (params) {phantom.exit ();};/ ///Create Echarts DOM Layer//@param params parameter//params.opt//params.width//params.height//PARAMS.O Utfile//Params.type = ' PNG '//convert.prototype.createechartsdom = function (params) {Console.log ("---createechar    tsdom--"+params.width);    var instance = this;    options = params.opt; Dynamically load JS, get Options Data $ (' <script> '). attr (' type ', ' text/javascript ')//. HTML (' var options = ' + Params.op    T). AppendTo (Document.head);    Cancel the animation, otherwise the resulting picture is too fast, there will be no data if (options!== undefined) {options.animation = false; }//The body background is set to white $ (document.body). CSS (' BaCkgroundcolor ', ' white '); Echarts container var container = $ ("<div>"). attr (' id ', ' container '). CSS ({WIDTH:PARAMS.W    Idth, Height:params.height}). AppendTo (Document.body);    var Echart = Echarts.init (container[0]); Echart.setoption (options);} Build, Portal new Convert (jsonobj). Init ();

3,java Code

public class Imagerenderparams {//echart, option public option opt;    The width of the Echart picture is public int width = 600;    Height of the Echart picture public int height = 400;    Echart Picture Save Address public String outfile = "D:/dsafdf.png"; File or PNG public String type = "File";} /** * Create echart Map * * @param imagePath image Save address, for example: D:/demo.png * @throws Exception */Public Imageresul        T createechartimage (option option) throws Exception {if (option = null) {return new Imageresult ();        } String Imgpath = getrandomimagepath (option);        Imagerenderparams params = new Imagerenderparams ();        params.opt = option;        Params.outfile = Imgpath;        Instantiate Gson Gson = new Gson ();        Turn map into json String paramsjsonstr = Gson.tojson (params);        Base64 base64 = new Base64 ();        The conversion to Base64 encoding is to prevent problems when executing the instruction String base64str = base64.encodetostring (Paramsjsonstr.getbytes ("UTF-8")); Called the JS file path Jsfile = Resourceutils.getfile ("Classpath:static/js/echarts-convert.js");        The resulting picture name is String Jsfilepath = Jsfile.getabsolutepath ();        string[] args = new string[3];        Args[0] = Jsfilepath;        ARGS[1] = base64str;        Executes the script try {commandexecutil.phantomjsexec (args);        } catch (Exception e) {throw e;    } return new Imageresult (Imgpath);        } public static class Imageresult {private String imagePath;        Private byte[] ImageData;        Public Imageresult (String imagePath) {this.imagepath = ImagePath;        Public Imageresult () {} public String Getimagepath () {return imagePath; } public byte[] Getimagedata () throws Exception {if (Stringutils.isblank (ImagePath)) {R            Eturn null;            } if (ImageData! = null) {return imageData; } File File = resourceutils.geTfile (ImagePath);            if (file = = null) {return null;            } FileInputStream fi = new FileInputStream (file);            ImageData = new byte[fi.available ()];            Fi.read (ImageData);            Fi.close ();        return imageData; }    }

Render and generate Echarts pictures on the server side using PHANTOMJS