Paramètres de style ECharts
ECharts peut modifier la couleur, la luminosité, la taille, etc. des éléments graphiques ou du texte via les paramètres de style.
Thème de couleur
À partir d'ECharts 4, en plus du thème par défaut, deux thèmes intégrés sont inclus, à savoirlightetdark。
L'utilisation est la suivante :
Exemple
Essayez-le vous-même »
De plus, nous pouvons également, sur l'éditeur de thèmeofficiel, choisir un thème qui vous plaît et le télécharger.
Actuellement, le téléchargement du thème fournit à la fois une version JS et une version JSON.
Si vous utilisez la version JS, vous pouvez enregistrer le code du thème JS dans un fichierthemeName.js, puis référencer le fichier en HTML, et enfin utiliser le thème dans votre code.
Par exemple, dans l'image ci-dessus, nous avons sélectionné un thème ; enregistrez le code JS souswonderland.js。
Exemple
<script src="https://www.example.com/static/js/wonderland.js"></script>
...
//Après avoir inclus le fichier wonderland.js dans le HTML, appelez-le lors de l'initialisation.
var myChart = echarts.init(dom, 'wonderland');
// ...
Essayez-le vous-même »
Si le thème est enregistré en tant que fichier JSON, vous pouvez le charger et l'enregistrer vous-même.
Par exemple, dans l'image ci-dessus, nous avons sélectionné un thème ; enregistrez le code JSON souswonderland.json。
Exemple
$.getJSON('wonderland.json', function (themeJSON) {
echarts.registerTheme('wonderland', themeJSON)
var myChart = echarts.init(dom, 'wonderland');
});
Essayez-le vous-même »
Remarque :Nous utilisons $.getJSON, donc jQuery doit être inclus.
palette de couleurs
La palette de couleurs peut être définie dans l'option.
La palette de couleurs fournit un ensemble de couleurs, et les graphiques et les séries sélectionneront automatiquement des couleurs à partir de celle-ci.
Vous pouvez définir une palette de couleurs globale, ou vous pouvez définir une palette de couleurs exclusive à une série.
// Palette de couleurs globale.
color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#6D9AC7','#5B80A6', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
series: [{
type: 'bar',
// Palette de couleurs propre à cette série.
color: ['#dd6b66','#759aa0','#e69d87','#6A96C1','#ea7e53','#eedd78','#5B80A6','#73b9bc','#7289ab', '#6F9DCA','#f49f42'],
...
}, {
type: 'pie',
// Palette de couleurs propre à cette série.
color: ['#37A2DA', '#32C5E9', '#67E0E3', '#7FB2E6', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
...
}]
}
Exemples de palette de couleurs globale :
Exemple
color: ['#ff0000','#0080FF', '#0000ff', '#d48265', '#6D9AC7','#5B80A6', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
Essayez-le vous-même »
Exemples de palette de couleurs de séries :
Exemple
type: 'pie',
// Palette de couleurs propre à cette série.
color: ['#ff0000','#0080FF', '#0000ff', '#7FB2E6', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
...
}]
Essayez-le vous-même »
Paramètres de style directs : itemStyle, lineStyle, areaStyle, label, ...
Le paramétrage direct du style est une méthode de paramétrage relativement courante. En parcourant l'optiond'ECharts, à de nombreux endroits, vous pouvez définiritemStyle、lineStyle、areaStyle、labeletc. À ces endroits, vous pouvez définir directement la couleur, la largeur de ligne, la taille des points, le texte de l'étiquette, le style de l'étiquette, etc. des éléments graphiques.
D'une manière générale, toutes les séries et tous les composants d'ECharts suivent ces conventions de nommage, bien que dans différents graphiques et composants,itemStyle、labeletc. peuvent apparaître à différents endroits.
Pour une autre introduction au paramétrage direct du style, voirle diagramme circulaire d'ECharts。
Style de mise en évidence: emphasis
Lorsque la souris survole un élément graphique, un style de mise en évidence apparaît généralement. Par défaut, le style de mise en évidence est automatiquement généré à partir du style normal.
Si vous souhaitez personnaliser le style de mise en évidence, vous pouvez le personnaliser via la propriété emphasis:
Exemple
emphasis: {
itemStyle: {
// Couleur du point lorsqu'il est mis en évidence.
color: 'red'
},
label: {
show: true,
// Le texte du libellé lorsqu'il est mis en surbrillance
formatter: 'Contenu du libellé affiché lorsqu'il est mis en surbrillance'
}
},
Essayez-le vous-même »