Bibliothèque de graphiques basée sur HTML5 Canvas : ECharts

ECharts, open source par l'équipe de visualisation de données front-end commerciale de Baidu, est basé sur HTML5 Canvas. C'est une bibliothèque de graphiques en JavaScript pur qui fournit des graphiques de visualisation de données intuitifs, vivants, interactifs et personnalisables. Des fonctionnalités innovantes telles que le recalcul par glisser-déposer, la vue des données et la navigation dans la plage de valeurs améliorent considérablement l'expérience utilisateur et permettent aux utilisateurs d'exploiter et d'intégrer les données.——À l'ère du big data, il est temps de redéfinir les graphiques de données

Architecture

ECharts (Enterprise Charts - bibliothèque de graphiques pour produits commerciaux)

Fournit une bibliothèque de graphiques pour les produits commerciaux courants, basée surZRenderCréant des composants de base tels que les systèmes de coordonnées, les légendes, les info-bulles et les boîtes à outils, et au-dessus de ceux-ci se trouvent les graphiques en courbes (graphiques en aires), les graphiques à barres (graphiques en bandes), les nuages de points (graphiques à bulles), les graphiques circulaires (graphiques en anneau), les graphiques K-line, les cartes, les diagrammes d'accords et les diagrammes de disposition dirigée par forces. Il prend également en charge l'empilement dans n'importe quelle dimension et l'affichage mixte de plusieurs types de graphiques.

Les graphiques mixtes sont plus expressifs et intéressants. Les graphiques fournis par ECharts (9 catégories, 14 types au total) prennent en charge le mélange arbitraire :

Graphiques en courbes (graphiques en aires), graphiques à barres (graphiques en bandes), nuages de points (graphiques à bulles), graphiques K-line, graphiques circulaires (graphiques en anneau), graphiques radar, cartes, diagrammes d'accords et diagrammes de disposition dirigée par forces.

Un graphique standard en mode mixte :

Contient une légende unique, une boîte à outils, un zoom de la zone de données et des modules de navigation dans la plage de valeurs, ainsi qu'un système de coordonnées cartésiennes (qui peut contenir un ou plusieurs axes de catégorie et un ou plusieurs axes de valeurs, jusqu'à quatre axes au total : haut, bas, gauche, droite)

Recalcul par glisser-déposer

La fonctionnalité de recalcul par glisser-déposer (brevetée) apporte une expérience utilisateur jamais vue auparavant dans les graphiques statistiques ; elle permet aux utilisateurs d'extraire et d'intégrer efficacement des données statistiques, voire d'échanger des données entre plusieurs graphiques, et donne aux utilisateurs les moyens d'exploiter et d'intégrer les données.

Vue des données

Si les données que vous présentez importent suffisamment aux utilisateurs, ils ne se contenteront pas de simplement consulter des graphiques visuels. Devez-vous répondre à leurs besoins de téléchargement, d'enregistrement, de partage, de traitement et d'intégration des données existantes un par un ?

Peut-être vous suffit-il de fournir un texte de données séparées par des virgules et ils comprendront — c'est la vue des données d'ECharts ! Bien sûr, vous pouvez remplacer la méthode de sortie de la vue des données pour présenter les données de votre propre façon unique.

Si vos utilisateurs sont suffisamment avancés, vous pouvez même activer la fonction d'édition de la vue des données. Comparé au recalcul par glisser-déposer, il s'agit d'une modification des données par lots !

Echarts 数据视图

Changement de type dynamique

De nombreux types de graphiques ont des capacités d'expression similaires, mais en raison de différences dans les données, les exigences de présentation et les préférences personnelles, les graphiques finaux peuvent être très différents. Par exemple, choisir entre des graphiques en courbes et des graphiques à barres, ou décider si les données de série doivent être empilées ou disposées à plat, est toujours un casse-tête.

ECharts offre un changement de type dynamique, permettant aux utilisateurs de basculer librement vers le type de graphique et l'état d'empilement dont ils ont besoin.

Bascule de légende

Afficher plusieurs séries simultanément présente un contenu riche, mais comment permettre aux utilisateurs de basculer vers la série spécifique qui les intéresse ?

ECharts fournit une bascule de légende multidimensionnelle pratique et rapide, vous permettant de basculer à tout moment vers la série de données qui vous intéresse.

Sélection de la zone de données

Les données peuvent être infinies, mais l'espace d'affichage est toujours limité. Le composant de sélection de la zone de données offre la possibilité de parcourir de grands volumes de données, permettant aux utilisateurs de sélectionner et d'afficher la zone de données qui les intéresse.

Combiné à des lignes de repère et des marqueurs dynamiques de moyenne (valeur extrême), il démontre de puissantes capacités d'analyse de données.

Liaison multi-graphiques

