Notes sur l'utilisation des graphiques électroniques pour mettre en œuvre des projets de graphiques

Le contenu de cet article concerne les points à noter lors de l'utilisation d'echarts pour mettre en œuvre des projets de graphiques. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Récemment, j'ai réalisé un projet de graphique utilisant des echarts. En raison de la capacité limitée à comprendre l’API, son utilisation n’est pas simple.
Comme le dit le proverbe, un bon souvenir n'est pas aussi bon qu'une mauvaise écriture, je vais donc enregistrer quelques points clés pour une révision ultérieure.

Une méthode d'utilisation

Projet : ionic+angular4+echarts

    1.由于打包原因，echarts不能直接引入进package.json的dependencies中，只能以原始的方式从index.html中引入
    <script src="assets/js/echarts.min.js"></script>

    2.在组件的.html文件中
    <div echarts [options]="pieOption" (chartClick)="jump2Detail($event)"></div>

    3.在组件的.ts文件中配置好options的值pieOption以及点击drill down的逻辑

Deux points à noter

Chaque zone de rendu a une position. Paramètres, vous pouvez personnaliser la distance du haut, du bas, de la gauche et de la droite

    grid:{
        top:...
        left:...
        bottom:...
        right:...
    }
    
    legend:{
        top:...
        left:...
        ...
    }

2. Fondamentalement, chaque point d'affichage impliquant une valeur fournit un formateur

tooltip:{
        formatter: params => { //自定义hover状态数据显示的情况
            let str = '';
            str += `<h6 style="color:#fff;font-size:13px;margin:4px 0">${params[0].name}</h6>`;
            params.forEach(item => {
                str += `${item.marker}${item.seriesName}: ${Math.round(item.value).toLocaleString()}<br>`;
                //item中提供了图标、颜色等
            });
            return str;
        }
    }
    
    legend:{
        formatter: (name) => { //需要根据值去重算数据然后显示的情况
            let source = data.source[name.toUpperCase()];
            var total = 0;
            source.forEach(element => {
                total += element;
            });

            return name + ': ' + Math.round(total).toLocaleString();
        }
    }

3. configure certaines échelles d'attributs de l'axe de coordonnées, le nom de l'axe et comment afficher les informations de coordonnées

4. barre d'outils de la boîte à outils, avec images d'exportation intégrées, vue des données, changement de type dynamique, mise à l'échelle de la zone de données et réinitialisation5 A. outil
parmi lequel vous pouvez exporter plusieurs graphiques par vous-même via l'API associée de Canvas

5. Le composant de zoom de la zone de données dataZoom - peut être un ou plusieurs

dataZoom:[
    {
        type:'inside', //内置在坐标系中 通过鼠标滚轮或者手指touch进行处罚
        ...
    },
    {
        type:'slider', //在外部 显示为滑动条形的一个组件，可直接拖动使用
        ...
    }
]

6. série liste des séries, chaque série détermine le type de graphique par type - en injectant des données dans différents formats selon différents graphiques

series:{
    type:'line'/'pie'/'bar'/'treemap',
    ...
}

En fait, il existe des paramètres subtils pour chaque graphique Données, couleur, espacement, etc. ., à suivre...

Recommandations associées :

echarts implémente l'ajout d'événements de clic au tableau des statistiques du secteur du graphique à secteurs

Utilisez Echarts pour implémenter des graphiques de courbes dynamiques

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!