如何使用WEB打印控件Lodop打印Echarts图表?

李吖吖 发布于 2015/05/21 15:51
阅读 2K+
收藏 0


    项目中使用WEB打印控件Lodop打印网页信息并且Echarts图表也一起,打印预览时看不到图,是什么原因呢?

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>血压数据--会员健康管理中心</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.7.1.js"></script>
<script language="javascript" src="${pageContext.request.contextPath}/print/LodopFuncs.js"></script>
<script language="javascript">
var LODOP; //声明为全局变量
function printPreview() {
	LODOP=getLodop();
	LODOP.PRINT_INIT("打印");
	LODOP.ADD_PRINT_HTM(0,0,"100%","100%",$("#printDiv").html());
	LODOP.PREVIEW();
}
</script>
</head>
<body>
<div id="printDiv">
	<!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
    <!--Step:1 为ECharts准备一个具备大小(宽高)的Dom-->
    <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
    <div id="mainMap" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
</div>
    <input id="btnReset3" type="button" class="btns7" value="打印" onClick="printPreview();" />
    <!--Step:2 引入echarts.js-->
    <!-- ECharts单文件引入 -->
<script src="${pageContext.request.contextPath}/js/echarts-2.2.2/echarts.js"></script>
    
    <script type="text/javascript">
    require.config({
        paths: {
            echarts: '${pageContext.request.contextPath}/js/echarts-2.2.2'
        }
    });
    require(
        [
            'echarts',
            'echarts/chart/bar',
            'echarts/chart/line',
            'echarts/chart/map'
        ],
        function (ec) {
            //--- 折柱 ---
            var myChart = ec.init(document.getElementById('main'));
            myChart.setOption({
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['蒸发量','降水量']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        splitArea : {show : true}
                    }
                ],
                series : [
                    {
                        name:'蒸发量',
                        type:'bar',
                        data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                    },
                    {
                        name:'降水量',
                        type:'bar',
                        data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                    }
                ]
            });
            
            // --- 地图 ---
            var myChart2 = ec.init(document.getElementById('mainMap'));
            myChart2.setOption({
                tooltip : {
                    trigger: 'item',
                    formatter: '{b}'
                },
                series : [
                    {
                        name: '中国',
                        type: 'map',
                        mapType: 'china',
                        selectedMode : 'multiple',
                        itemStyle:{
                            normal:{label:{show:true}},
                            emphasis:{label:{show:true}}
                        },
                        data:[
                            {name:'广东',selected:true}
                        ]
                    }
                ]
            });
        }
    );
    </script>
</body>
</html>




以下是问题补充:

@李吖吖:有资料说可以获取得到Echarts图表图片代码,请问是这样的吗? var imgUrl = myChart.getImage('jpeg').outerHTML; 然后,我将获取得到的代码设置到一个隐藏域里:$("#chartImg").val(imgUrl); (2015/05/21 16:27)
加载中
0
开源中国-总书记
开源中国-总书记
看到这个插件就蛋疼,女神曾经老问我怎么使用!
0
弄晴小雨
我也遇到这个问题了,怎么解决?
返回顶部
顶部