echarts圖表導(dǎo)出excel示例
更新時(shí)間:2014年04月25日 09:15:31 作者:
這篇文章主要介紹了echarts圖表導(dǎo)出excel示例,需要的朋友可以參考下
根據(jù)傳入的參數(shù)生成相應(yīng)的圖形
復(fù)制代碼 代碼如下:
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 : "圖表數(shù)據(jù)正在努力加載..."
});
var option = {
tooltip : {
trigger : 'axis',
axisPointer : { // 坐標(biāo)軸指示器,坐標(biāo)軸觸發(fā)有效
type : 'shadow' // 默認(rèn)為直線,可選為:'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'
}
});
}
將數(shù)據(jù)傳遞到后臺(tái)
復(fù)制代碼 代碼如下:
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,生成圖片
復(fù)制代碼 代碼如下:
public void base64TOpic(String fileName, HttpServletRequest req) {
//對(duì)字節(jié)數(shù)組字符串進(jìn)行Base64解碼并生成圖片
if (imgsURl == null) //圖像數(shù)據(jù)為空
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中
復(fù)制代碼 代碼如下:
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();
}
您可能感興趣的文章:
相關(guān)文章
java8 多個(gè)list對(duì)象用lambda求差集操作
這篇文章主要介紹了java8 多個(gè)list對(duì)象用lambda求差集操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09Spring中@Autowired @Resource @Inject三個(gè)注解有什么區(qū)別
在我們使用Spring框架進(jìn)行日常開發(fā)過程中,經(jīng)常會(huì)使用@Autowired, @Resource, @Inject注解來進(jìn)行依賴注入,下面來介紹一下這三個(gè)注解有什么區(qū)別2023-03-03一文教你學(xué)會(huì)搭建SpringBoot分布式項(xiàng)目
這篇文章主要為大家詳細(xì)介紹了搭建SpringBoot分布式項(xiàng)目的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01mybatis-plus 攔截器敏感字段加解密的實(shí)現(xiàn)
數(shù)據(jù)庫在保存數(shù)據(jù)時(shí),對(duì)于某些敏感數(shù)據(jù)需要脫敏或者加密處理,本文主要介紹了mybatis-plus 攔截器敏感字段加解密的實(shí)現(xiàn),感興趣的可以了解一下2021-11-11