Guide de démarrage ECharts : Comment utiliser ECharts

Guide de démarrage d'ECharts : Comment utiliser ECharts, des exemples de code spécifiques sont requis

ECharts est une bibliothèque de visualisation de données basée sur JavaScript. En utilisant ECharts, les utilisateurs peuvent facilement afficher une variété de graphiques, tels que des graphiques linéaires et des colonnes. . Graphiques, diagrammes circulaires, etc. Cet article vous expliquera comment utiliser ECharts et fournira des exemples de code détaillés.

1. Installer ECharts

Pour utiliser ECharts, vous devez d'abord l'installer. Vous pouvez télécharger ECharts depuis le site officiel d'ECharts https://echarts.apache.org/zh/index.html, ou l'installer à l'aide de npm. Si vous choisissez d'utiliser npm, vous pouvez l'installer avec la commande suivante :

npm install echarts --save

2. Créer une nouvelle page ECharts

Avant de créer une nouvelle page ECharts, vous avez besoin d'une page HTML pour héberger ECharts. Dans le HTML, vous devez inclure le fichier JavaScript d'ECharts. Vous pouvez l'importer via :

<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>

Une fois que vous avez importé le fichier JavaScript d'ECharts, vous pouvez commencer à créer votre première instance ECharts. Nous vous recommandons d'ajouter un élément div à la page avant de faire cela afin de pouvoir afficher le graphique dans la page. Vous pouvez ajouter un élément div en HTML comme ceci :

<div id="chart" style="width: 600px;height:400px;"></div>

3. Créez votre premier graphique ECharts

Après avoir créé les éléments de base requis pour les ECharts en HTML, vous devez ensuite écrire le code pour implémenter votre graphique ECharts. Voici un exemple de graphique linéaire très simple :

// 1. 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));

// 2. 指定图表的配置项和数据
var option = {
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

// 3. 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

Ici, nous appliquons d'abord ces éléments de configuration à notre graphique ECharts en utilisant la méthode init函数来初始化了一个新的ECharts实例，并将这个实例保存到一个变量myChart中。我们引入了一些配置项和数据，其中包括一个标题、一个提示框、一个图例、一个x轴、一个y轴和一个数据系列。在这个例子中，我们使用了一个折线图的数据系列。最后，我们通过调用setOption d'ECharts.

4. Créer d'autres types de graphiques

En plus des graphiques linéaires, ECharts prend également en charge de nombreux autres types de graphiques, tels que les graphiques à barres, les diagrammes circulaires, les graphiques en nuages ​​de points, les graphiques radar, etc. Vous trouverez ci-dessous un exemple de code pour un graphique à barres et un graphique à secteurs :

Graphique à barres :

// 1. 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));

// 2. 指定图表的配置项和数据
var option = {
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

// 3. 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

Graphique à secteurs :

// 1. 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));

// 2. 指定图表的配置项和数据
var option = {
    title: {
        text: 'ECharts 入门示例',
        subtext: '饼图示例'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
};

// 3. 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

5. Résumé

Créer des graphiques avec ECharts est une tâche relativement simple, à condition que vous ayez des connaissances de base en JavaScript. . Dans cet article, nous vous proposons un didacticiel d'introduction qui vous aidera à démarrer avec ECharts. Si vous avez besoin de plus d'informations et d'exemples de code, vous pouvez visiter le site officiel d'ECharts https://echarts.apache.org/zh/index.html.

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!