echarts中stack堆叠知识
时间: 2024-06-08 08:12:49 浏览: 24
在 ECharts 中,堆叠(stack)是一种数据系列的表现方式,它将同类型的系列数据进行叠加显示,使得某个类别的数据在图表中更加直观地显示出来。在 ECharts 中,堆叠可以分为普通堆叠和百分比堆叠两种形式。
普通堆叠:普通堆叠指的是对同一类别的数据进行叠加显示,每个数据系列的值被堆叠在前面的数据系列之上。在 ECharts 中,可以通过设置 series 中的 stack 属性来实现普通堆叠。
百分比堆叠:百分比堆叠是指在普通堆叠的基础上,将每个数据系列的值转化为该系列在总和中所占的百分比,以百分比的形式进行堆叠显示。在 ECharts 中,可以通过设置 series 中的 stack 属性为 percent 来实现百分比堆叠。
下面是一个普通堆叠的示例代码:
```
option = {
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '邮件营销',
type: 'bar',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'bar',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'bar',
stack: '总量',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接访问',
type: 'bar',
stack: '总量',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '搜索引擎',
type: 'bar',
stack: '总量',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
```
在上面的代码中,设置了五个数据系列,它们的 stack 属性都被设置为 '总量',这样就实现了普通堆叠的效果。
如果要将上面的代码改为百分比堆叠,只需要将每个数据系列的 stack 属性设置为 'percent',然后将 yAxis 中的 max 属性设置为 100 即可。
```
option = {
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value',
max: 100
},
series: [
{
name: '邮件营销',
type: 'bar',
stack: 'percent',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'bar',
stack: 'percent',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'bar',
stack: 'percent',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接访问',
type: 'bar',
stack: 'percent',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '搜索引擎',
type: 'bar',
stack: 'percent',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
```
这样就实现了百分比堆叠的效果。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)