echart的重叠的2个柱状图,里面的柱状图与外侧柱状图的上下都有padding
时间: 2024-03-03 10:47:13 浏览: 23
要在 Echarts 中实现重叠的两个柱状图,并且内部柱状图与外部柱状图都有上下 padding,可以通过以下步骤来实现:
1. 首先,需要在 `grid` 中设置 `bottom` 和 `top` 属性,以控制图表的上下边距,从而实现外部柱状图的上下 padding。比如设置 `bottom` 和 `top` 都为 `20`。
2. 其次,需要在 `yAxis` 中设置 `offset` 属性,该属性可以控制坐标轴与图表的间距。比如设置 `offset` 为 `30`。
3. 然后,在 `series` 中配置两个柱状图,并将它们的 `stack` 属性设置为相同的值,以实现重叠。
4. 最后,在内部柱状图的 `itemStyle` 中设置 `emphasis` 属性,以控制内部柱状图的高亮状态时的样式,从而实现内部柱状图的上下 padding。比如设置 `emphasis.barBorderRadius` 为 `10`。
以下是示例代码:
```javascript
option = {
grid: {
top: 20,
bottom: 20
},
yAxis: {
type: 'value',
offset: 30
},
series: [
{
name: '外部柱状图',
type: 'bar',
stack: 'bar',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '内部柱状图',
type: 'bar',
stack: 'bar',
data: [220, 182, 191, 234, 290, 330, 310],
itemStyle: {
emphasis: {
barBorderRadius: 10
}
}
}
]
};
```
通过上述代码,可以实现重叠的两个柱状图,并且内部柱状图与外部柱状图都有上下 padding 的效果。可以根据具体需求调整 `grid`、`yAxis` 和 `itemStyle` 的属性值来实现不同的 padding 效果。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![java](https://img-home.csdnimg.cn/images/20210720083646.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)