echarts插件如何打印canvas绘制出的统计图

解决方法：

echarts插件是无法直接打印canvas绘制出的统计图，先得将canvas转成图片（mycanvas.toDataURL("image/png")）；再去用打印方法（jqprint()）；

dome代码:

<html>
    <head >
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/jquery.jqprint-0.3.js"></script>
    <script src="js/echarts.min.js"></script>
    </head>
<body>
<div id="container" class="container"></div>
<script>
function print_voucher1(){
        var mycanvas = $(".container").find("canvas")[0];
        var image = mycanvas.toDataURL("image/png");
        $(".container").html("<img src='"+image+"'/>")
}
 var dom1 = document.getElementById("container");
    var namedate = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
    var numdate = [6000, 5000, 8000, 5000, 7000, 9000, 4000,9000];
    var colorlist = ["#b84e4e","#337ab7","#7ab2d0","#76c4a7","#386f8d","#6e8e5c","#dd7e7e","#7ba3e0"];
    optionautch(namedate,numdate,colorlist,dom1);
    function optionautch(namedate,numdate,colorlist,dom){
        var myChart = echarts.init(dom);
        option = null;
        option = {

            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: namedate,
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#ededed",
                            width: 1
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#999'
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}',
                        show: true,
                        textStyle: {
                            color: '#999'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#ededed",
                            width: 1
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: '#ddd'
                        }
                    }

                }
            ],
            series: [
                {
                    name: '人数',
                    type: 'bar',
                    barWidth: '60%',
                    data: numdate,
                    itemStyle: {
                        normal: {
                            // color: new echarts.graphic.LinearGradient(
                            //     0, 0, 0, 1,
                            //     [
                            //         {offset: 1, color: 'red'},
                            //         {offset: 0, color: 'orange'}
                            //     ]
                            // )
                            color: function (params) {
                                // var colorList = colorlist;
                                // return colorList[params.dataIndex];
                                var colorList = colorlist

                                var index = params.dataIndex;
                                // if(params.dataIndex >= colorList.length){
                                //         index=params.dataIndex-colorList.length;
                                // }
                                return new echarts.graphic.LinearGradient(0, 0, 0, 1,
                                    [
                                        { offset: 1, color: colorList[index]}
                                    ]);
                            }
                        }
                    }
                }
            ]
        };
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    }
</script>
</body>
</html>

 

posted @ 2019-08-15 10:31  L江波  阅读(615)  评论(0)  编辑  收藏  举报