版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yjaspire/article/details/82848545
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: '各个供应商所有商品现有库存'
},