echarts图表导出excel

根据传入的参数生成相应的图形    

var imgObj = myChart.getImage(''png'');//获得img对象
var imgUrl = myChart.getDataURL(''png'');//获得img对象base64编码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
loadChart : function(data,item){
        var that =this;
        require(['echarts','echarts/chart/bar','echarts/chart/line',
                'echarts/chart/pie'], function(ec) {
            that.body.setHeight(800);
            var myChart = ec.init(that.body.dom);
            myChart.showLoading({
                text :"图表数据正在努力加载..."
            });
             
             
                var option = {
                    tooltip : {
                        trigger :'axis',
                        axisPointer : {// 坐标轴指示器,坐标轴触发有效
                            type :'shadow' // 默认为直线,可选为:'line' | 'shadow'
                        }
                    },
                    legend : {
                        data : data.indis,
                        x :'left',
                        y :'top'
                    },
                    toolbox : {
                        show :true,
                        orient :'vertical',
                        x :'right',
                        y :'center',
                        feature : {
                            mark : {
                                show :true
                            },
                            dataView : {
                                show :true,
                                readOnly :true
                            },
                            magicType : {
                                show :true,
                                type : ['line','bar', 'stack','tiled']
                            },
                            restore : {
                                show :true
                            },
                            saveAsImage : {
                                show :true
                            }
                        }
                    },
                    calculable :true,
                    animation :false,
                    xAxis : [{
                        type :'category',
                        data : data.grp
                    }],
                    yAxis : [{
                        type :'value',
                        splitArea : {
                            show :true
                        }
                    }],
                    series : data.bar.series
                };
            }
            myChart.hideLoading();
            myChart.setOption(option);
            that.imgURL = myChart.getDataURL('png');//获取base64编码
        });
     
    },
initEChart : function(){
        require.config({
            paths:{
                'echarts':'js/com/bhtec/echart/echarts',
                'echarts/chart/bar': 'js/com/bhtec/echart/echarts',
                'echarts/chart/line':'js/com/bhtec/echart/echarts',
                'echarts/chart/pie':'js/com/bhtec/echart/echarts'
            }
        });
    }

2. [代码]将数据传递到后台    

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
doExport : function(){
         
        var url =this.chartPanel.getImageURL();
        var title = Ext.fly('indi-display-title-id').first().dom.innerHTML;
        var left = Ext.getCmp("indi_pivotGrid_id").leftAxis.getTuples();
        var t = Ext.getCmp("indi_pivotGrid_id").topAxis.getTuples();
         
        //TODO  获取base64的图片编码
        Ext.Ajax.request({
            url :'indicator/exp2excl.mvc',
            params : {
                imgURL:url,
                left:getS(left)
            }
        });
        function getS(d){
            var arr = [],str;
            for(var i=0;i<d.length;i++){
                var s = IndiFn.getAxisStr(d[i]);
                arr.push(s);
            }
            str = arr.join(',');
            returnstr;
        }
        var data = Ext.getCmp("indi_pivotGrid_id").extractData();
        var s,arr=[];
        for(var i=0;i<data.length;i++){
            arr.push(data[i]);
        }
     
        window.open('indicator/exportList2Excel.mvc?title='+encodeURIComponent(encodeURIComponent(title))+'&left='+encodeURIComponent(encodeURIComponent(getS(left)))+''+
                '&top='+encodeURIComponent(encodeURIComponent(getS(t)))+'&data='+arr.join(';'));
    }

3. [代码]解析base64,生成图片    

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
public void base64TOpic(String fileName, HttpServletRequest req) {
        //对字节数组字符串进行Base64解码并生成图片
        if(imgsURl == null)//图像数据为空
            return;
        BASE64Decoder decoder =new BASE64Decoder();
        try
        {
            String[] url = imgsURl.split(",");
            String u = url[1];
            //Base64解码
            byte[] buffer =new BASE64Decoder().decodeBuffer(u);
            //生成图片
            OutputStream out =new FileOutputStream(newFile(req.getRealPath("pic/"+fileName+".jpg")));   
            out.write(buffer);
            out.flush();
            out.close();
            return;
        }
        catch(Exception e)
        {
            return;
        }
    }

4. [代码]通过poi画图,将图片放入到excel中    跳至[1] [2] [3] [4] [全屏预览]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
row = sheet.createRow(index+3);
        HSSFCell headerCell = row.createCell(0);   
        headerCell.setCellType(HSSFCell.CELL_TYPE_BLANK); 
        headerCell.setCellValue(title);
         
        row = sheet.createRow(index +6);
        HSSFCell cells = row.createCell(0);
        cells.setCellType(HSSFCell.CELL_TYPE_BLANK);
        ByteArrayOutputStream outStream =new ByteArrayOutputStream();// 将图片写入流中
        BufferedImage bufferImg = ImageIO.read(newFile(req.getRealPath("pic/"+fileName+".jpg")));
        ImageIO.write(bufferImg,"PNG", outStream);// 利用HSSFPatriarch将图片写入EXCEL
        HSSFPatriarch patri = sheet.createDrawingPatriarch();
        HSSFClientAnchor anchor =new HSSFClientAnchor(5,5, 5,5,
                (short)1, index + 6, (short)6, 45);
        patri.createPicture(anchor, workbook.addPicture(
                outStream.toByteArray(), HSSFWorkbook.PICTURE_TYPE_PNG));
        try{
            workbook.write(out);
            out.flush();
            out.close();
        }catch (IOException e) {
            e.printStackTrace();
        }
阅读更多

没有更多推荐了,返回首页