echars柱状图,折线图,和导出到Excel

前台的jsp页面

<script src="<%=basePath %>scripts/echars/dist/echarts.js"></script>
<script type="text/javascript">
require.config({  
paths: {  
echarts: '<%=basePath %>scripts/echars/dist'
}  
});  
require(
[  
'echarts',
'echarts/theme/macarons', 
'echarts/chart/line',
'echarts/chart/bar'  
],  
DrawEChart  
);  
var myChart;
function DrawEChart(ec,theme) {  
   var chartContainer = document.getElementById("main");  
   myChart = ec.init(chartContainer,theme);  
   var categories = [];  
   var values = [];  

//  同步执行  
   $.ajaxSettings.async = false;
$.getJSON('<%=basePath %>/admin/report/goodOrderData.do' ,function (json){
if(json != null || json != ""){
categories=json.categories;
values=json.values;
}
});


var option = {

title : {
       text: '销量统计',
       subtext: '销量'
    },
tooltip : {  
backgroundColor: 'rgba(50,50,50,0.5)',
trigger: 'axis',  
axisPointer : {            // 坐标轴指示器,坐标轴触发有效  
    type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'  
}
    },  
legend: { 
textStyle: {color: 'red'},
data:['销量']  
},  

toolbox: {  
show : true, 
feature : {  
mark : {show: true},  
  dataView : {show: true, readOnly: false},  
  magicType : {show: true, type: ['line', 'bar']},  
   restore : {show: true},  
   saveAsImage : {show: true}  
}},  
calculable : true,  
yAxis : [{  
   name : '销量数量',  
   type : 'value'  
}],  
xAxis : [{  
   name : '商品', 
   type : 'category',  
   data : categories
}],  
series : [{  
   name:'销量',  
   type:'bar',  
   stack: '总量',  
   itemStyle: {
                normal: {
                    areaStyle: {
                        // 区域图,纵向渐变填充
                        color : (function (){
                            var zrColor = require('zrender/tool/color');
                            return zrColor.getLinearGradient(
                                0, 200, 0, 400,
                                [[0, 'rgba(72,209,204,0.8)'],[0.8, 'rgba(225,255,255,0.1)']]
                            )
                        })()
                    },
                    label : {
                        show : true,
                        textStyle : {
                            fontSize : '20',
                            fontFamily : '宋体',
                            fontWeight : 'bold'
                        }
                    }
                }
            },
   data:values,
   markLine : {
                data : [
                    {type : 'average', name : '平均值'},
                    {type : 'max'},
                    {type : 'min'}
                ]
            }
}] 

};  
myChart.setOption(option);
myChart.hideLoading();  
}
function openImage(){
var data = myChart.getDataURL("png");
  $("#img").val(data);
   $("#exportForm").submit(); 

</script>
</head>
<body>

<form action="<%=basePath %>/admin/report/goodOrder.do?deliveryTimes=export" method="post" id="exportForm">
<div id="main" style="height: 400px; border: 1px solid #ccc; padding: 10px;"></div>

<input type="button" class="search-btn" value="导出" οnclick="openImage()"/>

<input type="hidden" name="img" id="img" />

</form>

</div>
</body>
</html>


后台---------------------------------------------------------------------------------------------------

基于SpringMVC框架

@RequestMapping("/goodOrder")
public String goodOrder(SaleOrder saleOrder) throws Exception{
String data = request.getParameter("img");

//这里是导出的代码
if("export".equals(saleOrder.getDeliveryTimes())&&(null!= data||""!=data)){
try {
    String userName = System.getProperty("user.name");
    String filePath = "C:\\Users\\"+userName+"\\Desktop\\chart";
    File file = new File(filePath);
    if(!file.exists()){
    file.mkdir();
    }
    String fileName = filePath +"\\"+ System.currentTimeMillis()+".png";
    createImage( fileName, data);
    createExcel(fileName);
   return null;
   } catch (Exception e) {
       e.printStackTrace();
   }
}
//这里是生成柱状图的jsp页面
return “页面”;
}
//这里是ajax同步请求获取数据的页面
@RequestMapping("/goodOrderData")
@ResponseBody
public Map<String, Object> goodOrderData(SaleOrder saleOrder) throws Exception{
Map<String, Object> map = new HashMap<String, Object>();
//纵坐标值
Integer [] values = new Integer[]{12,33,4,56,5};
//横坐标值
String [] aa= new String[]{"2015-01","2015-02","2015-03","2015-04","2015-05"};


map.put("categories", aa);
map.put("values", values);
return map;
}


public void createImage(String fileName, String data) throws ServletException,IOException {
try {
       String[] url = data.split(",");
       String u = url[1];
       // Base64解码
       byte[] b = new BASE64Decoder().decodeBuffer(u);
       // 生成图片
       OutputStream out = new FileOutputStream(new File(fileName));
       out.write(b);
       out.flush();
       out.close();
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* 图片写入Excel中
* @param fileName
* @throws ServletException
* @throws IOException
*/
public void createExcel(String fileName) throws ServletException ,IOException {
        
HSSFWorkbook wb = new HSSFWorkbook();
HSSFSheet sheet = wb.createSheet("echart");
HSSFRow rows = sheet.createRow(0);
        HSSFCell cells = rows.createCell(40);
        // 另一个样式   
        // 设置字体   
        HSSFFont headfont = wb.createFont();   
        headfont.setFontName("新宋体");   
        headfont.setFontHeightInPoints((short) 18);// 字体大小   
        headfont.setBoldweight(HSSFFont.BOLDWEIGHT_BOLD);// 加粗   
        HSSFCellStyle headstyle = wb.createCellStyle();   
        headstyle.setFont(headfont);   
        headstyle.setAlignment(HSSFCellStyle.ALIGN_CENTER);// 左右居中   
        headstyle.setVerticalAlignment(HSSFCellStyle.VERTICAL_CENTER);// 上下居中   
        headstyle.setLocked(true);   
        headstyle.setWrapText(true);// 自动换行   
        HSSFRow row0 = sheet.createRow(0);   
        // 设置行高   
        row0.setHeight((short) 900);   
        // 创建第一列   
        HSSFCell cell0 = row0.createCell(0); 
        String header = "关于统计报表";
        cell0.setCellValue(new HSSFRichTextString(header));   
        cell0.setCellStyle(headstyle);
        //合并
        CellRangeAddress range = new CellRangeAddress(0, 0, 0, 14);   
        sheet.addMergedRegion(range); 
//
        cells.setCellType(HSSFCell.CELL_TYPE_BLANK);
        
        ByteArrayOutputStream outStream = new ByteArrayOutputStream(); // 将图片写入流中
        BufferedImage bufferImg = ImageIO.read(new File(fileName));
        ImageIO.write(bufferImg, "PNG", outStream); // 利用HSSFPatriarch将图片写入EXCEL
        HSSFPatriarch patri = sheet.createDrawingPatriarch();
        HSSFClientAnchor anchor = new HSSFClientAnchor(20, 20, 20,20,
          (short) 0, 1, (short) 15, 20);
        patri.createPicture(anchor, wb.addPicture(
        outStream.toByteArray(), HSSFWorkbook.PICTURE_TYPE_PNG));
        
        long name = System.currentTimeMillis();
        SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
String currentDate = df.format(new Date());
        String pngName =currentDate+name+".xls";
        try {
        OutputStream out = null;
        response.reset();
        response.setContentType("application/x-msdownload");
        response.setHeader("Content-Disposition", "attachment; filename=" + URLEncoder.encode(pngName, "UTF-8"));
        out = response.getOutputStream();       
        wb.write(out);
        out.flush();
        out.close();
} catch (Exception e) {
e.printStackTrace();
}
}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值