如何使用echart中获取canvas绘制到自己的canvas上去

来源：互联网发布：电视连接网络编辑：程序博客网时间：2024/06/17 00:55

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中的参数大家可以自己尝试一下，可能会有不同的结果

0 0