How to use stacked charts to display data in ECharts

ECharts is a very popular visualization library that provides a variety of chart types, including line charts, bar charts, scatter charts, pie charts, and more. Stacked charts are one of the very practical chart types that can help us combine values ​​from different data together according to certain rules and visually display their relative sizes and trends. This article will introduce how to use stacked charts to display data in ECharts and give specific code examples.

1. Prerequisite knowledge

Before using ECharts to make stacked charts, we need to master some prerequisite knowledge:

• Data format: stacked charts in ECharts The data format is a two-dimensional array, in which each element represents a set of data, which consists of an array and a string. The array represents the value of each data point, and the string represents the name of the data series.
• ECharts Usage: Stacked charts in ECharts can show the relative relationships of several data series by stacking them together. When using this chart type you need to know how to use ECharts to create chart instances, set chart parameters and draw graphs.

2. Implementation code

The following is a code example required to draw a stacked chart using 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);

In the above code, we created an ECharts instance , and use the init method to bind it to the specified element of the HTML page. We then define an object named option that contains all the configuration options and data for the chart. These configuration options include chart titles, tooltips, legends, plot areas, toolbars, axes, data series, and more. The specific meaning and usage of these configuration options can be viewed in the ECharts official documentation.

Note that in the definition of the data series, we set the stack attribute, which means that the data of this series will be stacked on top of the data of all previous series. In this way, values ​​from different data can be combined together according to certain rules to show their relative sizes and trends.

Finally, we use the setOption method to apply the configuration options to the ECharts instance to draw the stacked chart.

3. Summary

In this article, we introduced how to use stacked charts to display data in ECharts, which involves pre-knowledge such as data format and ECharts usage. We also provide a specific code implementation example, which includes steps such as creating an ECharts instance, setting chart parameters, and drawing graphics. If you want to know more about the usage and examples of ECharts, please refer to the official documentation and practice more.

The above is the detailed content of How to use stacked charts to display data in ECharts. For more information, please follow other related articles on the PHP Chinese website!