echarts 两条线之间填充颜色
时间: 2023-07-05 10:23:28 浏览: 68
要在 ECharts 中填充两条线之间的颜色,可以使用 ECharts 的 `areaStyle` 属性。以下是一个简单的示例代码:
```javascript
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true,
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(50, 205, 50, 0.8)'
}, {
offset: 1,
color: 'rgba(255, 255, 255, 0)'
}]
}
}
}, {
data: [820, 632, 701, 534, 990, 1030, 920],
type: 'line',
smooth: true,
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(255, 99, 71, 0.8)'
}, {
offset: 1,
color: 'rgba(255, 255, 255, 0)'
}]
}
}
}]
};
```
在这个示例中,我们有两个数据系列,每个系列都有一个 `areaStyle` 属性。`areaStyle` 属性中的 `color` 属性定义了一个线性渐变,从上到下分别为 `rgba(50, 205, 50, 0.8)` 和 `rgba(255, 255, 255, 0)`,这两种颜色之间的渐变将填充两条线之间的区域。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)