Generate corresponding graphics based on the parameters passed in
Copy the code code as follows:
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 : "Chart data is struggling to load..."
});
var option = {
tooltip : {
trigger : 'axis',
axisPointer: { // Axis indicator, axis trigger is valid
type: 'shadow' // Default is straight line, optional: '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');//Get base64 encoding
});
},
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'
}
});
}
Pass data to the backend
Copy the code code as follows:
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 Get the base64 image encoding
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(';'));
}
Parse base64 and generate images
Copy the code code as follows:
public void base64TOpic(String fileName, HttpServletRequest req) {
//Base64 decode the byte array string and generate a picture
if (imgsURl == null) //Image data is empty
return ;
BASE64Decoder decoder = new BASE64Decoder();
try
{
String[] url = imgsURl.split(",");
String u = url[1];
//Base64 decoding
byte[] buffer = new BASE64Decoder().decodeBuffer(u);
//Generate pictures
OutputStream out = new FileOutputStream(new File(req.getRealPath("pic/"+fileName+".jpg")));
out.write(buffer);
out.flush();
out.close();
return;
}
catch (Exception e)
{
return;
}
}
Draw pictures through poi and put the pictures into excel
Copy the code code as follows:
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(); // Write the image to the stream
BufferedImage bufferImg = ImageIO.read(new File(req.getRealPath("pic/"+fileName+".jpg")));
ImageIO.write(bufferImg, "PNG", outStream); // Use HSSFPatriarch to write pictures to 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();
}