Eigenschaften und Quellcode der Echarts-Legendenkomponente
|
Die Legendenkomponente ist eine häufig verwendete Komponente in ECharts. Sie wird verwendet, um die Namen von Serienmarkierungen mit unterschiedlichen Farben zu unterscheiden und die Beziehung zwischen Daten und Grafiken auszudrücken. Während der Bedienung können Benutzer durch Klicken auf die Legende steuern, welche Datenreihen angezeigt werden oder nicht. In ECharts 3.x/ECharts 4.x kann eine einzelne ECharts-Instanz mehrere Legendenkomponenten haben, was das Layout mehrerer Legenden erleichtert. Bei zu vielen Legenden können Sie die Seiten durch Scrollen umblättern. In ECharts werden die Eigenschaften der Legendenkomponente in der Tabelle angezeigt
Die schematische Darstellung der Eigenschaften der Legendenkomponente ist in der Abbildung dargestellt .
Zeichnen Sie ein Säulen-Mashup-Diagramm mit den Daten zu Verdunstung, Niederschlag, Mindesttemperatur und Höchsttemperatur für ein bestimmtes Jahr und konfigurieren Sie eine Legendenkomponente für das Diagramm. Wie aus der Abbildung ersichtlich ist, ist das Schiebesymbol oben rechts das Bildlaufsymbol der Legende, mit dem die Legende mit einem Bildlaufeffekt dargestellt werden kann.
Der Quellcode der Legende ist wie folgt;
<html>
<Kopf>
<meta charset="utf-8">
<!--ECharts-Skript einführen-->
<script src="js/echarts.js"></script>
</Kopf>
<Text>
<!---Bereiten Sie ein DOM mit Größe (Breite und Höhe) für ECharts vor-->
<div id="main" style="Breite: 600px; Höhe: 600px"></div>
<Skripttyp="text/javascript">
//Basierend auf dem vorbereiteten DOM das ECharts-Diagramm initialisieren var myChart = echarts.init(document.getElementById("main"));
//Geben Sie die Konfigurationselemente und Daten des Diagramms an var option = {
color: ["rot", "grün", "blau", "grau"], //Verwenden Sie Ihre eigenen vordefinierten Farben legend: {
ausrichten: 'horizontal', // 'vertikal'
x: 'rechts', //'Mitte'|'links'|{Zahl},
y: 'oben', //'Mitte'|'unten'|{Zahl}
Hintergrundfarbe: '#eee',
Rahmenfarbe: 'rgba(178,34,34,0.8)',
Rahmenbreite: 4,
Polsterung: 10,
Artikellücke: 20, Textstil: { Farbe: 'rot' },
},
xAxis: { //Konfigurieren Sie das Koordinatensystem der x-Achse data: ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sonntag']
},
yAxis: [ //Konfiguriere das Koordinatensystem der y-Achse { //Lege den ersten Typ der y-Achse fest: 'value',
Achsenbezeichnung: { Formatierer: '{Wert} ml' }
},
{ //Setze den zweiten Typ der Y-Achse: 'value',
Achsenbezeichnung: { formatter: '{value} °C' },
splitLine: { anzeigen: false }
}
],
series: [ //Datenreihe konfigurieren { //Datenreihe 1 festlegen
Name: 'Verdunstung in einem bestimmten Jahr', Typ: 'Balken',
Daten: [2,0, 4,9, 7,0, 23,2, 25,6, 76,7, 135,6]
},
{ //Datenreihe 2 festlegen
Name: 'Niederschlag in einem bestimmten Jahr', smooth: true,
Typ: „Linie“, yAxisIndex: 1, Daten: [11, 11, 15, 13, 12, 13, 10]
},
{ //Datenreihe 3 festlegen
Name: 'Höchste Temperatur in einem bestimmten Jahr', Typ: 'Balken',
Daten: [2,6, 5,9, 9,0, 26,4, 28,7, 70,7, 175,6]
},
{ //Datenreihe 4 festlegen
Name: 'Die niedrigste Temperatur in einem bestimmten Jahr', glatt: wahr,
Typ: „Linie“, yAxisIndex: 1, Daten: [-2, 1, 2, 5, 3, 2, 0]
}
]
};
//Verwenden Sie die gerade angegebenen Konfigurationselemente und Daten, um das Diagramm anzuzeigen myChart.setOption(option);
</Skript>
</body>
</html>
Zusammenfassen Dies ist das Ende dieses Artikels über die Eigenschaften und den Quellcode der Echarts-Legendenkomponente. Weitere relevante Inhalte zur Echarts-Legendenkomponente finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! Das könnte Sie auch interessieren:
|
<<: So führen Sie den Top-Befehl im Batchmodus aus
>>: Eine kurze Analyse der Wissenspunkte zum Exportieren und Importieren von MySQL-Daten
Artikel empfehlen
Wird der Index in der MySQL-Abfragebedingung verwendet?
Wenn Sie ein Arbeitgeber fragt, ob in einer MySQL...
So verwalten Sie große Datei-Uploads und Breakpoint-Resumes basierend auf js
Inhaltsverzeichnis Vorwort Frontend-Struktur Back...
JavaScript implementiert einfache Rechnerfunktion
In diesem Artikel wird der spezifische JavaScript...
Mysql: Der als Definierer angegebene Benutzer ('xxx@'%') existiert nicht – Lösung
Bei der heutigen Projektoptimierung ist bei MySQL...
So importieren Sie Tomcat-Quellcode in Idea
Inhaltsverzeichnis 1. Laden Sie den Tomcat-Code h...
Detaillierte Erklärung zur Verwendung der vue3 Teleport-Sofortbewegungsfunktion
Die Verwendung der vue3 Teleport-Sofortbewegungsf...
Docker implementiert das erneute Taggen und Löschen des Images des ursprünglichen Tags
Die Docker-Image-ID ist eindeutig und kann ein Im...
Rückgängigmachen der Anmeldung in MySQL
Konzepteinführung: Wir wissen, dass das Redo-Log ...
Einführung in die Verwendung von HTML-Bereichsbild-Hotspots mit einer Liste zugehöriger Eigenschaften
Der <area>-Tag wird vor allem in Imagemaps ...
HTML-Tutorial: Sammlung häufig verwendeter HTML-Tags (6)
Diese eingeführten HTML-Tags entsprechen nicht un...
Detaillierte Erklärung der Verwendung des Linux-Befehls lsof
lsof (List Open Files) ist ein Tool zum Anzeigen ...
mySql SQL-Abfrageoperation für statistische Mengen
Ich werde nicht viel Unsinn erzählen, schauen wir...
JavaScript Canvas implementiert Grafiken und Text mit Schatten
Verwenden Sie Canvas, um Grafiken und Text mit Sc...
Die spezifische Verwendung von CSS-Attributen zur Optimierung der Frontend-Seitendarstellung wird sich ändern
Vorwort Wenn Bildlaufereignisse wie Scrollen und ...
Detaillierte Erläuterung des Vue-Router-Routings
Inhaltsverzeichnis 1. Grundlegende Verwendung 2. ...