echarts图表导出excel示例
程序员文章站
2024-02-28 14:39:22
根据传入的参数生成相应的图形
复制代码 代码如下:loadchart : function(data,item){ var that = this;...
根据传入的参数生成相应的图形
复制代码 代码如下:
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();
}