在React Apexcharts中,可以通过设置图表的配置项来添加每个系列的条形之间的间隙。具体的步骤如下:
import React from 'react';
import ApexCharts from 'apexcharts';
import ReactApexChart from 'react-apexcharts';
constructor(props) {
super(props);
this.state = {
options: {
chart: {
type: 'bar',
stacked: true,
toolbar: {
show: false
}
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '50%', // 设置每个系列的条形宽度
endingShape: 'flat' // 设置条形的形状
},
},
xaxis: {
categories: ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5']
},
yaxis: {
title: {
text: 'Value'
}
},
fill: {
opacity: 1
},
legend: {
position: 'top'
}
},
series: [
{
name: 'Series 1',
data: [44, 55, 41, 67, 22]
},
{
name: 'Series 2',
data: [13, 23, 20, 8, 13]
},
{
name: 'Series 3',
data: [11, 17, 15, 15, 21]
},
{
name: 'Series 4',
data: [21, 7, 25, 13, 22]
}
]
};
}
render() {
return (
<div>
<ReactApexChart options={this.state.options} series={this.state.series} type="bar" height={350} />
</div>
);
}
通过设置columnWidth
属性,可以调整每个系列的条形宽度,从而实现条形之间的间隙。你可以根据需要调整该值来达到你想要的效果。
这是一个基本的React Apexcharts条形图的示例,你可以根据自己的需求进行进一步的配置和定制。如果你想了解更多关于React Apexcharts的配置项和用法,可以参考React Apexcharts官方文档。
领取专属 10元无门槛券
手把手带您无忧上云