echarts图片保存

一.js：

function updateChart(versionList,rateList) {    
    option = {
            title: {
                text: '拖动频次'
            },        
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                itemWidth:15,  
                itemHeight:15,  
                data:['拖动频次[拖动次数/小时]'],
            },
            animation : false,
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : versionList,
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis : [
                        {
                            type : 'value',
                            name:'次/小时',
                            axisLabel: {
                                formatter: '{value}',                        
                            }    
                        },
                        
                    ],
            series : [
                {
                    name:'拖动频次[拖动次数/小时]',
                    type:'bar',
                    barWidth: '50%',    
                    itemStyle:{
                         normal:{
                             color:'rgba(58,95,205,1)',
                             borderType : 'dashed',
                             barBorderRadius:[10, 10, 10, 10],
                         }
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            textStyle: {
                              color: 'black'
                            }
                        }
                     },                    
                    data:rateList                                       
                }
            ]
            
        };

        chart.setOption(option, true);    
        var projectId = GetQueryString('projectId');
        picLoad(chart.getDataURL(),"/Btm20LCDDragfrequency"+projectId+".png");
}

注意： animation : false, 否则图片不能保存

function picLoad(dataPic,picName){
    
    $.ajax({
        type : 'POST',
        url : '/ajax/loadPic',
        data : {
            "data" :dataPic,
            "name" : picName
        },
        contentType : "application/x-www-form-urlencoded",
        success : function(data) {
            
        }
    });
}
解释：
1.chart.getDataURL()方法获取base64编码，获取的结果是：
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABI4AAAEsCAYAAAClh/jbAAA ...  在"base64,"之后的才是图片信息

二.后台

@RequestMapping(value = "/loadPic", method = RequestMethod.POST, produces = {"application/json;charset=UTF-8"})
    public @ResponseBody Map<String, Object> reg(HttpServletRequest request, HttpServletResponse response) {
        
        Map<String, Object> result = new HashMap<String, Object>();
        
        
        String      name = request.getParameter("name");
        String[] picData = request.getParameter("data").split(",");
        
        try {                                                                                                                                                                                                                      
            byte[] n = new BASE64Decoder().decodeBuffer(picData[1]);
            
            String path = Thread.currentThread().getContextClassLoader().getResource("").getPath(); 
            path = path + "folderPath.properties";
            Properties prop = new Properties();
            prop.load(new FileInputStream(path));
            String filePath = prop.getProperty("UploadPicImagePath");
            File fp = new File(filePath);
            if (!fp.exists()) {
                fp.mkdirs();
            }            
            OutputStream out = new FileOutputStream(new File(filePath+name));  
            out.write(n);  
            out.flush();
            out.close();
            result.put("code", 200);
        } catch (FileNotFoundException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }  
                        
        logger.info(name+" save success");
        return result;
        
    }

三.获取图片

@Override
    public boolean sendFingerReport(Integer projectId, Integer versionId, String userGroup,
            Btm20LCDEmailConfig emailConfig) throws Exception {
        Map<String, Object> emailMap = new HashMap<String, Object>();
        // 版本
        Version version = this.versionService.getVersionById(versionId);
        emailMap.put("version", version);
        emailMap.put("projectId", projectId);        

        String path = Thread.currentThread().getContextClassLoader().getResource("").getPath();
        path = path + "folderPath.properties";
        Properties prop = new Properties();
        prop.load(new FileInputStream(path));
        String filePath = prop.getProperty("UploadPicImagePath");
        File f1 = new File(filePath + "/Btm20LCDAPPBrigthDrag" + projectId + ".png");
        if (f1.exists()) {
            emailMap.put("Btm20LCDAPPBrigthDrag", filePath + "/Btm20LCDAPPBrigthDrag" + projectId + ".png");
        }        
                
        // 收件人
        String receiver = "";
        if (emailConfig != null && !CheckUtils.isNullOrBlank(emailConfig.getReciverId())) {
            TmGroup tmGroup = this.tmGroupService.selectTmGroupById(emailConfig.getReciverId());
            if (!CheckUtils.isNullOrBlank(tmGroup) && !CheckUtils.isNullOrBlank(tmGroup.getMemberArr())) {
                String[] groupMembers = tmGroup.getMemberArr().split(",");
                for (int i = 0; i < groupMembers.length; i++) {
                    receiver += this.personInfoService.selectPersonInfoById(Integer.parseInt(groupMembers[i]))
                            .getEmail() + ",";
                }
            }
        }            
        String mailText = templateEmailService.getMailText("/btm20/email/btm20LcdMail.ftl", emailMap);
        Email email = new Email();
        email.setEmail(true);// 标记收件人是不是邮箱
        email.setSubject(emailConfig.getSubject());
        email.setTo(receiver);
        email.setCc(copyTo);
       
        email.setContent(mailText);

        boolean send = EmailServerTerminal.send(email,"btm20");
        return send;

    }