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 =newBASE64Decoder();

        try

        {

            String[] url = imgsURl.split(",");

            String u = url[1];

            //Base64解码

            byte[] buffer =newBASE64Decoder().decodeBuffer(u);

            //生成图片

            OutputStream out =newFileOutputStream(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 =newByteArrayOutputStream();// 将图片写入流中

        BufferedImage bufferImg = ImageIO.read(newFile(req.getRealPath("pic/"+fileName+".jpg")));

        ImageIO.write(bufferImg,"PNG", outStream);// 利用HSSFPatriarch将图片写入EXCEL

        HSSFPatriarch patri = sheet.createDrawingPatriarch();

        HSSFClientAnchor anchor =newHSSFClientAnchor(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();

        }