Red de conocimiento informático - Aprendizaje de programación - Echarts Cómo mostrar varios gráficos en una página

Echarts Cómo mostrar varios gráficos en una página

Un amigo preguntó recientemente sobre el componente de gráficos ECharts. Quería crear varios gráficos en una página pero no sabía cómo hacerlo. Probablemente el mayor problema es obstaculizar require([], function(){});

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>