Echart圖表自適應狀況下的打印

報表是全屏自適應的，當點擊打印按鈕時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>