Cómo usar get canvas en echart para dibujar en tu propio lienzo
[javascript] Ver texto sin formato
var img = new Image();
img.src = myChart.getDataURL({
pixRatio: 2
backgroundColor: '#fff')getDataURL({
pixelRatio: 2,
backgroundColor: '#fff '
});
Así es como obtener la imagen de la carta electrónica
Obtener el lienzo de la carta electrónica:
[javascript] Ver texto puro
var offcanvas= myChart.getRenderedCanvas({
pixelRatio: 2,
backgroundColor: '#fff'
});
El lienzo fuera de la pantalla se puede implementar fácilmente usando estos dos métodos
Aquí hay un ejemplo simple.
Aquí hay un ejemplo simple (obtener lienzo):
página html:
[html] Ver texto sin formato
lt; DOCTYPE htmlgt;
lt; html lang="es"gt;
lt; html lang="es"gt; /p>
lt; meta charset="UTF-8"gt;
lt; títulogt;/titlegt; " src="./js/jquery/jquery-1.9.2.min.js"gt；lt;/scriptgt;
lt;script type="text/javascript" src="./ js /echart/echarts.min.js"gt；lt;/scriptgt;
lt;script type="text/javascript" src="./js/echart/china.js"gt;lt ; /scriptgt;
lt;script type="text/javascript" src="./js/effsctScatter-map.js"gt;lt;/scriptgt; headgt;
lt;bodygt;
lt;div id="main" style="ancho: 600px.height: 400px;"gt;lt;/divgt; > p>
lt;canvas id="canvas"gt;lt;/canvasgt;
lt;/bodygt
lt;/htmlgt; p >archivo js:
[javascript]Ver texto sin formato
/**
* Creado por se7en el 4/2/2016.
*/
$(documento).ready(función () {
var opción = {
leyenda: {
p>
datos: ['sin', 'cos']
},
caja de herramientas: {
show: true ,
característica: {
marca: {show: true}, {
marca: {show: true}, }
dataZoom: {show: true},
dataView: {show: true, readOnly: false},
restaurar: {show: true},
saveAsImage : {mostrar: verdadero }
}
},
eje x: [
{
tipo: 'valor',
escala: verdadero
}
],
eje y: [
{
tipo: 'valor',
escala: verdadero
}
],
serie: [
{
nombre: 'pecado',
tipo: 'dispersión',
grande: verdadero,
tamaño del símbolo: 3,
datos: (función () {
var d = [];
var len = 10000;
var x = 0 ;
while (len--) {
x = (Math. random() * 10).random() * 10).toFixed(3) - 0;
p>
d.push([
x,
//Math.random() * 10
(Math.sin(x) - x * (len 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
]); p> }
}
//console.log(d)
return d
})
},
{
nombre: 'cos',
tipo: 'scatter',
grande: verdadero,
tamaño del símbolo: 3,
datos: (función () {
var d = [];
var len = 10000;
var x = 0 ;
while (len--) {
x = (Math. random() * 10).random() * 10) .a
Fijo(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'));
// Muestra el gráfico utilizando los elementos de configuración y los datos recién especificados.
myChart.setOption(opción);
$('#main').hide();
var lienzo = document.getElementById("lienzo"
lienzo.ancho = 800;
lienzo.altura = 600
var ctx = lienzo.getContext('2d'); >
var offcanvas = myChart.
var offcanvas = myChart.getRenderedCanvas({
pixelRatio: 2,
backgroundColor: '#fff'
});
ctx.drawImage(offcanvas, 0, 0);
});
En cuanto a los parámetros en echart getCanvas. Todos pueden probarlo ellos mismos y obtener resultados diferentes.