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

最新推荐文章于 2024-03-02 13:59:14 发布

洪小灯

最新推荐文章于 2024-03-02 13:59:14 发布

阅读量1.5w

点赞数 1

分类专栏： HTML5 文章标签： echart离屏canvas echart获取canvas 操纵echart canvas

本文链接：https://blog.csdn.net/u012251421/article/details/50733808

版权

HTML5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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

洪小灯

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
如何使用echart中获取canvas绘制到自己的canvas上去

echart是一个非常好的html5的组件，可以用于分析、报表等等。但是echart有一个很大缺点(这也不能怨echart)，它不能组件叠加显示在一个canvas中，在一个canvas中显示多个组件是很有必要的，这个时候就想如何能使用echart生成组件，然后显示在之间的canvas中。首先想到的肯定是离屏canvas。echart归根结底是使用html5中的canvas实现的，肯定支持离屏can
复制链接

扫一扫