Afficher plusieurs séries dans le même système de coordonnées cartésiennes peut parfois prêter à confusion, mais elles ont de fortes corrélations et ne peuvent pas être séparées ?

ECharts fournit une capacité de liaison multi-graphiques (connect), qui fait bien plus que simplement afficher des détails au survol. Les graphiques liés partagent les événements des composants et assemblent automatiquement les images lors de l'enregistrement.

Exploration de plage de valeurs

Les graphiques basés sur des coordonnées (tels que les cartes et les nuages de points) peuvent afficher visuellement la distribution des données en utilisant des changements de couleur pour représenter l'ampleur des valeurs.

Mais comment se concentrer sur les valeurs qui vous intéressent ? Nous avons créé une fonctionnalité appelée exploration de plage de valeurs, qui vous permet de filtrer facilement les valeurs.

Effets de lueur

Nous savons que bien souvent, nous avons besoin de fonctionnalités accrocheuses.

ECharts prend en charge les effets de lueur pour les marqueurs et les lignes de repère. En particulier lorsqu'ils sont utilisés sur des cartes, ils permettent de reproduire facilement les effets de visualisation des données de migration de Baidu.

Nuage de points à grande échelle

Comment afficher des millions de points de données discrets pour trouver leur distribution et leur regroupement ? Il semble qu'il n'y ait d'autre choix que d'utiliser des outils statistiques professionnels (comme MATLAB) ?

Non, ECharts a inventé un nuage de points à grande échelle basé sur les pixels (breveté). Une zone de nuage de points de 900 x 400 peut afficher 360,000 ensembles de données sans répétition. Pour les applications courantes, les navigateurs modernes suffisent à afficher facilement des millions de points de données de dispersion !

Ajout de données dynamiques

Si vous avez besoin d'afficher des données évoluant en temps réel, cette interface dynamique vous sera très utile.

var myChart = echarts.init(document.getElementById('main'));

$.get('data.json').done(function (data) {
    myChart.setOption({
        title: {
            text: '异步数据加载示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    });
});

Echarts 动态数据添加

Assistance aux lignes de repère

Ligne de tendance ? Ligne moyenne ? Tendances futures ? Valeurs de correction ? Les utilisateurs qui en ont besoin connaissent naturellement l'objectif~

Fournir une assistance aux lignes de repère est une fonctionnalité essentielle dans les graphiques K-line ! Oui, les graphiques K-line sont en cours de développement~

Empilement multidimensionnel

Prend en charge l'empilement de données multi-séries et multidimensionnelles. Combiné à des entités graphiques à mise à l'échelle automatique et à des systèmes de coordonnées cartésiennes, il peut présenter des graphiques statistiques plus significatifs~

Mode de carte de sous-région

Les types de carte prennent en charge le monde, la Chine et 34 provinces, municipalités et régions autonomes à l'échelle nationale. Il prend également en charge le mode sous-région, qui étend le type de carte principal pour inclure les cartes de sous-régions contenues, produisant facilement des cartes simplifiées de 176 pays et régions du monde et de plus de 600 provinces et villes à l'échelle nationale.

Extension de carte GeoJSON

Les cartes intégrées sont alimentées par des données cartographiques générées à partir de données géographiques GeoJSON standard compressées avec un algorithme de compression efficace (environ 30 % de la taille du GeoJSON standard). Si les types de carte ou les données intégrés ne répondent pas aux besoins de votre projet, vous pouvez simplement effectuer un enregistrement dynamique pour créer les nouveaux types dont vous avez besoin.

Marqueurs & lignes de repère

L'ajout de marqueurs supplémentaires est une fonctionnalité courante, comme le marquage de positions spécifiques sur des cartes, le marquage de points extrêmes sur des graphiques en courbes, ou le marquage de lignes de tendance dans des graphiques à barres. Tous les types de graphiques ECharts prennent en charge les marqueurs et les lignes de marquage, et réagissent intrinsèquement aux interactions de composants tels que les basculements de légende et la navigation dans les plages de valeurs.

Personnalisation sur mesure

Plus de 500 options configurables, combinées à une conception de contrôle à plusieurs niveaux, répondent à des besoins de personnalisation très poussés.

Interaction événementielle

Peut capturer les interactions des utilisateurs et les événements de modification des données afin d'établir une liaison entre les graphiques et le monde extérieur.

Ressources associées

Tutoriel ECharts :https://www.example.com/echarts/echarts-tutorial.html
Téléchargement d'ECharts :https://github.com/apache/incubator-echarts
Site officiel d'ECharts :https://www.echartsjs.com/zh/index.html
Tutoriel HTML5 Canvas :https://www.example.com/html/html5-canvas.html
ZRender :https://www.example.com/w3cnote/html5-canvas-zrender.html