Echarts
一個純javascript的圖表庫,而且Echart3開始不再強制使用AMD的方式按需引入,代碼立也不再内置AMD加載器,隻需要像普通的javaScript庫一樣用script标簽引入.
文檔和下載下傳位址: echarts
html2canvas
允許直接在使用者浏覽器上截取網頁或部分網頁的“螢幕截圖”。螢幕截圖基于DOM，是以它可能不是真實表示的100％準确，因為它沒有制作實際的螢幕截圖，而是根據頁面上可用的資訊建構螢幕截圖.
文檔和下載下傳位址: htm2canvas
jspdf
使用javascript生成pdf的類庫.jsPDF支援不同類型的PDF檔案格式，包括：文本，數字，圖形，圖檔，同時你可以自由的編輯标題或者其它類型元素。支援互動的内容制作，例如，你可以輸入文字或者數字，然後jsPDF幫助生成最後的PDF内容.
文檔和下載下傳位址: jspd
簡單示例demo
1.在項目中建立如下目錄 weabapp/resources/myJs,然後将下載下傳的js檔案copy至此目錄.
2.在html頁面引入js
<script src="${base.contextPath}/resources/myJs/echarts.js"></script>
<script src="${base.contextPath}/resources/myJs/html2canvas.min.js"></script>
<script src="${base.contextPath}/resources/myJs/jspdf.min.js"></script>
3.從背景擷取資料,并初始化echarts執行個體
**初始化echarts執行個體**
<div id="mEcharts" style="width: 600px;height:400px;"></div> <!-- 柱狀圖div -->
<div id="chartCircular" style="width: 600px;height:400px;"></div> <!-- 餅狀圖div -->
<script type="text/javascript">
// 基于準備好的dom，初始化echarts執行個體
var myChart ;
var chartCircular
$(function(){
myChart = echarts.init(document.getElementById('mEcharts'));
chartCircular = echarts.init(document.getElementById('chartCircular'));
});
背景擷取資料并組裝成生成圖表需要的類型,并顯示圖表
function reprot(){
var productName=new Array();//柱圖-資料
var amount=new Array();//柱圖-資料
var nameAmountArr=new Array();//餅圖資料
$.ajax({
url: '${base.contextPath}/fs/goods/info/selectCountByProId',
success: function (args) {
var i=args.rows.length;
var name="";
var value="";
for(var i=0;i<args.rows.length;i++){
var a0 = args.rows[i] || {};
var nameAount="";
for (var k in a0) {
if("productName"==k){
productName.push(a0[k]);
name=a0[k];
}
if("nowAmount"==k){
amount.push(a0[k]);
value=a0[k];
}
}
nameAmout= {value:value, name:name};
nameAmountArr.push(nameAmout);
name="";
value="";
}
// 指定圖表的配置項和資料
var option = {
backgroundColor: '#FFFFFF',
title: {
text: '各個供應商所有商品現有庫存'
},
tooltip: {},
legend: {
data:['庫存']
},
xAxis: {
data: productName
},
yAxis: {},
series: [{
name: '庫存',
type: 'bar',
data: amount
}]
};
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
//下面的代碼是在生成圖表之後顯示生成pdf的下載下傳按鈕
var div = '<span class="btn btn-success k-grid-save-changes" onclick="convertCanvasToImage()">柱狀圖下載下傳</span>'
$("#down").append(div);
//餅狀圖
chartCircularOption = {
title : {
text: '各個供應商所有商品的現有庫存',
subtext: '現有庫存',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: productName
},
series : [
{
name: '現有庫存',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:nameAmountArr,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用剛指定的配置項和資料顯示圖表。
chartCircular.setOption(chartCircularOption);
}
});
}
下面是生成PDF的代碼
function convertCanvasToImage() {
html2canvas(document.getElementById('mEcharts'), {
onrendered: function(canvas) {
//document.body.appendChild(canvas);
createPDFObject(canvas.toDataURL("image/jpeg"));
}
});
}
function createPDFObject(imgData) {
debugger;
var name="柱狀圖";
var doc = new jsPDF('p', 'pt');
doc.addImage(imgData, 5, 5, 600, 300, 'img');
doc.save(''+name+'.pdf')
}
注意:需要設定圖表背景色為白色,否則生成的PDF會是黑色背景，如下設定
var option = {
backgroundColor: '#FFFFFF',
title: {
text: '各個供應商所有商品現有庫存'
},