获取echart的imgge：
[javascript] view plain copy
var img = new Image();
imgsrc = myChartgetDataURL({
pixelRatio: 2,
backgroundColor: '#fff'
});
这中方式是获取echart的
获取echart的canvas：
[javascript] view plain copy
var offcanvas= myChartgetRenderedCanvas({
pixelRatio: 2,
backgroundColor: '#fff'
});
有了种两种方式再实现离屏canvas就很简单了
下面给出一个简单的示例(获取canvas的)：
html页面：
[html] view plain copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="/js/jquery/jquery-192minjs"></script>
<script type="text/javascript" src="/js/echart/echartsminjs"></script>
<script type="text/javascript" src="/js/echart/chinajs"></script>
<script type="text/javascript" src="/js/effsctScatter-mapjs"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<canvas id="canvas"></canvas>
</body>
</html>
js文件：
[javascript] view plain copy
/
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 = (Mathrandom() 10)toFixed(3) - 0;
dpush([
x,
//Mathrandom() 10
(Mathsin(x) - x (len % 2 01 : -01) Mathrandom())toFixed(3) - 0
]);
}
//consolelog(d)
return d;
})()
},
{
name:'cos',
type:'scatter',
large: true,
symbolSize: 3,
data: (function () {
var d = [];
var len = 10000;
var x = 0;
while (len--) {
x = (Mathrandom() 10)toFixed(3) - 0;
dpush([
x,
//Mathrandom() 10
(Mathcos(x) - x (len % 2 01 : -01) Mathrandom())toFixed(3) - 0
]);
}
//consolelog(d)
return d;
})()
}
]
};
var myChart = echartsinit(documentgetElementById('main'));
// 使用刚指定的配置项和数据显示图表。
myChartsetOption(option);
$('#main')hide();
var canvas = documentgetElementById("canvas");
canvaswidth = 800;
canvasheight = 600;
var ctx = canvasgetContext('2d');
var offcanvas = myChartgetRenderedCanvas({
pixelRatio: 2,
backgroundColor: '#fff'
});
ctxdrawImage(offcanvas,0,0);
});
至于echart获取canvas中的参数大家可以自己尝试一下，可能会有不同的结果
在上一篇 《Python reportlab库之hello world》 中我们演示了简单Demo，在Demo中使用Canvas对象。
本篇文章将简单介绍一下Canvas对象，首先我先来看看Canvas的构造函数
filename 参数控制最终PDF文件的名称
pagesize 参数有width和height两个参数，canvas默认的大小是A4纸（美国标志信件采用的就是A4）,具体demo如下
运行效果
bottomup 参数用于切换坐标系。一些系统把(0,0)坐标设置在底部左侧。 bottomup 未来可能会被移除。
pageCompression 选择是否压缩每个页面。默认的页面是不被压缩的，因为压缩会影响文件处理速度。如果 pageCompression =1，那么文件将被压缩到最小，但生成时间也会被延长。注意，总是会被压缩。如果您有大量的文章和矢量图像会造成文件过大，使用 pageCompression 参数将有效减少文件体积。
encoding 参数在20版本上已经省略了，大家基本上可以忽略这个参数。
verbosity 参数参数确定打印多少日志信息。默认情况下， verbosity 为0。如果值为1，您将得到生成文档是的日志信息。数值越高可能会在未来产生更多的日志输出。
encrypt 参数决定文档是否加密。默认情况下，文档是不加密的。
以上就是关于如何使用echart中获取canvas绘制到自己的canvas上去全部的内容，包括:如何使用echart中获取canvas绘制到自己的canvas上去、Python reportlab库之Canvas、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）