ECharts-Stileinstellungen
ECharts kann durch Stileinstellungen die Farbe, Helligkeit, Größe usw. von grafischen Elementen oder Text ändern.
Farbthema
Ab ECharts 4 sind zusätzlich zum Standardthema zwei integrierte Themen enthalten, nämlichlightunddark。
Die Verwendung ist wie folgt:
Beispiel
Selbst ausprobieren »
Darüber hinaus können wir auch im offiziellenTheme-Editorein Thema auswählen, das uns gefällt, und es herunterladen.
Derzeit bietet der Theme-Download sowohl eine JS-Version als auch eine JSON-Version.
Wenn Sie die JS-Version verwenden, können Sie den JS-Theme-Code in einethemeName.js-Datei speichern, dann in HTML auf die Datei verweisen und schließlich das Theme in Ihrem Code verwenden.
Im obigen Bild haben wir beispielsweise ein Theme ausgewählt; speichern Sie den JS-Code alswonderland.js。
Beispiel
<script src="https://www.example.com/static/js/wonderland.js"></script>
...
//Nachdem Sie die Datei wonderland.js in HTML eingebunden haben, rufen Sie sie während der Initialisierung auf.
var myChart = echarts.init(dom, 'wonderland');
// ...
Selbst ausprobieren »
Wenn das Theme als JSON-Datei gespeichert ist, können Sie es selbst laden und registrieren.
Im obigen Bild haben wir beispielsweise ein Theme ausgewählt; speichern Sie den JSON-Code alswonderland.json。
Beispiel
$.getJSON('wonderland.json', function (themeJSON) {
echarts.registerTheme('wonderland', themeJSON)
var myChart = echarts.init(dom, 'wonderland');
});
Selbst ausprobieren »
Hinweis:Wir verwenden $.getJSON, daher muss jQuery eingebunden werden.
Farbpalette
Die Farbpalette kann in option festgelegt werden.
Die Farbpalette stellt eine Reihe von Farben bereit, und Grafiken und Serien wählen automatisch Farben daraus aus.
Sie können eine globale Farbpalette festlegen oder eine Farbpalette festlegen, die exklusiv für eine Serie gilt.
// Globale Farbpalette.
color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#6D9AC7','#5B80A6', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
series: [{
type: 'bar',
// Die eigene Farbpalette dieser Serie.
color: ['#dd6b66','#759aa0','#e69d87','#6A96C1','#ea7e53','#eedd78','#5B80A6','#73b9bc','#7289ab', '#6F9DCA','#f49f42'],
...
}, {
type: 'pie',
// Die eigene Farbpalette dieser Serie.
color: ['#37A2DA', '#32C5E9', '#67E0E3', '#7FB2E6', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
...
}]
}
Beispiele für globale Farbpaletten:
Beispiel
color: ['#ff0000','#0080FF', '#0000ff', '#d48265', '#6D9AC7','#5B80A6', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
Selbst ausprobieren »
Beispiele für Serien-Farbpaletten:
Beispiel
type: 'pie',
// Die eigene Farbpalette dieser Serie.
color: ['#ff0000','#0080FF', '#0000ff', '#7FB2E6', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
...
}]
Selbst ausprobieren »
Direkte Stileinstellungen: itemStyle, lineStyle, areaStyle, label, ...
Direkte Stilfestlegung ist eine relativ übliche Art der Festlegung. Wenn man ECharts'optiondurchsieht, kann man an vielen StellenitemStyle festlegen、lineStyle、areaStyle、labelusw. An diesen Stellen können Sie direkt die Farbe, Linienbreite, Punktgröße, Beschriftungstext, Beschriftungsstil usw. von grafischen Elementen festlegen.
Im Allgemeinen folgen alle Serien und Komponenten von ECharts diesen Namenskonventionen, obwohl sie in verschiedenen Diagrammen und KomponentenitemStyle、labelusw. können an verschiedenen Stellen auftreten.
Eine weitere Einführung in die direkte Stilfestlegung finden Sie unterECharts-Kreisdiagramm。
Hervorhebungsstil: emphasis
Wenn der Mauszeiger über ein grafisches Element bewegt wird, erscheint im Allgemeinen ein hervorgehobener Stil. Standardmäßig wird der hervorgehobene Stil automatisch auf Basis des normalen Stils generiert.
Wenn Sie den Hervorhebungsstil anpassen möchten, können Sie ihn über die Eigenschaft emphasis anpassen:
Beispiel
emphasis: {
itemStyle: {
// Farbe des Punktes bei Hervorhebung.
color: 'red'
},
label: {
show: true,
// Der Beschriftungstext bei Hervorhebung
formatter: 'Bei Hervorhebung angezeigter Beschriftungsinhalt'
}
},
Selbst ausprobieren »