echarts 折线图堆积阴影
时间: 2023-07-05 20:17:07 浏览: 57
要在 ECharts 折线图堆叠中添加阴影,您可以使用折线图的 `areaStyle` 属性。`areaStyle` 属性控制折线图下面区域的样式。您可以使用 `color` 属性设置阴影的颜色,使用 `opacity` 属性控制阴影的透明度。下面是一个简单的示例,展示了如何使用 `areaStyle` 属性添加阴影:
```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: '总量',
areaStyle: {
color: '#f7e1c5',
opacity: 0.5
},
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'line',
stack: '总量',
areaStyle: {
color: '#c5d4f7',
opacity: 0.5
},
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'视频广告',
type:'line',
stack: '总量',
areaStyle: {
color: '#f7c5e1',
opacity: 0.5
},
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:'直接访问',
type:'line',
stack: '总量',
areaStyle: {
color: '#c5f7e1',
opacity: 0.5
},
data:[320, 332, 301, 334, 390, 330, 320]
},
{
name:'搜索引擎',
type:'line',
stack: '总量',
areaStyle: {
color: '#e1c5f7',
opacity: 0.5
},
data:[820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
```
在这个示例中,我们在每个 series 对象中添加了 `areaStyle` 属性。`areaStyle` 属性控制折线图下面区域的样式。我们使用 `color` 属性设置阴影的颜色,使用 `opacity` 属性控制阴影的透明度。
注意,如果您想要将阴影颜色设置为渐变色,可以使用 `color` 属性的渐变色功能。例如:
```javascript
areaStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#c5f7e1'},
{offset: 1, color: '#e1c5f7'}
]
),
opacity: 0.5
},
```
这样,阴影颜色将从上到下渐变。