echarts-convert.js demo 點擊下載

1、本地安裝phantom.js插件

點擊下載

2、更改文件路徑

（D:\phantomjs-2.1.1-windows\bin）改為本地項目文件路徑
在這里插入圖片描述

3、打開cmd命令行，并格式化語言

運行以下命令將命令行語言改為中文簡體

chcp 65001

在這里插入圖片描述

4、使用

運行以下命令

phantomjs D:\phantomjs-2.1.1-windows\bin\echarts-convert.js -infile D:\phantomjs-2.1.1-windows\bin\option-zd.js -width 800 -height 300 -option eyJhbGFybSI6MC4wMDIsImVhcmx5QWxhcm0iOjAuMDAxLCJpbWFnZU5hbWUiOiJiNzBkNjQ4ZS1iMTkzLTQxMjctYjRlZC03M2Y0Njc4MWYwMDAtY2I2Mjg5ZDMtYmFiYi00MDU0LTk0YTctMjUyNjA5NzBjZDNkIiwiaW1hZ2VUeXBlIjoyLCJzZXJpZXMiOlt7ImRhdGEiOlswLjAxNTUsMC4wMTQ0LDAuMDE0NywwLjAxNjIsMC4wMTUyLDAuMDEzOCwwLjAxNDMsMC4wMTU2LDAuMDE0OCwwLjAxNjMsMC4wMTQ3LDAuMDE1NCwwLjAxNTQsMC4wMTQ4LDAuMDEyOSwwLjAxMzgsMC4wMTQyLDAuMDE0MiwwLjAxMiwwLjAxNDEsMC4wMTI5LDAuMDEzNiwwLjAxMzUsMC4wMTIzLDAuMDEyOSwwLjAxMjMsMC4wMTI3LDAuMDExOSwwLjAxMjcsMC4wMTMxLDAuMDE1NiwwLjAxNTUsMC4wMTMyLDAuMDEzMywwLjAxMjUsMC4wMTM4LDAuMDEyNSwwLjAxNDgsMC4wMTIzLDAuMDEyNiwwLjAxMzEsMC4wMTM5LDAuMDEzNCwwLjAxMjYsMC4wMTIsMC4wMTMyLDAuMDExOCwwLjAxNDYsMC4wMTQ1LDAuMDEzOCwwLjAxMzksMC4wMTc4LDAuMDE2LDAuMDEzOCwwLjAxMjksMC4wMTU0LDAuMDEzLDAuMDEyMywwLjAxMzksMC4wMTI0LDAuMDEyNywwLjAxNDgsMC4wMTg1LDAuMDEzNiwwLjAxMjEsMC4wMTI5LDAuMDEzNiwwLjAxMjcsMC4wMTEzLDAuMDExNiwwLjAxMjUsMC4wMTEyLDAuMDExNSwwLjAxMjQsMC4wMTQsMC4wMTEyLDAuMDEyLDAuMDEzMSwwLjAxMjksMC4wMTE4LDAuMDExNywwLjAxMzMsMC4wMTIsMC4wMTM0LDAuMDEzLDAuMDEyNiwwLjAxMjEsMC4wMTA5LDAuMDE3LDAuMDEyNSwwLjAxMzksMC4wMTIzLDAuMDE0MiwwLjAxMzEsMC4wMTE3LDAuMDE0LDAuMDEyNywwLjAxMywwLjAxMjEsMC4wMTE5LDAuMDEyMiwwLjAxMiwwLjAxMzksMC4wMTM1LDAuMDEzMiwwLjAxNDQsMC4wMTMxLDAuMDE0NywwLjAxMzUsMC4wMTQ3LDAuMDE1NywwLjAxNDMsMC4wMTQ2LDAuMDE0LDAuMDE1NCwwLjAxNDcsMC4wMTM1LDAuMDE0MiwwLjAxNCwwLjAxNDUsMC4wMTQsMC4wMTIxLDAuMDEyNCwwLjAxMjgsMC4wMTY2LDAuMDEzNiwwLjAxMzgsMC4wMTI4LDAuMDEyNywwLjAxMzEsMC4wMTI3LDAuMDEzNCwwLjAxMTgsMC4wMTMsMC4wMTE5LDAuMDExNiwwLjAxMDQsMC4wMTE3LDAuMDEwOSwwLjAxMDZdLCJuYW1lIjoi6YCf5bqm5oyv5Yqo5oC75YC8IiwidHlwZSI6ImxpbmUifV0sInVuaXQiOiJtbS9zIiwieEF4aXMiOnsiZGF0YSI6WyIyMDIzLTA3LTI2IDEzOjA2OjIxIiwiMjAyMy0wNy0yNiAxMzowNzo0OSIsIjIwMjMtMDctMjYgMTM6MDk6MTciLCIyMDIzLTA3LTI2IDEzOjEwOjQ0IiwiMjAyMy0wNy0yNiAxMzoxMjoxMiIsIjIwMjMtMDctMjYgMTM6MTM6MzkiLCIyMDIzLTA3LTI2IDEzOjE1OjA3IiwiMjAyMy0wNy0yNiAxMzoxNjozNiIsIjIwMjMtMDctMjYgMTM6MTg6MDMiLCIyMDIzLTA3LTI2IDEzOjE5OjMxIiwiMjAyMy0wNy0yNiAxMzoyMDo1OCIsIjIwMjMtMDctMjYgMTM6MjI6MjUiLCIyMDIzLTA3LTI2IDEzOjIzOjUzIiwiMjAyMy0wNy0yNiAxMzoyNToyMCIsIjIwMjMtMDctMjYgMTM6Mjg6MDkiLCIyMDIzLTA3LTI2IDEzOjMxOjAzIiwiMjAyMy0wNy0yNiAxMzozNToyNSIsIjIwMjMtMDctMjYgMTM6Mzg6MTkiLCIyMDIzLTA3LTI2IDEzOjM5OjQ3IiwiMjAyMy0wNy0yNiAxMzo0Mjo0MSIsIjIwMjMtMDctMjYgMTM6NDQ6MDkiLCIyMDIzLTA3LTI2IDEzOjQ1OjM3IiwiMjAyMy0wNy0yNiAxMzo0NzowNCIsIjIwMjMtMDctMjYgMTM6NDg6MzIiLCIyMDIzLTA3LTI2IDEzOjQ5OjU4IiwiMjAyMy0wNy0yNiAxMzo1MToyNiIsIjIwMjMtMDctMjYgMTM6NTI6NTMiLCIyMDIzLTA3LTI2IDEzOjU0OjIxIiwiMjAyMy0wNy0yNiAxMzo1NTo0OSIsIjIwMjMtMDctMjYgMTM6NTc6MTciLCIyMDIzLTA3LTI2IDEzOjU4OjQ0IiwiMjAyMy0wNy0yNiAxNDowMDoxMiIsIjIwMjMtMDctMjYgMTQ6MDE6MzkiLCIyMDIzLTA3LTI2IDE0OjAzOjA3IiwiMjAyMy0wNy0yNiAxNDowNDozNSIsIjIwMjMtMDctMjYgMTQ6MDY6MDIiLCIyMDIzLTA3LTI2IDE0OjA3OjMwIiwiMjAyMy0wNy0yNiAxNDowODo1OCIsIjIwMjMtMDctMjYgMTQ6MTA6MjUiLCIyMDIzLTA3LTI2IDE0OjExOjUyIiwiMjAyMy0wNy0yNiAxNDoxMzoxOSIsIjIwMjMtMDctMjYgMTQ6MTQ6NDciLCIyMDIzLTA3LTI2IDE0OjE2OjE0IiwiMjAyMy0wNy0yNiAxNDoxNzo0MiIsIjIwMjMtMDctMjYgMTQ6MTk6MTAiLCIyMDIzLTA3LTI2IDE0OjIyOjQ3IiwiMjAyMy0wNy0yNiAxNDoyNDoxNSIsIjIwMjMtMDctMjYgMTQ6MjU6NDIiLCIyMDIzLTA3LTI2IDE0OjI3OjA5IiwiMjAyMy0wNy0yNiAxNDozNDoyNiIsIjIwMjMtMDctMjYgMTQ6MzU6NTMiLCIyMDIzLTA3LTI2IDE0OjM3OjIxIiwiMjAyMy0wNy0yNiAxNDozODo0NyIsIjIwMjMtMDctMjYgMTQ6NDA6MTUiLCIyMDIzLTA3LTI2IDE0OjQxOjQyIiwiMjAyMy0wNy0yNiAxNDo0NDozNiIsIjIwMjMtMDctMjYgMTQ6NDY6MDMiLCIyMDIzLTA3LTI2IDE0OjQ3OjMwIiwiMjAyMy0wNy0yNiAxNDo0ODo1NyIsIjIwMjMtMDctMjYgMTQ6NTA6MjQiLCIyMDIzLTA3LTI2IDE0OjUxOjUyIiwiMjAyMy0wNy0yNiAxNDo1MzoxOCIsIjIwMjMtMDctMjYgMTQ6NTQ6NDUiLCIyMDIzLTA3LTI2IDE0OjU3OjQwIiwiMjAyMy0wNy0yNiAxNDo1OTowNiIsIjIwMjMtMDctMjYgMTU6MDc6NDkiLCIyMDIzLTA3LTI2IDE1OjIwOjUyIiwiMjAyMy0wNy0yNiAxNToyMjoxOSIsIjIwMjMtMDctMjYgMTU6MjM6NDYiLCIyMDIzLTA3LTI2IDE1OjI1OjEzIiwiMjAyMy0wNy0yNiAxNToyNjo0MCIsIjIwMjMtMDctMjYgMTU6Mjg6MDciLCIyMDIzLTA3LTI2IDE1OjI5OjM0IiwiMjAyMy0wNy0yNiAxNTozMTowMSIsIjIwMjMtMDctMjYgMTU6MzI6MjgiLCIyMDIzLTA3LTI2IDE1OjMzOjU1IiwiMjAyMy0wNy0yNiAxNTozNToyMiIsIjIwMjMtMDctMjYgMTU6MzY6NDkiLCIyMDIzLTA3LTI2IDE1OjM4OjE2IiwiMjAyMy0wNy0yNiAxNTozOTo0NCIsIjIwMjMtMDctMjYgMTU6NDE6MTEiLCIyMDIzLTA3LTI2IDE1OjQyOjM4IiwiMjAyMy0wNy0yNiAxNTo0NDowNSIsIjIwMjMtMDctMjYgMTU6NDU6MzIiLCIyMDIzLTA3LTI2IDE1OjQ2OjU5IiwiMjAyMy0wNy0yNiAxNTo0ODoyNiIsIjIwMjMtMDctMjYgMTU6NDk6NTMiLCIyMDIzLTA3LTI2IDE1OjUxOjIxIiwiMjAyMy0wNy0yNiAxNTo1Mjo0OCIsIjIwMjMtMDctMjYgMTU6NTQ6MTQiLCIyMDIzLTA3LTI2IDE1OjU1OjQyIiwiMjAyMy0wNy0yNiAxNTo1NzowOSIsIjIwMjMtMDctMjYgMTU6NTg6MzYiLCIyMDIzLTA3LTI2IDE2OjAwOjA0IiwiMjAyMy0wNy0yNiAxNjowMTozMSIsIjIwMjMtMDctMjYgMTY6MDI6NTgiLCIyMDIzLTA3LTI2IDE2OjA0OjI1IiwiMjAyMy0wNy0yNiAxNjowNTo1MiIsIjIwMjMtMDctMjYgMTY6MDc6MTkiLCIyMDIzLTA3LTI2IDE2OjA4OjQ2IiwiMjAyMy0wNy0yNiAxNjoxMDoxMyIsIjIwMjMtMDctMjYgMTY6MTE6NDAiLCIyMDIzLTA3LTI2IDE2OjEzOjA3IiwiMjAyMy0wNy0yNiAxNjoxNDozNSIsIjIwMjMtMDctMjYgMTY6MjA6MjQiLCIyMDIzLTA3LTI2IDE2OjIxOjUxIiwiMjAyMy0wNy0yNiAxNjoyMzoxOCIsIjIwMjMtMDctMjYgMTY6MjQ6NDUiLCIyMDIzLTA3LTI2IDE2OjI2OjExIiwiMjAyMy0wNy0yNiAxNjoyNzozOCIsIjIwMjMtMDctMjYgMTY6Mjk6MDYiLCIyMDIzLTA3LTI2IDE2OjMwOjMzIiwiMjAyMy0wNy0yNiAxNjozMjowMCIsIjIwMjMtMDctMjYgMTY6MzM6MjciLCIyMDIzLTA3LTI2IDE2OjM0OjU0IiwiMjAyMy0wNy0yNiAxNjozNjoyMSIsIjIwMjMtMDctMjYgMTY6Mzc6NDgiLCIyMDIzLTA3LTI2IDE2OjM5OjE1IiwiMjAyMy0wNy0yNiAxNjo0MDo0MyIsIjIwMjMtMDctMjYgMTY6NDI6MTAiLCIyMDIzLTA3LTI2IDE2OjQzOjM3IiwiMjAyMy0wNy0yNiAxNjo0NTowNCIsIjIwMjMtMDctMjYgMTY6NDY6MzEiLCIyMDIzLTA3LTI2IDE2OjQ3OjU4IiwiMjAyMy0wNy0yNiAxNjo0OToyNSIsIjIwMjMtMDctMjYgMTY6NTA6NTMiLCIyMDIzLTA3LTI2IDE2OjUyOjE5IiwiMjAyMy0wNy0yNiAxNjo1Mzo0NiIsIjIwMjMtMDctMjYgMTY6NTU6MTMiLCIyMDIzLTA3LTI2IDE2OjU2OjQwIiwiMjAyMy0wNy0yNiAxNjo1ODowNyIsIjIwMjMtMDctMjYgMTY6NTk6MzQiLCIyMDIzLTA3LTI2IDE3OjAxOjAxIiwiMjAyMy0wNy0yNiAxNzowMjoyOCIsIjIwMjMtMDctMjYgMTc6MDM6NTUiLCIyMDIzLTA3LTI2IDE3OjA1OjIyIiwiMjAyMy0wNy0yNiAxNzowNjo0OSIsIjIwMjMtMDctMjYgMTc6MDg6MTYiLCIyMDIzLTA3LTI2IDE3OjA5OjQ0IiwiMjAyMy0wNy0yNiAxNzoxMToxMSJdfX0=

