echart生成报表并生成可下载PDF

时间:2024-03-19 13:58:21

 Echarts
一个纯javascript的图表库,而且Echart3开始不再强制使用AMD的方式按需引入,代码立也不再内置AMD加载器,只需要像普通的javaScript库一样用script标签引入.
  文档和下载地址: echarts
 html2canvas
允许直接在用户浏览器上截取网页或部分网页的“屏幕截图”。屏幕截图基于DOM,因此它可能不是真实表示的100%准确,因为它没有制作实际的屏幕截图,而是根据页面上可用的信息构建屏幕截图.
  文档和下载地址: htm2canvas
jspdf
使用javascript生成pdf的类库.jsPDF支持不同类型的PDF文件格式,包括:文本,数字,图形,图片,同时你可以*的编辑标题或者其它类型元素。支持互动的内容制作,例如,你可以输入文字或者数字,然后jsPDF帮助生成最后的PDF内容.
  文档和下载地址: jspd
 简单示例demo
  1.在项目中创建如下目录 weabapp/resources/myJs,然后将下载的js文件copy至此目录.

   2.在html页面引入js

   <script src="${base.contextPath}/resources/myJs/echarts.js"></script>
    <script src="${base.contextPath}/resources/myJs/html2canvas.min.js"></script>
    <script src="${base.contextPath}/resources/myJs/jspdf.min.js"></script>


  3.从后台获取数据,并初始化echarts实例
  
  **初始化echarts实例**

<div id="mEcharts" style="width: 600px;height:400px;"></div>      <!--  柱状图div -->
 <div id="chartCircular" style="width: 600px;height:400px;"></div>     <!-- 饼状图div -->
 <script type="text/javascript">
   // 基于准备好的dom,初始化echarts实例
    var myChart ;
    var chartCircular
    $(function(){
        myChart = echarts.init(document.getElementById('mEcharts'));
        chartCircular = echarts.init(document.getElementById('chartCircular'));
    });


后台获取数据并组装成生成图表需要的类型,并显示图表

  function reprot(){
           
            var productName=new Array();//柱图-数据
            var amount=new Array();//柱图-数据
            var nameAmountArr=new Array();//饼图数据   
             $.ajax({
                 url: '${base.contextPath}/fs/goods/info/selectCountByProId',
                 success: function (args) {
                    
                     var i=args.rows.length;
                     var name="";
                     var value="";
                     for(var i=0;i<args.rows.length;i++){
                         
                         var a0 = args.rows[i] || {};
                         var nameAount="";
                         for (var k in a0) {
                              if("productName"==k){
                                  productName.push(a0[k]);
                                  name=a0[k];
                              }
                              if("nowAmount"==k){
                                  amount.push(a0[k]);
                                  value=a0[k];
                             }
                          
                      }
                         
                          nameAmout=  {value:value, name:name};
                         nameAmountArr.push(nameAmout);
                          name="";
                          value="";
                         
                     }
                     
                     // 指定图表的配置项和数据
                     var option = {
                             
                             backgroundColor: '#FFFFFF',
                         title: {
                             text: '各个供应商所有商品现有库存'
                         },
                         tooltip: {},
                         legend: {
                             data:['库存']
                         },
                         xAxis: {
                             data: productName
                         },
                         yAxis: {},
                         series: [{
                             name: '库存',
                             type: 'bar',
                             data: amount
                         }]
                     };
                     
                     // 使用刚指定的配置项和数据显示图表。
                     myChart.setOption(option);
                     //下面的代码是在生成图表之后显示生成pdf的下载按钮
                     var div = '<span class="btn btn-success k-grid-save-changes" onclick="convertCanvasToImage()">柱状图下载</span>'
                      $("#down").append(div);
                     
                     
                     //饼状图
                     chartCircularOption = {
                                title : {
                                    text: '各个供应商所有商品的现有库存',
                                    subtext: '现有库存',
                                    x:'center'
                                },
                                tooltip : {
                                    trigger: 'item',
                                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                                },
                                legend: {
                                    orient: 'vertical',
                                    left: 'left',
                                    data: productName
                                },
                                series : [
                                    {
                                        name: '现有库存',
                                        type: 'pie',
                                        radius : '55%',
                                        center: ['50%', '60%'],
                                        data:nameAmountArr,
                                        itemStyle: {
                                            emphasis: {
                                                shadowBlur: 10,
                                                shadowOffsetX: 0,
                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                            }
                                        }
                                    }
                                ]
                            };
                     // 使用刚指定的配置项和数据显示图表。
                     chartCircular.setOption(chartCircularOption);
                     
                 }
             });
        } 


echart生成报表并生成可下载PDF
  下面是生成PDF的代码
  

 function convertCanvasToImage() {         
           html2canvas(document.getElementById('mEcharts'), {       
               onrendered: function(canvas) {                 
                   //document.body.appendChild(canvas);                   
                   createPDFObject(canvas.toDataURL("image/jpeg"));            
                   }           
              });      
           }        
       function createPDFObject(imgData) {        
           debugger;
           var name="柱状图";
            var doc = new jsPDF('p', 'pt');
            doc.addImage(imgData, 5, 5, 600, 300, 'img');
            doc.save(''+name+'.pdf')
           }

 

echart生成报表并生成可下载PDF
   
 

 注意:需要设置图表背景色为白色,否则生成的PDF会是黑色背景,如下设置

var option = {
                             
                             backgroundColor: '#FFFFFF',
                         title: {
                             text: '各个供应商所有商品现有库存'
                         },