报表是全屏自适应的,当点击打印按钮时Echart图表设置成固定的宽度以适应打印的页面,img的src是获取变化后的echart数据流
主要的代码片段如下:
<div class="col-md-6">
<img id="printImg1" style="width:100%;display:none;">
<div id="linechart1" style="height:221px;"></div>
</div>
<div class="col-md-6">
<img id="printImg2" style="width:100%;display:none;">
<div id="linechart2" style="height:221px;"></div>
</div>
<img id="printImg3" style="width:100%;display:none;">
<div id="barchart1" style="height:370px;"></div>
<div style="page-break-after:always;"></div> //页面分隔
<input class="dayprint pull-right btn btn-primary" type="button" onclick=" a()" value="打印" />
<script language="javascript">
function a() {
$("#printArea").css({ "width": "295mm", "margin": "0 auto" });
$(".row .col-md-6").removeClass("col-md-6").addClass("col-xs-6");
document.getElementById('printImg3').style.display = "block";
document.getElementById('barchart1').style.display = "none";
setTimeout(function() {
var myChart1 = echarts.init(document.getElementById('linechart1'), theme);
myChart1.setOption(option);
var img1 = document.getElementById('printImg1');
img1.src = myChart1.getDataURL({
pixelRatio: 2,
backgroundColor: '#fff'
});
document.getElementById('linechart1').style.display = "none";
document.getElementById('printImg1').style.display = "block";
var myChart2 = echarts.init(document.getElementById('linechart2'), theme);
myChart2.setOption(option);
var img2 = document.getElementById('printImg2');
img2.src = myChart1.getDataURL({
pixelRatio: 2,
backgroundColor: '#fff'
});
document.getElementById('linechart2').style.display = "none";
document.getElementById('printImg2').style.display = "block";
}, 0)
setTimeout(function() {
$("#printArea").jqprint();
//关闭打印按钮后,再点击打印,否则第二次打印无图表
document.getElementById('linechart1').style.display = "block";
document.getElementById('printImg1').style.display = "none";
document.getElementById('linechart2').style.display = "block";
document.getElementById('printImg2').style.display = "none";
}, 50)
}
</script>
<!-- page script -->
<script>
var option = {
title: {
text: '图表标题',
},
tooltip: {
trigger: 'axis', //没有此触发,则下面的样式无效
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
},
yAxis: {},
series: [{
name: '用量统计',
type: 'line',
smooth: true,
lineStyle: {
normal: {},
},
data: [50, 80, 60, 50, 90, 100, 70],
}]
};
var myChart1 = echarts.init(document.getElementById('linechart1'), theme);
myChart1.setOption(option);
ObjectResize(myChart1.resize);
function ObjectResize(fn) {
if (window.addEventListener) {
window.addEventListener("resize", fn, false);
} else {
window.attachEvent("onresize", fn)
}
}
var myChart2 = echarts.init(document.getElementById('linechart2'), theme);
myChart2.setOption(option);
ObjectResize(myChart2.resize);
var option3 = {
// title : {
// text : '图表标题',
// },
grid: {
top: 20,
bottom: 20,
},
tooltip: {}, // tooltip不能删除
xAxis: {
type: 'category',
axisLabel: {
interval: 0,
//rotate:-45,
textStyle: {
fontSize: 16,
}
},
data: ["(0%-5%)", "(5%-10%)", "(10%-20%)", "(20%-30%)", "(30%-40%)", "(40%-50%)", "(50%-60%)", "(60%-70%)", "(70%-80%)", "(80%-90%)", "(90%-100%)", "(>100%)"],
},
yAxis: {
axisLabel: {
textStyle: {
fontSize: 16,
}
},
}, // y轴不能删除
series: [{
name: '用量统计',
type: 'bar',
itemStyle: {
normal: {
color: function(params) {
// build a color map as your need.
var colorList = [
'#999', '#cf1c1f', '#f0484b', '#ff867f', '#b54824',
'#d15b27', '#dd7f33', '#bfad61', '#ecb552', '#e2cb70',
'#1e7ba9', '#4ca9d7',
];
return colorList[params.dataIndex]
},
}
},
data: [1, 13, 15, 17, 19, 22, 25, 29, 32, 11, 13, 15],
}]
};
var myChart3 = echarts.init(document.getElementById('barchart1'), theme);
myChart3.setOption(option3);
var img3 = document.getElementById('printImg3');
img3.src = myChart3.getDataURL({
pixelRatio: 2,
backgroundColor: '#fff'
});
ObjectResize(myChart3.resize);
</script>
(adsbygoogle = window.adsbygoogle || []).push({});