在這里插入圖片描述
拖入cmd直接回車運行

。。。

最有有打印compele 表示完成啦！這里只能做測試具體使用需要后端接收base64數據接收方式就是

console.log(base64);

這里正是用的時候不能刪哦！

五、效果展示

由于接下來需要后端代碼介入才能正式生成本地文件所以這里就先不做介紹，只看最終使用生成的效果圖

在這里插入圖片描述

說明：

本次使用base64加密，js解密，為了避免命令不支持某些符號導致執行失敗
命令文件放置bat運行文件中，否則命令行一次粘貼不全
以下是本次使用的配置，僅供參考

配置文件

echarts-convert.js


(function () {var system = require('system');var fs = require('fs');var config = {// define the location of js filesJQUERY: 'jquery-3.6.0.min.js',ECHARTS: 'echarts.min.js',// default container width and heightDEFAULT_WIDTH: '600',DEFAULT_HEIGHT: '700',DEFAULT_OPTION: {}}, parseParams, render, pick, usage;// 提示：命令格式usage = function () {console.log("\n" + "Usage: phantomjs echarts-convert.js -infile URL -width width -height height" + "\n");};// 選擇是否存在設置長寬，否使用默認長寬pick = function () {var args = arguments, i, arg, length = args.length;//console.log("length : "+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;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;page.onConsoleMessage = function (msg) {console.log(msg);};page.onAlert = function (msg) {console.log(msg);};createChart = function (inputOption, width, height, option) {var counter = 0;function decrementImgCounter() {counter -= 1;if (counter < 1) {console.log("The images load error");}}function loadScript(varStr, codeStr) {var script = $('<script>').attr('type', 'text/javascript');script.html('var ' + varStr + ' = ' + codeStr);document.getElementsByTagName("head")[0].appendChild(script[0]);if (window[varStr] !== undefined) {console.log('Echarts.' + varStr + ' has been parsed');}}function loadImages() {var images = $('image'), i, img;if (images.length > 0) {counter = images.length;for (i = 0; i < images.length; i += 1) {img = new Image();img.onload = img.onerror = decrementImgCounter;img.src = images[i].getAttribute('href');}} else {console.log('The images have been loaded');}}// load opitonsif (inputOption != 'undefined') {// parse the optionsloadScript('options', inputOption);// disable the animationoptions.animation = false;}// we render the image, so we need set background to white.$(document.body).css('backgroundColor', 'white');var container = $("<div>").appendTo(document.body);container.attr('id', 'container');container.css({width: width,height: height});// render the chartvar myChart = echarts.init(container[0]);// 假設這是解密后的字符串數組  decodeURIconst initArr = JSON.parse(decodeURIComponent(escape(atob(option))));// 圖例if(initArr.imageType ===1 && initArr.legend){options.legend.data =initArr.legend.data;}// 單位if(initArr.unit){options.yAxis.name =initArr.unit;}// x軸if(initArr.xAxis){options.xAxis = initArr.xAxis;}const markLine ={symbol:"none",type: 'line',markLine:{precision:5,label:{position:'end',show: false,},data:[{yAxis: 0,lineStyle :{type:"dotted",color:'#f56c6c'},},{yAxis: 0,lineStyle :{type:"dotted",color:'#e6a23c'},}]}};// 報警線 預警線if( initArr.imageType === 2){markLine.markLine.data[0].yAxis = initArr.alarm;markLine.markLine.data[1].yAxis = initArr.earlyAlarm;initArr.series.push(markLine)}// 數據options.series = initArr.seriesmyChart.setOption(options);// load imagesloadImages();return myChart.getDataURL();};// parse the paramspage.open("about:blank", function (status) {// inject the dependency jspage.injectJs(config.JQUERY);page.injectJs(config.ECHARTS);var width = pick(params.width, config.DEFAULT_WIDTH);var height = pick(params.height, config.DEFAULT_HEIGHT);var option = pick(params.option, config.DEFAULT_OPTION);// create the chartvar base64 = page.evaluate(createChart, params.options, width, height,option);console.log(base64);// define the clip-rectangleconsole.log('\nbase64 complete');// exitphantom.exit();});};// get the argsvar params = parseParams();// validate the paramsif (params.options === undefined || params.options.length === 0) {console.log("ERROR: No options or infile found.");usage();phantom.exit();}// render the imagerender(params);
}());

option.js

option = {color: ['#18CD71', '#A2FFD0', '#FFFE95', '#FF9000', '#EE7CFF', '#0FD5F9', '#0487ED', '#0666E8'],legend: {data: [],orient: 'horizontal',align: 'right',icon: 'rect',itemWidth: 10,itemHeight: 2, show: true,// right: '2%',top: 2,tooltip: {show: true}},grid: {left: '2%',right: '2%',bottom: '10%',top: '15%',containLabel: true},splitLine: {show: false},axisLine: {show: true,},xAxis: {type: 'time',nameTextStyle: {padding: [0, 0, 0, -2],color: '#c1cadf',align: 'left',fontSize: 12,fontWeight: 400,lineHeight: 10},axisLabel: {show: true,margin: 10,interval: 0,rotate: 38,textStyle: {fontSize: 10}, }},yAxis: {type: 'value',name: '℃',nameTextStyle: {padding: [0, -10, 0, 0],color: '#c1cadf',align: 'right',fontSize: 12,lineHeight: 12},splitLine: {show: true,lineStyle: {color: '#CBCCCE'}},axisLine: {show: true,},axisLabel: {show: true,margin: 10,interval: 0,textStyle: {fontSize: 10},}},series: [],tooltip: {trigger: 'axis'},
};