echarts 折线图堆积
时间: 2023-07-05 13:17:06 浏览: 89
要制作 ECharts 折线图堆叠,您可以使用 ECharts 的堆叠属性和折线图的 series 属性。下面是一个简单的示例,展示了如何制作一个简单的折线图堆叠:
```javascript
option = {
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value'
},
series: [
{
name:'邮件营销',
type:'line',
stack: '总量',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'line',
stack: '总量',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'视频广告',
type:'line',
stack: '总量',
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:'直接访问',
type:'line',
stack: '总量',
data:[320, 332, 301, 334, 390, 330, 320]
},
{
name:'搜索引擎',
type:'line',
stack: '总量',
data:[820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
```
在这个示例中,我们通过 `stack` 属性将所有的折线图堆叠到了一起。这意味着它们会在同一坐标轴上显示,并且它们的值会相互叠加。注意,每个 series 对象都需要指定一个 `stack` 属性,以便将它们堆叠在一起。
另外,我们还可以使用 `yAxis` 的 `stack` 属性,使得堆叠的折线图从 y 轴的底部开始叠加。例如:
```javascript
yAxis: {
type: 'value',
stack: '总量'
},
```
这样,所有的折线图将从 y 轴的底部开始叠加。
阅读全文