Echarts Cómo mostrar varios gráficos en una página
De hecho, require solo usa su función de devolución de llamada para crear una carga modular de objetos del gráfico.
Entonces, siempre que podamos encapsular el método de creación de múltiples objetos de gráfico en un método en la función de devolución de llamada require(), podemos hacerlo.
Ejemplo de creación de varios gráficos ECharts en una sola página
Para crear varios gráficos en una sola página, debe preparar las siguientes condiciones o precauciones:
p>
1. Para crear varios gráficos, debe configurar varios contenedores de gráficos
El contenedor del gráfico se utiliza como soporte del gráfico, por lo que debe configurarse y especificarse. el ancho y la altura de cada contenedor no son cero; de lo contrario, el gráfico producirá resultados impresentables.
lt; div id="main" style="alto: 400px; ancho: 500px; flotante: izquierda; borde: 1px sólido #ccc;
relleno: 10px; "gt ;
lt;/divgt;
lt;div id="mainLine" style="alto: 400px; ancho: 500px; flotante: izquierda; borde: 1px sólido #ccc;
padding: 10px; "gt;
lt;/div gt;
Aquí se preparan dos contenedores.
2. Introduzca archivos js relevantes
lt;script src="js/esl.js" charset="utf-8" type="text/javascript"gt;lt; /scriptgt;
lt;script src="js /echarts.js" charset="utf-8" type="text/javascript"gt;lt;/scriptgt;
3. Escriba una buena forma de crear diferentes objetos de gráficos
1), función para crear histograma
//Crear histograma ECharts
función DrawColumnEChart(ec) {
/---Gráfico de barras----
var myChart = ec.init(document.getElementById('main'));
/ / Mensaje de solicitud de visualización del gráfico
myChart.showLoading({
text: "Los datos del gráfico están intentando cargarse..."
});
myChart.hideLoading();
myChart.setOption({
título: {
texto: "Gráfico de barras"
},
información sobre herramientas: {
disparador: 'eje'
},
leyenda: {
datos: ['stepday.com', 'tuiwosa.com']
},
caja de herramientas: {
mostrar: false
},
calculable: verdadero,
eje x: [
{
tipo: 'categoría',
datos: [enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', ' diciembre']
}
],
yEje: [
{
tipo: 'valor' ,
splitArea: { show: true }
}
],
20.0, 6.4, 3.3]
},
{
nombre: 'tuiwosa.com',
tipo: 'barra',
datos: [ 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}
]
});
var ecConfig = require('echarts/config');
//Escuche el evento de clic del gráfico ECharts
myChart.on ("click ", function () {
alert("¡Me hiciste clic! ") )
});
}
2), función para crear gráfico de líneas
// Crear EC
gráfico de líneas de Harts
función DrawLineEChart(ec) {
/--- gráfico de líneas----
var myLineChart = ec.init(document.getElementById ('mainLine'));
//Mensaje de solicitud de visualización del gráfico
myLineChart.showLoading({
text： "¡Los datos del gráfico están intentando cargarse! . .."
});
myLineChart.hideLoading();
myLineChart.setOption({
título:{
texto: "Gráfico de líneas"
},
información sobre herramientas: {<
activador: 'eje'
},
leyenda: {
datos: ['stepday.com', 'tuiwosa.com']
},
caja de herramientas: {
mostrar: falso
},
calculable: verdadero,
ejex: [
{
tipo: 'categoría',
datos: ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio ', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre']
}
],
yEje: [
{
tipo: 'valor',
splitArea: { show: true }
}
] ,
Serie: [
{
nombre: 'stepday.com',
p>tipo: 'línea', / /El tipo de visualización de la serie es un gráfico de líneas
datos: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
nombre: 'tuiwosa.com',
tipo: 'línea',
p>datos: [ 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}
]
});
var ecConfig = require('echarts/config');
//Escuche el evento de clic del gráfico ECharts
myLineChart.on("click ", function () {
alert("¡Me hiciste clic! ") )
});
}
4. Encapsule llamadas unificadas para crear diferentes gráficos
// Dibuje varios gráficos para implementar encapsulación de funciones
función DrawCharts(ec) {
DrawColumnEChart(ec
DrawLineECa);
rt(ec);
}
5. Combine la función de carga del módulo require(requireArr, callbackFunction) para crear un objeto de gráfico
require(
[
'echarts',
'echarts/chart/bar', //carga la parte del gráfico sobre gráficos de barras bajo demanda
' echarts/chart/line' //cargar la parte del gráfico sobre gráficos lineales bajo demanda
],
DrawCharts
);
6. Recordatorio especial
1) Al crear diferentes objetos de gráfico, debe prestar atención al hecho de que al inicializar el gráfico en el método init(), su identificación debe ser coherente con el ID del contenedor del gráfico actual que debe explicarse.
7. Código de muestra completo
lt;!DOCTYPE htmlgt;
lt;html lang="en"gt;
lt ;headgt;
lt;titlegt;ECharts-Gráficos lineales básicoslt;/ titlegt;
lt;script src="js/esl.js" charset="utf-8" tipo ="text/javascript"gt;lt;/scriptgt;
lt;scriptrc="js/echarts.js" charset="utf-8" type="text/javascript"gt;lt;/ scriptgt;
lt; /headgt;
lt;
lt; div id="principal" estilo="" ancho: 500px; flotante: izquierda; borde: 1px sólido #ccc;
relleno: 10px; "gt;
lt; /divgt;
lt; div id ="mainLine" style="alto: 400px; ancho: 500px; flotante: izquierda; borde: 1px sólido #ccc;
relleno: 10px; "gt; divgt;
lt;div style="clear: ambos;"gt;
lt;h3gt;
DÍA DEL PASOlt;/h3gt;
lt;pgt;
Proporcionamos sólo la información más directa y valiosa dirigida a:lt;a href="/myblog/?echarts" target="_blank"gt;www.stepday.comlt ;/agt;
lt;/pgt;
lt;/divgt;
lt;script type="text/javascript" language="javascript" gt;
// El paso 4 requiere echarts y lo usa en la devolución de llamada.
// Paso 4: Cargue echarts dinámicamente y úselo en la devolución de llamada: 4 Cargue echarts dinámicamente y comience a usarlo en la función de devolución de llamada, prestando atención a conservar la estructura de carga bajo demanda que define la ruta del gráfico
require(
[
'echarts',
'echarts/chart/bar', //cargar bajo demanda el parte del gráfico sobre gráficos de barras
'echarts/chart/line' //cargar bajo demanda la parte del gráfico sobre gráficos lineales
], <
DrawCharts
);
// Encapsula funciones para dibujar múltiples gráficos
function DrawCharts(ec) {
DrawColumnEChart(ec) );
DrawLineEChart(ec );
}
//Creación de un gráfico de columnas ECharts
función DrawColumnEChart(ec) {
// --- Gráfico de barras ---
var myChart = ec.init(document. getElementById('main'));
// Gráfico muestra un mensaje rápido
myChart.showLoading({
text： "Los datos del gráfico están intentando cargarse..."
});
myChart .hideLoading();
myChart.setOption({
título: {
texto: "Gráfico de barras"
},
información sobre herramientas: {
disparador: 'eje'
},
leyenda: {
datos: [ 'stepday.com', 'tuiwosa.com']
},
caja de herramientas: {
mostrar: false
},
calculable: verdadero,
ejex: [
{
tipo: 'categoría',
datos: [enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre ']
}
],
yEje: [
{
tipo: 'valor',
splitArea: { show: true }
}
],
Serie: [
{
nombre: 'stepday.com',
tipo: 'barra', //El tipo de visualización de la serie es gráfico de barras
datos: [2.0, 4.9, 7,0, 23,2, 25,6, 76,7, 135,6, 162,2, 32,6, 20,0, 6,4, 3,3]
},
p>
{
nombre: 'tuiwosa.com',
tipo: 'barra',
datos: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}
]
});
var ecConfig = require('echarts/config');
//Escuche el evento de clic del gráfico ECharts
myChart.on ("click", function () {
alert("¡Hiciste clic en mí!") )
});
}
//Creando un gráfico de líneas ECharts
función DrawLineEChart(ec) {
/ --- Gráfico de líneas ---
var myLineChart = ec.init( document.getElementById('mainLine')
//Mensaje de solicitud de visualización del gráfico
myLineChart.showLoading({
text： "Los datos del gráfico están intentando cargarse..."
});
myLineChart.hideLoading();
myLineChart.setOption({
título: {
texto :" Gráfico de líneas"
},
información sobre herramientas: {<
activador: 'eje'
},
leyenda: {
datos: ['stepday.com', 'tuiwosa.com']
},
caja de herramientas: {
mostrar: falso
},
calculable: verdadero,
xAxis: [
{
tipo: 'categoría',
datos: ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre']
}
],
yEje: [
{
tipo: 'valor',
splitArea: { show: true }
}
],
Serie: [
{
nombre: 'stepday.com',
tipo: 'línea', //El tipo de visualización de la serie es un gráfico de líneas
datos: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
nombre: 'tuiwosa.com',
tipo: 'línea',
datos: [ 48.7, 18.8, 6.0, 2.3]
}<
/p>
]
});
var ecConfig = require('echarts/config');
// Monitorear el evento de clics en el gráfico ECharts
myLineChart.on("click", function () {
alert("¡Me hiciste clic!") )
});
}
lt;/scriptgt;
lt;/bodygt;
lt;/htmlgt;
Reimprimir
p>