前端EChart圖表轉換爲圖片保存到服務器路徑

前端代碼：

            var topValue=document.getElementsByName("top")[0].value;

            //IM
            var myChart = echarts.init(document.getElementById('im'));
            //獲取json文件的數據放入柱狀圖中
            var username=[];//存儲截斷後的用戶名的數組
            var username1=[];//存儲原始長度的用戶名的數組
            var usernameAll1=[];//[i,count],i是第幾個用戶名的序號，count是次數
            var countAll=[];//中間數組
            var count=[];  
            if(ImJson){  //取數據組
                for(var i=0;i<ImJson.length;i++){
                    countAll=[];
                    if(ImJson[i].username!=null){
                        username1.push(ImJson[i].username);
                    }else{
                        username1.push("未知");
                    }

                    if(ImJson[i].username!=null&&getLength(ImJson[i].username)>6){
                        ImJson[i].username=cutStr(ImJson[i].username,6);
                    }

                    if(ImJson[i].username!=null){
                        username.push(ImJson[i].username);
                    }else{
                        username.push("未知");
                    }
                    count.push(ImJson[i].count);  

                    countAll.push(i);
                    countAll.push(ImJson[i].count);
                    usernameAll1.push(countAll);
                }
            };
            var option = {
                    title: {
                        text: 'IM TOP10排名',
                        left:'40%'
                    },
                    animation: false, // 關閉動畫效果
                    legend: {

                    },
/*                  toolbox: {
                        show:true,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            dataView: {readOnly: true},
                            //magicType: {type: ['line', 'bar']},//折線圖、柱狀圖切換
                            restore: {show:false},//恢復，即刷新圖表
                            saveAsImage: {}//保存爲圖片
                        }
                    }, */
                    xAxis: [
                        {
                            type : 'category',
                            //nameLocation:'start',
                            data : username,
                            axisLabel :{  
                                interval:0,
                                formatter:function(value,index)  
                                {  
                                    //debugger  
                                    if (index % 2 != 0) {  
                                        return '\n\n' + value;  
                                    }  
                                    else {  
                                        return value;  
                                    }  
                                }  
                            },
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type : 'value',
                            name: '單位：次',
                            data:count
                        }
                    ],
                    series: [
                        {
                            name:"IM",
                            type:'bar',
                            itemStyle: {
                                normal: {
            　　　　　　　　　　　　　　//好，這裏就是重頭戲了，定義一個list，然後根據所以取得不同的值，這樣就實現了，
                                    color: function(params) {
                                        // build a color map as your need.
                                        var colorList = [
                                          '#C1232B','#000080','#778899','#E87C25','#27727B',
                                           '#0000CD','#006400','#FAD860','#770077','#60C0DD'
                                        ];
                                        return colorList[params.dataIndex]
                                    }
                                }
                            },

                            barWidth: '70%',
                            data:usernameAll1
                        }
                    ]
                };
            var option11 = {
                    title: {
                        text: 'IM TOP20排名',
                        left:'40%'
                    },

                    legend: {

                    },
                    xAxis: [
                        {
                            type : 'category',
                            nameLocation:'start',
                            data : username,
                            axisLabel :{  
                                interval:0,
                                formatter:function(value,index)  
                                {  
                                    //debugger  
                                    if (index % 2 != 0) {  
                                        return '\n\n' + value;  
                                    }  
                                    else {  
                                        return value;  
                                    }  
                                }  
                            },
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type : 'value',
                            name: '單位：次',
                            data:count
                        }
                    ],
                    series: [
                        {
                            name:'IM',
                            type:'bar',
                            itemStyle: {
                                normal: {
            　　　　　　　　　　　　　　//好，這裏就是重頭戲了，定義一個list，然後根據所以取得不同的值，這樣就實現了，
                                    color: function(params) {
                                        // build a color map as your need.
                                        var colorList = [
                                          '#C1232B','#000080','#778899','#E87C25','#27727B',
                                           '#0000CD','#006400','#FAD860','#770077','#60C0DD',
                                           '#444444','#8B4513','#FF8C00','#B8860B','#008080',
                                           '#483D8B','#DC143C','#708090','#20B2AA','#808000'
                                        ];
                                        return colorList[params.dataIndex]
                                    }
                                }
                            },

                            barWidth: '70%',
                            data:usernameAll1
                        }
                    ]
                };

            // 使用剛指定的配置項和數據顯示圖表。
            if(topValue=="top10") myChart.setOption(option);
            else myChart.setOption(option11);

            /**
             * 此處爲關鍵代碼，ajax傳輸圖片信息.
             */
             postImage();
            function postImage() {  
                var imageName="image1.png";
                // 向後臺發起請求保存圖片到指定目錄.
                $.ajax({
                    type: 'POST',
                    dataType: "json",
                    url: "${ctx}/sys/acidEvent/saveImage?imageName="+imageName,
                    data: {"picInfo": myChart.getDataURL()},
                    success: function() {
                        alert('通過post請求傳輸數據成功!');
                    }
                });
            }

簡而言之，就是調用getDataURL()方法獲取圖片信息，發送到後臺。

後臺代碼：

     /**
     * 獲取並保存EChart圖片到本地.
     * @param picInfo 圖片信息
     * @param imageName 圖片名字
     */
    @RequestMapping(value="/saveImage",method=RequestMethod.POST)
    private void saveImage(String picInfo, @RequestParam("imageName") String imageName) {
        if (StringUtils.isBlank(picInfo)) {
            System.out.println("picInfo爲空,未從前臺獲取到base64圖片信息!");
            return;
        }
//      String imagePath=System.getProperty("evan.webapp")+"/WEB-INF";
//      System.out.println(System.getProperty("evan.webapp"));//獲取服務器根路徑，成功，不過需要在web.xml中進行一些配置
        //獲取服務器根路徑到/static/images/的目錄路徑
        String imagePath= ContextLoader.getCurrentWebApplicationContext().getServletContext().getRealPath("/static/images/")+imageName;
        System.out.println(imagePath);
        // 傳遞過程中  "+" 變爲了 " ".
        String newPicInfo = picInfo.replaceAll(" ", "+");
        decodeBase64(newPicInfo, new File(imagePath));
        //log.warn("從echarts中生成圖片的的路徑爲:{}", picPath);
    }

    /**
     * 解析Base64位信息並輸出到某個目錄下面.
     * @param base64Info base64串
     * @param picPath 生成的文件路徑
     * @return 文件地址
     */
    private File decodeBase64(String base64Info, File picPath) {
        if (StringUtils.isEmpty(base64Info)) {
            return null;
        }

        // 數據中：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABI4AAAEsCAYAAAClh/jbAAA ...  在"base64,"之後的纔是圖片信息
        String[] arr = base64Info.split("base64,");

        // 將圖片輸出到系統某目錄.
        OutputStream out = null;
        try {
            // 使用了Apache commons codec的包來解析Base64
            byte[] buffer = Base64.decodeBase64(arr[1]);
            out = new FileOutputStream(picPath);
            out.write(buffer);
        } catch (IOException e) {
            e.printStackTrace();
            //log.error("解析Base64圖片信息並保存到某目錄下出錯!", e);
        } finally {
            IOUtils.closeQuietly(out);
        }

        return picPath;
    }

代碼內都有相應的註釋，我也就不廢話了哈。

最終保存下來的圖片示例：

有問題可以留言討論區哦，小樹會在第一時間回覆。