Maison > interface Web > js tutoriel > Exemple graphique de configuration du tableau de bord echarts

Exemple graphique de configuration du tableau de bord echarts

零下一度
Libérer: 2017-06-26 10:06:59
original
6165 Les gens l'ont consulté

Dans les graphiques echarts, il est souvent nécessaire de définir des légendes pour différentes couleurs afin d'identifier différentes significations. Cependant, le pointeur sur le tableau de bord n'a qu'une seule valeur. Comment exprimer la signification des différentes couleurs ? fournir cette fonction ;

Les couleurs des différents segments sont définies via axisLine->lineStyle->color; 🎜>J'ai cherché beaucoup d'informations je n'ai pas trouvé la légende utilisée pour identifier chaque segment de couleur J'y ai réfléchi encore et encore, puis-je utiliser une image avec une légende pour forcer l'ajout de celle-ci ; légende?

Les chaussures pour enfants qui connaissent les echarts ici ont peut-être pensé à une solution ;

Utilisons alors une astuce de « transfert de fleurs et de bois »

Idée principale : Utiliser la légende du graphique à barres, puis définir le niveau du graphique à barres et du graphique à instruments, puis masquer le graphique à barres et désactiver l'événement de clic de la légende ; 🎜>

Remarque :

1.series comporte à la fois des éléments de configuration de type « jauge » et les configurations d'éléments de type 'bar', et pour les éléments de configuration de type 'bar', il suffit de faire attention à la couleur de sa légende ; Définir tout pour qu'il ne soit pas affiché, y compris l'axe et les lignes de séparation

3. Pour éviter des expériences étranges, il est préférable de désactiver l'événement de clic de la légende ;

Le rendu final est le suivant, n'est-ce pas très simple ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal