記錄學習phantomjs+echarts-convert.js 生成圖表圖檔過程

轉載自：http://www.5180it.com/bbs/admin/1/126060.html

最近項目中要生成統計報表，并導出word，但是我們一般的報表都是通過echarts在浏覽量生成，是以我們無法直接導出，是以這裡借助了phantomjs幫我生成，此處都是使用最新的版本phantomjs-2.1.1，特此記錄

1.Phantomjs：

下載下傳：https://phantomjs.org/download.html

PhantomJS官方位址：http://phantomjs.org/。

PhantomJS官方API：http://phantomjs.org/api/。

PhantomJS官方示例：http://phantomjs.org/examples/。

PhantomJS GitHub：https://github.com/ariya/phantomjs/

window：

添加的環境變量為：;D:\phantomjs\bin

phantomjs --version 測試版本提示版本說明安裝成功

linux：

tar -jxvf phantomjs-2.1.1-linux-x86_64.tar.bz2

ln -s /var/chart/phantomjs-2.1.1-linux-x86_64/bin/phantomjs /usr/bin/

ln -sf /var/chart/phantomjs-2.1.1-linux-x86_64/bin/phantomjs /usr/local/bin/phantomjs

方法一：(推薦使用)

①、用指令授權：ln -s /usr/echarts/phantomjs/bin/phantomjs /usr/bin/

②、在/usr/echarts/phantomjs/bin下執行chmod 777 phantomjs 給執行的權限

③、執行phantomjs –version或者phantomjs –v得到版本号則為成功

方法二：

①、在/usr/echarts/phantomjs/bin下執行chmod 777 phantomjs 給執行的權限

②、添加環境變量

指令：vi /etc/profile

在最後一行添加 export PATH=$PATH:/usr/echarts/phantomjs/bin

③、執行 source /etc/profile然後重新開機電腦shutdown -r now

export PATH=$PATH:/var/chart/phantomjs-2.1.1-linux-x86_64/bin

2、echarts-convert

下載下傳：https://gitee.com/saintlee/echartsconvert

一個配合phantomjs，在服務端生成EChart圖檔的工具包。

echarts-conver參數

詳見：https://gitee.com/saintlee/echartsconvert

-s或--server：開啟服務監聽，如果開啟服務端，則-o不生效，這也就意味不能使用腳本指令生成圖檔；

-p或--port：端口号，隻有-s啟用時生效，改變監聽端口号；

-o或--opt：ECharts的option,這裡是json字元串，最外層不加引号；

示例：{title:{text:'ECharts示例'},tooltip:{},legend:{data:['銷量']},xAxis:{data:['襯衫','羊毛衫','雪紡衫','褲子','高跟鞋','襪子']},yAxis:{},series:[{name:'銷量',type:'bar',data:[5,20,36,10,10,20]}]}

-t或--type：生成類型file或base64，file是生成圖檔，base64是生成Base64字元串；

-f或--outfile：檔案輸出路徑，隻有--type=file時生效，如果不指定，則在腳本目錄下建立一個tmp檔案夾，将圖檔以時間戳為名字，儲存到tmp目錄下；

-w或--width：生成的圖檔寬度，預設800像素；

-h或--height：生成的圖檔高度，預設400像素。

生成圖檔指令：

phantomjs F:\ws\export02\tools\echarts-convert.js -infile F:\ws\export02\tools\option.js -width 800 -height 800

作為server

隻能生成簡單echarts，傳回圖檔base64

phantomjs /usr/echarts/echartsconvert/echarts-convert.js -s -p 6666

背景啟動

nohup phantomjs /usr/echarts/echartsconvert/echarts-convert.js -s -p 9090 &

9090是端口号，echartsconvert預設端口也是9090

指令行

作為腳本使用生成本地圖檔，能生成較複雜echarts

phantomjs /app/echartsconvert/echarts-convert.js -o [echartsOption] -t file -f [filePath] [-w width] -h[height]

phantomjs /var/chart/echartsconvert-master/echarts-convert.js -infile /var/chart/option.js -width 800 -height 800 -outfile /var/chart/111.png

發現 -infile沒有了，一下是我的一個成功生成的例子

E:\Desktop\chart\phantomjs-2.1.1-windows\phantomjs-2.1.1-windows\bin\phantomjs E:\Desktop\chart\echartsconvert-master\echartsconvert-master\echarts-convert.js -o {'grid':{'top':20,'right':20,'bottom':40,'left':40},'legend':{'type':'scroll','bottom':'0','left':'center'},'tooltip':{'trigger':'item'},'series':[{'name':'','type':'pie','radius':'50%25','avoidLabelOverlap':true,'itemStyle':{'borderColor':'#fff','borderWidth':2},'label':{'show':true,'formatter':'{b}{d}%25'},'emphasis':{'label':{'show':true,'fontSize':'13'}},'data':[{'name':'口腔裝置','value':3,'pieCount':3},{'name':'消毒裝置3.22%25','value':10,'pieCount':10},{'name':'醫用電子儀器','value':31,'pieCount':31},{'name':'醫用高頻儀器裝置','value':8,'pieCount':8},{'name':'雷射儀器裝置','value':10,'pieCount':10},{'name':'中醫儀器裝置','value':3,'pieCount':3},{'name':'手術急救裝置','value':69,'pieCount':69},{'name':'體外循環裝置','value':15,'pieCount':15},{'name':'醫用磁共振裝置','value':2,'pieCount':2},{'name':'醫用X線裝置','value':21,'pieCount':21},{'name':'臨床檢驗分析儀器','value':34,'pieCount':34},{'name':'醫用超聲儀器','value':40,'pieCount':40},{'name':'實體治療及體療裝置','value':8,'pieCount':8},{'name':'光學儀器及窺鏡','value':45,'pieCount':45},{'name':'病房護理裝置','value':4,'pieCount':4},{'name':'醫用核素裝置','value':1,'pieCount':1},{'name':'其他','value':26,'pieCount':26}],'top':-50}]} -t file -f E:\Desktop\chart\tmpfiles\1682063489594.png

以下記錄一下學習過程的問題：

在option裡如果出現 %，則執行會挂掉

需要将%替換為%25

轉載：http://www.5180it.com/bbs/admin/1/126060.html