So verwenden Sie gestapelte Diagramme zur Anzeige von Daten in ECharts

ECharts ist eine sehr beliebte Visualisierungsbibliothek, die eine Vielzahl von Diagrammtypen bereitstellt, darunter Liniendiagramme, Balkendiagramme, Streudiagramme, Kreisdiagramme und mehr. Gestapelte Diagramme gehören zu den sehr praktischen Diagrammtypen, die uns dabei helfen können, Werte aus verschiedenen Daten nach bestimmten Regeln zusammenzuführen und ihre relativen Größen und Trends visuell darzustellen. In diesem Artikel wird erläutert, wie Sie gestapelte Diagramme zum Anzeigen von Daten in ECharts verwenden, und es werden spezifische Codebeispiele gegeben.

1. Vorkenntnisse

Bevor wir ECharts zum Erstellen gestapelter Diagramme verwenden, müssen wir einige Vorkenntnisse beherrschen:

• Datenformat: Das gestapelte Diagrammdatenformat in ECharts ist ein zweidimensionales Array, in dem jedes Element dargestellt wird a Gruppendaten, die aus einem Array und einer Zeichenfolge bestehen. Das Array repräsentiert den Wert jedes Datenpunkts und die Zeichenfolge repräsentiert den Namen der Datenreihe.
• Verwendung von ECharts: Gestapelte Diagramme in ECharts können die relativen Beziehungen mehrerer Datenreihen darstellen, indem sie übereinander gestapelt werden. Wenn Sie diesen Diagrammtyp verwenden, müssen Sie wissen, wie Sie mit ECharts Diagramminstanzen erstellen, Diagrammparameter festlegen und Diagramme zeichnen.

2. Implementierungscode

Das Folgende ist das Codebeispiel, das zum Zeichnen eines gestapelten Diagramms mit ECharts erforderlich ist:

// 基于准备好的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);

Im obigen Code erstellen wir eine ECharts-Instanz und verwenden dazu die Methode init An das angegebene Element der HTML-Seite binden. Anschließend definieren wir ein Objekt namens option, das alle Konfigurationsoptionen und Daten für das Diagramm enthält. Zu diesen Konfigurationsoptionen gehören Diagrammtitel, Tooltips, Legenden, Diagrammbereiche, Symbolleisten, Achsen, Datenreihen und mehr. Die spezifische Bedeutung und Verwendung dieser Konfigurationsoptionen kann in der offiziellen Dokumentation von ECharts eingesehen werden. init 方法将其绑定到 HTML 页面的指定元素上。然后，我们定义了一个名为 option 的对象，其中包含了图表的所有配置选项和数据。这些配置选项包括图表的标题、提示框、图例、绘图区域、工具栏、坐标轴、数据系列等等。关于这些配置选项的具体含义和用法，可以在 ECharts 官方文档中查看。

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

最后，我们使用 setOption

Beachten Sie, dass wir in der Definition der Datenreihe das Attribut stack festlegen, was bedeutet, dass die Daten dieser Reihe über den Daten aller vorherigen Reihen gestapelt werden. Auf diese Weise können Werte aus verschiedenen Daten nach bestimmten Regeln kombiniert werden, um ihre relativen Größen und Trends darzustellen.

Schließlich verwenden wir die Methode setOption, um die Konfigurationsoptionen auf die ECharts-Instanz anzuwenden, um das gestapelte Diagramm zu zeichnen.

3. Zusammenfassung🎜🎜In diesem Artikel haben wir vorgestellt, wie man gestapelte Diagramme zur Anzeige von Daten in ECharts verwendet, was Vorkenntnisse wie Datenformat und ECharts-Nutzung erfordert. Wir stellen auch ein spezifisches Code-Implementierungsbeispiel bereit, das Schritte wie das Erstellen einer ECharts-Instanz, das Festlegen von Diagrammparametern und das Zeichnen von Grafiken umfasst. Wenn Sie mehr über die Verwendung und Beispiele von ECharts erfahren möchten, lesen Sie bitte die offizielle Dokumentation und üben Sie mehr. 🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie gestapelte Diagramme zur Anzeige von Daten in ECharts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!