要更新带有组标签的列之间的条形宽度,您可以使用 ApexCharts 的 "barWidth" 选项。以下是一个代码示例:
// 引入 ApexCharts 库
import ApexCharts from 'apexcharts';
// 创建图表配置对象
const options = {
chart: {
type: 'bar',
height: 350
},
plotOptions: {
bar: {
horizontal: false,
barHeight: '80%', // 设置每个条形的高度
distributed: true, // 设置为 true 可以将条形宽度分配到每个组中
dataLabels: {
position: 'top'
}
}
},
dataLabels: {
enabled: true,
offsetY: -20,
style: {
fontSize: '12px',
colors: ['#304758']
}
},
series: [
{
name: 'Series 1',
data: [44, 55, 41, 67, 22]
},
{
name: 'Series 2',
data: [13, 23, 20, 8, 13]
}
],
xaxis: {
categories: ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5'],
labels: {
style: {
fontSize: '12px'
}
}
},
yaxis: {
title: {
text: 'Count'
}
},
fill: {
colors: ['#F44336', '#E91E63']
},
title: {
text: 'Bar Chart with Grouped Labels',
align: 'center',
floating: true
},
tooltip: {
theme: 'dark',
x: {
show: false
},
y: {
title: {
formatter: function () {
return ''
}
}
}
}
};
// 创建图表实例
const chart = new ApexCharts(document.querySelector("#chart"), options);
// 渲染图表
chart.render();
在上面的示例中,我们使用 "barHeight" 选项设置了每个条形的高度,并使用 "distributed" 选项将条形宽度分配到每个组中。这将确保每个组中的条形宽度相等。
您可以根据需要调整 "barHeight" 的值以及其他配置选项,以满足您的需求。