PhantomJS在服務端生成ECharts圖片

1. 準備工作

下載 PhantomJS包 點我進入下載頁面

下載saintlee-echartsconvert-master包 點我進入下載頁面

上傳到linux伺服器上

2. 部署服務

1. 安裝PhantomJS

   # 解壓縮檔案
   tar xjf phantomjs-2.1.1-linux-x86_64.tar.bz2
   # 建立連線
   ln -s /tools/echartsconvert/phantomjs-2.1.1-linux-x86_64/bin/phantomjs /usr/bin/phantomjs 
   # 安裝字型配置
   yum -y install fontconfig
   # 驗證是否安裝成功
   phantomjs --version
    
   

2. 執行eschart

   # Echarts支援中文
   yum -y install bitmap-fonts bitmap-fonts-cjk
   # 解壓縮
   unzip saintlee-echartsconvert-master.zip
   # 啟動
   phantomjs /tools/echartsconvert/echartsconvert/echarts-convert.js -s -p 9090
   

3. java環境執行

pom.xml

<dependency>
    <groupId>org.apache.httpcomponents</groupId>
    <artifactId>httpclient</artifactId>
    <version>4.5.11</version>
    <scope>compile</scope>
</dependency>
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.69</version>
</dependency>
 

EChartsConvertTest.java

public class EChartsConvertTest {
    public static void main(String[] args) {
        String url = "http://192.168.0.164:9090";
        // 不必要的空格最好刪除，字串請求過程中會將空格轉碼成+號
        String optJson = "{title:{text:'ECharts 示例'},tooltip:{},legend:{data:['銷量']},"
                + "xAxis:{data:['襯衫','羊毛衫','雪紡衫','褲子','高跟鞋','襪子']},yAxis:{},"
                + "series:[{name:'銷量',type:'bar',data:[5,20,36,10,10,20]}]}";
        Map<String, String> map = new HashMap<>();
        map.put("opt", optJson);
        try {
            String post = post(url, map, "utf-8");
            JSONObject jsonObject = JSON.parseObject(post);
            String data = jsonObject.getString("data");
            ImageUtil.base64StringToImage(data,"1.png");
        }  catch (Exception e) {
            e.printStackTrace();
        }
    }

    // post請求
    public static String post(String url, Map<String, String> map, String encoding) throws ParseException, IOException {
        String body = "";

        // 建立httpclient物件
        CloseableHttpClient client = HttpClients.createDefault();
        // 建立post方式請求物件
        HttpPost httpPost = new HttpPost(url);

        // 裝填引數
        List<NameValuePair> nvps = new ArrayList<>();
        if (map != null) {
            for (Map.Entry<String, String> entry : map.entrySet()) {
                nvps.add(new BasicNameValuePair(entry.getKey(), entry.getValue()));
            }
        }
        // 設定引數到請求物件中
        httpPost.setEntity(new UrlEncodedFormEntity(nvps, encoding));

        // 執行請求操作，並拿到結果（同步阻塞）
        CloseableHttpResponse response = client.execute(httpPost);
        // 獲取結果實體
        HttpEntity entity = response.getEntity();
        if (entity != null) {
            // 按指定編碼轉換結果實體為String型別
            body = EntityUtils.toString(entity, encoding);
        }
        EntityUtils.consume(entity);
        // 釋放連結
        response.close();
        return body;
    }
}
 

ImageUtil.java

public static void base64StringToImage(String base64String,String filePath) {
    BASE64Decoder decoder = new BASE64Decoder();
    try {
        byte[] bytes1 = decoder.decodeBuffer(base64String);
        ByteArrayInputStream bais = new ByteArrayInputStream(bytes1);
        BufferedImage bi1 = ImageIO.read(bais);
        File f1 = new File(filePath);
        ImageIO.write(bi1, "png", f1);
    } catch (IOException e) {
        log.error("檔案生成異常",e);
    }
}

服務也可做成docker容器

服務目錄如下

Dockerfile檔案

#01.指定基礎映象，並且必須是第一條指令
FROM centos:7
#02.指明該映象的作者和其電子郵件
MAINTAINER chenlin "[email protected]"
#03.在構建映象時，指定映象的工作目錄，之後的命令都是基於此工作目錄，如果不存在，則會建立目錄
WORKDIR /work/soft
#04.新增檔案
#會自動解壓
ADD phantomjs-2.1.1-linux-x86_64.tar.bz2 /work/soft
#不會自動解壓
ADD saintlee-echartsconvert-master.zip /work/soft
#05.安裝軟體
RUN ln -s /work/soft/phantomjs-2.1.1-linux-x86_64/bin/phantomjs /usr/bin/phantomjs \
 && yum -y install fontconfig \
 && yum -y install unzip \
 && unzip saintlee-echartsconvert-master.zip
#06.Echarts支援中文
RUN yum -y install bitmap-fonts bitmap-fonts-cjk
#07.配置環境變數
ENV PJS_HOME=/work/soft/phantomjs-2.1.1-linux-x86_64
ENV PATH=$PATH:$PJS_HOME/bin
#08.執行軟體
ENTRYPOINT ["phantomjs", "/work/soft/echartsconvert/echarts-convert.js", "-s", "-p", "9090"]
#09.暴露埠
EXPOSE 9090

在dockerfile目錄下執行

#建立映象
docker build -t test/echartsconvert:0.0.1 .
# 執行映象
docker run -it test/echartsconvert:0.0.1 /bin/bash