echarts图表导出excel示例
作者：
这篇文章主要介绍了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();
}