如何使用echart中获取canvas绘制到自己的canvas上去
2016-02-24 22:16
603 查看
echart是一个非常好的html5的组件,可以用于分析、报表等等。但是echart有一个很大缺点(这也不能怨echart),它不能组件叠加显示在一个canvas中,在一个canvas中显示多个组件是很有必要的,这个时候就想如何能使用echart生成组件,然后显示在之间的canvas中。首先想到的肯定是离屏canvas。echart归根结底是使用html5中的canvas实现的,肯定支持离屏canvas这种操作。
有了这个想法就很简单了,比较重要的就是获取echart的canvas组件或图片
获取echart的imgge:
获取echart的canvas:
有了种两种方式再实现离屏canvas就很简单了
下面给出一个简单的示例(获取canvas的):
html页面:
js文件:
有了这个想法就很简单了,比较重要的就是获取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中的参数大家可以自己尝试一下,可能会有不同的结果
相关文章推荐
- GDKOI2016总结
- 百万级 分页查询优化
- ubuntu14.04系统中安装Ganglia
- 如何正确的写一个类
- JavaIO之-BIO(同步阻塞线程)
- Java的最佳实践
- CentOS6.5下RabbitMQ安装
- mssql性能优化
- Binary Tree Postorder Traversal
- AngularJS动态加载模块和依赖
- JS一定要放在Body的最底部么?聊聊浏览器的渲染机制
- And Then There Was One(约瑟夫问题变形)
- 一款可以访问谷歌的工具
- 设置android:theme导致死机
- Java反射机制分析指南
- hadoop无法打印日志
- 数据结构绪论
- JAVA语法基础 3
- iis不能访问html
- iPhone 6s 进水后 黑屏 闪屏 如何解决?