echarts图表导出excel示例

 更新时间:2014年04月25日 09:15:31   作者:  
这篇文章主要介绍了echarts图表导出excel示例,需要的朋友可以参考下

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

复制代码 代码如下:

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'
         }
     });
 }

将数据传递到后台

复制代码 代码如下:

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(',');
      return str;
  }
  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(';'));
 }

解析base64,生成图片

复制代码 代码如下:

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(new File(req.getRealPath("pic/"+fileName+".jpg")));   
            out.write(buffer);
            out.flush();
            out.close();
            return;
        }
        catch (Exception e)
        {
            return;
        }
 }

通过poi画图,将图片放入到excel中

复制代码 代码如下:

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(new File(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();
  }

相关文章

  • java.util.Date与java.sql.Date的区别

    java.util.Date与java.sql.Date的区别

    这篇文章主要介绍了java.util.Date与java.sql.Date的区别的相关资料,需要的朋友可以参考下
    2015-07-07
  • Spring详细讲解FactoryBean接口的使用

    Spring详细讲解FactoryBean接口的使用

    这篇文章主要为大家介绍了Spring容器FactoryBean工厂实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • Java IO流之节点流与字符流的相关知识总结

    Java IO流之节点流与字符流的相关知识总结

    今天给大家带来的是关于Java的相关知识,文章围绕着Java节点流与字符流展开,文中有非常详细的介绍及代码示例,需要的朋友可以参考下
    2021-06-06
  • Spring 5.0集成log4j2日志管理的示例代码

    Spring 5.0集成log4j2日志管理的示例代码

    本篇文章主要介绍了Spring 5.0集成log4j2日志管理的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • MyBatis中association的基本使用方法

    MyBatis中association的基本使用方法

    在项目中某些实体类之间肯定有关键关系,比如一对一,一对多等,在hibernate中用one to one和one to many,而mybatis中就用association和collection,下面这篇文章主要给大家介绍了关于MyBatis中association基本使用方法的相关资料,需要的朋友可以参考下
    2022-09-09
  • Spring Boot 中的 @ConditionalOnBean 注解作用及基本用法

    Spring Boot 中的 @ConditionalOnBean 注解作用及基

    在 Spring Boot 中,@ConditionalOnBean 可以帮助我们根据 是否存在特定 Bean 来 动态注册 Bean,广泛用于 按需加载、自动配置 等场景,本文给大家介绍Spring Boot 中的 @ConditionalOnBean 注解,感兴趣的朋友一起看看吧
    2025-04-04
  • Java实战之邮件的撰写和发送

    Java实战之邮件的撰写和发送

    这篇文章主要为大家详细介绍了通过Java代码实现邮件的撰写和发送功能,文中示例代码介绍的非常详细,具有一定的参考价值,需要的小伙伴们可以学习一下
    2021-11-11
  • 在idea中利用maven实现多环境配置自动打包的流程步骤

    在idea中利用maven实现多环境配置自动打包的流程步骤

    这篇文章主要介绍了在idea中利用maven实现多环境配置自动打包的流程步骤,文中通过图文和代码示例介绍的非常详细,对大家的学习或工作有一定帮助,需要的朋友可以参考下
    2024-11-11
  • C/C++中的struct结构体详细解读

    C/C++中的struct结构体详细解读

    这篇文章主要介绍了C/C++中的struct结构体详细解读,结构体是由一批数据组合而成的结构型数据,组成结构型数据的每个数据称为结构型数据的“成员”,其描述了一块内存区间的大小及意义,需要的朋友可以参考下
    2023-10-10
  • 详解OpenCV For Java环境搭建与功能演示

    详解OpenCV For Java环境搭建与功能演示

    这篇文章主要介绍了x详解OpenCV For Java环境搭建与功能演示,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04

最新评论