echarts 两条线之间填充颜色
时间: 2023-07-05 11:32:11 浏览: 320
要在 ECharts 中填充两条线之间的颜色,可以使用 `areaStyle` 属性。具体步骤如下:
1. 在 `option` 中定义两条线的数据。
```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',
name: 'Line 1'
}, {
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
name: 'Line 2'
}]
};
```
2. 在 `series` 中对其中一条线添加 `areaStyle` 属性。
```javascript
option = {
// ...
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
name: 'Line 1'
}, {
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
name: 'Line 2',
areaStyle: {}
}]
};
```
3. 根据需要设置填充区域的样式。例如,可以设置填充颜色和透明度。
```javascript
option = {
// ...
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
name: 'Line 1'
}, {
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
name: 'Line 2',
areaStyle: {
color: 'rgba(0, 255, 0, 0.3)'
}
}]
};
```
这样就可以在两条线之间填充颜色了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)