Comment utiliser des graphiques empilés pour afficher des données dans ECharts

ECharts est une bibliothèque de visualisation très populaire qui fournit une variété de types de graphiques, notamment des graphiques linéaires, des graphiques à barres, des graphiques à nuages ​​de points, des diagrammes circulaires, etc. Les graphiques empilés sont l'un des types de graphiques très pratiques qui peuvent nous aider à combiner les valeurs de différentes données selon certaines règles et à afficher visuellement leurs tailles et tendances relatives. Cet article explique comment utiliser des graphiques empilés pour afficher des données dans ECharts et donne des exemples de code spécifiques.

1. Pré-connaissances

Avant d'utiliser ECharts pour créer des graphiques empilés, nous devons maîtriser certaines connaissances préalables :

• Format des données : le format de données du graphique empilé dans ECharts est un tableau à deux dimensions, où chaque élément représente une donnée de groupe, composée d'un tableau et d'une chaîne. Le tableau représente la valeur de chaque point de données et la chaîne représente le nom de la série de données.
• Utilisation d'ECharts : les graphiques empilés dans ECharts peuvent montrer les relations relatives de plusieurs séries de données en les empilant ensemble. Lorsque vous utilisez ce type de graphique, vous devez savoir comment utiliser ECharts pour créer des instances de graphique, définir les paramètres du graphique et dessiner des graphiques.

2. Code d'implémentation

Voici l'exemple de code requis pour dessiner un graphique empilé à l'aide d'ECharts :

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

// 指定图表的配置项和数据
var option = {
  title: {
    text: '堆叠区域图'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '邮件营销',
      type: 'line',
      stack: '总量',
      areaStyle: {},
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '联盟广告',
      type: 'line',
      stack: '总量',
      areaStyle: {},
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '视频广告',
      type: 'line',
      stack: '总量',
      areaStyle: {},
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: '直接访问',
      type: 'line',
      stack: '总量',
      areaStyle: {},
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: '搜索引擎',
      type: 'line',
      stack: '总量',
      label: {
        normal: {
          show: true,
          position: 'top'
        }
      },
      areaStyle: {},
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};

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

Dans le code ci-dessus, nous créons une instance ECharts et utilisons la méthode init pour Se lie à l'élément spécifié de la page HTML. Nous définissons ensuite un objet appelé option qui contient toutes les options de configuration et les données du graphique. Ces options de configuration incluent les titres des graphiques, les info-bulles, les légendes, les zones de tracé, les barres d'outils, les axes, les séries de données, etc. La signification spécifique et l'utilisation de ces options de configuration peuvent être consultées dans la documentation officielle d'ECharts. init 方法将其绑定到 HTML 页面的指定元素上。然后，我们定义了一个名为 option 的对象，其中包含了图表的所有配置选项和数据。这些配置选项包括图表的标题、提示框、图例、绘图区域、工具栏、坐标轴、数据系列等等。关于这些配置选项的具体含义和用法，可以在 ECharts 官方文档中查看。

注意，在数据系列的定义中，我们设置了 stack 属性，表示将该系列的数据堆叠在之前所有系列的数据上面。这样，就可以将不同数据的数值按照一定规则组合在一起，展示出它们的相对大小和趋势。

最后，我们使用 setOption

Notez que dans la définition de la série de données, nous définissons l'attribut stack, ce qui signifie que les données de cette série seront empilées au-dessus des données de toutes les séries précédentes. De cette manière, les valeurs de différentes données peuvent être combinées selon certaines règles pour montrer leurs tailles et tendances relatives.

Enfin, nous utilisons la méthode setOption pour appliquer les options de configuration à l'instance ECharts afin de dessiner le graphique empilé.

3. Résumé🎜🎜Dans cet article, nous avons présenté comment utiliser des graphiques empilés pour afficher des données dans ECharts, ce qui implique des connaissances préalables telles que le format des données et l'utilisation d'ECharts. Nous fournissons également un exemple d'implémentation de code spécifique, qui comprend des étapes telles que la création d'une instance ECharts, la définition des paramètres du graphique et le dessin de graphiques. Si vous souhaitez en savoir plus sur l'utilisation et les exemples d'ECharts, veuillez vous référer à la documentation officielle et vous entraîner davantage. 🎜

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!