如何使用echart中获取canvas绘制到自己的canvas上去
1个回答
2016-08-20 · 知道合伙人数码行家
huanglenzhi
知道合伙人数码行家
采纳数：117529
获赞数：517219
长期从事计算机组装，维护，网络组建及管理。对计算机硬件、操作系统安装、典型网络设备具有详细认知。
向TA提问 私信TA
关注
![]()
展开全部
获取echart的imgge：
[javascript] view plain copy
var img = new Image();
img.src = myChart.getDataURL({
pixelRatio: 2,
backgroundColor: '#fff'
});
这中方式是获取echart的图片
获取echart的canvas：
[javascript] view plain copy
var offcanvas= myChart.getRenderedCanvas({
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-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文件：
[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 = (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中的参数大家可以自己尝试一下，可能会有不同的结果
[javascript] view plain copy
var img = new Image();
img.src = myChart.getDataURL({
pixelRatio: 2,
backgroundColor: '#fff'
});
这中方式是获取echart的图片
获取echart的canvas：
[javascript] view plain copy
var offcanvas= myChart.getRenderedCanvas({
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-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文件：
[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 = (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中的参数大家可以自己尝试一下，可能会有不同的结果
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
博思aippt
2024-07-20 广告
博思AIPPT是基于ai制作PPT的智能在线工具，它提供了4种AI制作PPT的方式，包括AI生成大纲、AI直接生成PPT、文本生成PPT、AI提炼文档生成PPT，一站式集成多种AI生成PPT的方式，可满足办公用户的不同需求和使用场景。ai生...
点击进入详情页
本回答由博思aippt提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
