echarts-gl 3D柱状图保存为图片，打印

echarts-gl生成的立体柱状图生成图片是平面的，但是需求是3D图并且可以打印，我们的思路是先转成图片，然后再打印，代码如下：

生成3D图

 <td>图表分析</td>
            <td colspan="6"  style="width: 500px;height:500px;margin: 0 auto;">
                <div style="width: 50px;height: 50px;float: left">
                    <div style="width: 20px;height: 20px;margin-left:20px;background-color: #C33531;"></div>
                    <p>人数</p>
                </div>
                <div style="width: 50px;height: 50px;margin-right:500px;float: right;">
                    <div style="width: 20px;height: 20px;margin-left:20px;background-color:  #4A235A;"></div>
                    <p>占比</p>
                </div>
                <div id="Img" style="display: none">
                    <img src="#" id="jlcg"/>
                </div>
                <div id="main" style="width: 500px;height: 400px;margin: 0 auto;"></div>
            </td>

 $(function(){
        getData();
    });
    function getData() {
        var pieChart = echarts.init(document.getElementById('main'));
        var hours = ['90-100', '80-89', '70-79', '60-69', '<60'];
        var days = ['1', '2', '3', '4', '5'];
        var best=$("#best").val()==undefined?0.0:$("#best").val();
        var good=$("#good").val()==undefined?0.0:$("#good").val();
        var midd=$("#medium").val()==undefined?0.0:$("#medium").val();
        var pass=$("#pass").val()==undefined?0.0:$("#pass").val();
        var fail=$("#fail").val()==undefined?0.0:$("#fail").val();
        var bestRate=$("#bestRate").val()==undefined?0.0:$("#bestRate").val();
        var goodRate=$("#goodRate").val()==undefined?0.0:$("#goodRate").val();
        var middRate=$("#mediumRate").val()==undefined?0.0:$("#mediumRate").val();
        var passRate=$("#passRate").val()==undefined?0.0:$("#passRate").val();
        var failRate=$("#failRate").val()==undefined?0.0:$("#failRate").val();
        var data = [[1,0,best],[1,1,good],[1,2,midd],[1,3,pass],[1,4,fail],
            [3,0,bestRate],[3,1,goodRate],[3,2,middRate],[3,3,passRate],[3,4,failRate]];
        var colorList=new Array();
        var option = {
            tooltip: {

            },

            xAxis3D: {
                type: 'category',
                data: hours,
                name:'分数区间'
            },
            yAxis3D: {
                type: 'category',
                data: days,
            },
            zAxis3D: {
                type: 'value',
                name:'数据'
            },
            grid3D: {
                boxWidth: 120,
                boxDepth: 60,
                viewControl: {
                    // projection: 'orthographic'
                },
                light: {
                    main: {
                        intensity: 1.2,
                        shadow: true
                    },
                    ambient: {
                        intensity: 0.3
                    }
                }
            },
            animation: false,
            series: [{
                name:"人数",
                type: 'bar3D',
                data: data.map(function (item) {
                    return {
                        value: [item[1], item[0], item[2]],
                    }
                }),
                shading: 'lambert',
                label: {
                    textStyle: {
                        fontSize: 16,
                        borderWidth: 1
                    }
                },
                itemStyle:{
                    normal: {
                        // 定制显示（按顺序）
                        color: function(params) {
                            var arr = params.data.value;
                            if(arr[1]==1){
                                colorList.push('#C33531');
                            }else{
                                colorList.push('#4A235A');
                            }
                            return colorList[params.dataIndex]
                        }
                    },
                }
            }]
        }
        pieChart.setOption(option);
    }

生成图片

//将canvas转化成图片
        var div = document.getElementById("Img");
        div.style.display = "block";
        var img = document.getElementById("jlcg");
        img.style.width="450px";
        img.style.height="350px";
        var mycanvas = $("#main").find("canvas")[0];
        var image = mycanvas.toDataURL("image/png");
        var $a = document.getElementById('jlcg').setAttribute('src',image);

注意：

如果生成出来的图片外面的div的display：none的话，在用LOdop打印预览的时候不会显示的

用js动态改变一下div的样式