Home > Article > Web Front-end > 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:
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!