如何使用echart中獲取canvas繪製到自己的canvas上去

洪小燈發表於2016-02-24
Canvas

echart是一個非常好的html5的元件，可以用於分析、報表等等。但是echart有一個很大缺點(這也不能怨echart)，它不能元件疊加顯示在一個canvas中，在一個canvas中顯示多個元件是很有必要的，這個時候就想如何能使用echart生成元件，然後顯示在之間的canvas中。首先想到的肯定是離屏canvas。echart歸根結底是使用html5中的canvas實現的，肯定支援離屏canvas這種操作。

有了這個想法就很簡單了，比較重要的就是獲取echart的canvas元件或圖片


獲取echart的imgge：

 var img = new Image();
    img.src = myChart.getDataURL({
        pixelRatio: 2,
        backgroundColor: '#fff'
    });
這中方式是獲取echart的圖片

獲取echart的canvas：

 var offcanvas= myChart.getRenderedCanvas({
        pixelRatio: 2,
        backgroundColor: '#fff'
    });

有了種兩種方式再實現離屏canvas就很簡單了


下面給出一個簡單的示例(獲取canvas的)：
html頁面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../js/jquery/jquery-1.9.2.min.js"></script>
    <script type="text/javascript" src="../js/echart/echarts.min.js"></script>
    <script type="text/javascript" src="../js/echart/china.js"></script>
    <script type="text/javascript" src="../js/effsctScatter-map.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>

<canvas id="canvas"></canvas>
</body>
</html>


js檔案：

/**
 * Created by se7en on 2016/2/4.
 */


$(document).ready(function () {
   var  option = {
        legend: {
            data:['sin','cos']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataZoom : {show: true},
                dataView : {show: true, readOnly: false},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        xAxis : [
            {
                type : 'value',
                scale:true
            }
        ],
        yAxis : [
            {
                type : 'value',
                scale:true
            }
        ],
        series : [
            {
                name:'sin',
                type:'scatter',
                large: true,
                symbolSize: 3,
                data: (function () {
                    var d = [];
                    var len = 10000;
                    var x = 0;
                    while (len--) {
                        x = (Math.random() * 10).toFixed(3) - 0;
                        d.push([
                            x,
                            //Math.random() * 10
                            (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
                        ]);
                    }
                    //console.log(d)
                    return d;
                })()
            },
            {
                name:'cos',
                type:'scatter',
                large: true,
                symbolSize: 3,
                data: (function () {
                    var d = [];
                    var len = 10000;
                    var x = 0;
                    while (len--) {
                        x = (Math.random() * 10).toFixed(3) - 0;
                        d.push([
                            x,
                            //Math.random() * 10
                            (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
                        ]);
                    }
                    //console.log(d)
                    return d;
                })()
            }
        ]
    };
    var myChart = echarts.init(document.getElementById('main'));
    // 使用剛指定的配置項和資料顯示圖表。
    myChart.setOption(option);
    $('#main').hide();
    var canvas = document.getElementById("canvas");
    canvas.width = 800;
    canvas.height = 600;
    var ctx = canvas.getContext('2d');
    var offcanvas = myChart.getRenderedCanvas({
        pixelRatio: 2,
        backgroundColor: '#fff'
    });
    ctx.drawImage(offcanvas,0,0);


});
至於echart獲取canvas中的引數大家可以自己嘗試一下，可能會有不同的結果



相關文章