echarts的重合柱状图的barWidth和barGap的比例如何才能让一个柱状图在另一个柱状图的中心,且2个柱状图的barwidth不同
时间: 2023-08-22 14:26:30 浏览: 113
Echarts实现柱状图效果
4星 · 用户满意度95%
如果要让一个柱状图在另一个柱状图的中心,且两个柱状图的barWidth不同,可以根据以下步骤进行设置:
1. 首先需要确定两个柱状图的总宽度,包括它们的间距。
2. 然后根据两个柱状图的宽度比例,计算出它们的具体宽度。
3. 根据计算出的宽度比例和两个柱状图的总宽度,计算出它们的间距。
4. 最后将计算出的宽度和间距设置到对应的barWidth和barGap中即可。
示例代码如下:
```
var option = {
...
series: [{
name: '图一',
type: 'bar',
barWidth: 50, // 指定柱状图的宽度
data: [10, 20, 30],
itemStyle: {
color: 'red'
}
},
{
name: '图二',
type: 'bar',
barWidth: 30, // 指定柱状图的宽度
barGap: '10%', // 指定柱状图之间的间距
data: [20, 30, 40],
itemStyle: {
color: 'blue'
}
}
]
...
};
```
在上述示例中,图一和图二的总宽度为80,根据宽度比例计算出图一的宽度为50,图二的宽度为30,间距为8。最后将这些值分别设置到barWidth和barGap中即可。
阅读全文