如何在React ApexCharts中为选中的柱状图设置自定义背景色与虚线边框？

嗨，我之前也折腾过ApexCharts的选中样式，刚好能帮到你！其实不用绕远路，ApexCharts本身就提供了配置项来实现你要的效果，下面一步步来调整你的代码：

核心思路：利用plotOptions.bar.states.active配置项 #

你已经关掉了默认的暗化滤镜（filter.type: 'none'），接下来只要在同一个配置块里添加背景色和边框的自定义规则就行，不用额外操作DOM。

1. 配置选中状态的样式 #

直接修改你plotOptions.bar的配置，加入states.active的细节设置：

• fillColor：设置选中柱子的自定义背景色
• stroke：配置边框的宽度、颜色和虚线样式（dashArray用来定义虚线的间隔，比如[5,3]代表5px实线+3px空白的循环）

2. 可选：实现单选效果（每次只选中一个柱子） #

如果需要限制只能选中一个柱子，还可以在chart.events.dataPointSelection事件里处理，取消之前选中的所有点。

修改后的完整组件代码 #

const BarChart = (props: {
    series: any;
    height: number;
    xCategories: string[];
    horizontal?: boolean;
}) => (
    <ChartWrapper
        style={{
            position: `relative`,
            width: `100%`,
            margin: `0 auto`,
            boxSizing: `border-box`,
            border: `none`,
            padding: 0,
        }}
    >
        <ApexCharts
            type={'bar'}
            series={[
                {
                    name: '',
                    data: props.series,
                },
            ]}
            options={{
                chart: {
                    type: 'bar',
                    height: props.height,
                    toolbar: {show: false},
                    events: {
                        dataPointSelection(chart, options) {
                            // 实现单选：取消其他已选中的柱子
                            chart.w.config.series[0].data.forEach((_, index) => {
                                if (index !== options.dataPointIndex) {
                                    chart.toggleDataPointSelection(0, index, false);
                                }
                            });
                        },
                    },
                    background: 'transparent',
                },
                plotOptions: {
                    bar: {
                        barHeight: '50%',
                        borderRadius: 2,
                        horizontal: props.horizontal,
                        columnWidth: '8px',
                        states: {
                            active: {
                                filter: {
                                    type: 'none', // 去掉默认暗化效果
                                },
                                fillColor: '#e6f2ff', // 替换成你要的自定义背景色
                                stroke: {
                                    width: 2, // 边框宽度
                                    color: '#1890ff', // 边框颜色
                                    dashArray: [5, 3] // 虚线样式
                                }
                            }
                        }
                    },
                },
                dataLabels: {enabled: false},
                colors: [theme.palette.info.light],

                grid: {
                    show: true,
                    borderColor: theme.palette.greySecondary[100],
                    xaxis: {
                        lines: {
                            show: false,
                        },
                    },
                    yaxis: {
                        lines: {
                            show: true,
                        },
                    },
                },
                xaxis: {
                    categories: props.xCategories,
                    position: 'bottom',
                    axisBorder: {
                        show: true,
                    },
                    labels: {
                        style: {
                            colors: theme.palette.greySecondary[600],
                        },
                    },
                    tooltip: {
                        enabled: true,
                    },
                },
                yaxis: {
                    show: true,
                    axisBorder: {show: false},
                    axisTicks: {show: true},
                    labels: {
                        style: {
                            colors: theme.palette.greySecondary[600],
                        },
                        formatter: (val: number) => val.toLocaleString(),
                    },
                },
                tooltip: {
                    enabled: true,
                    theme: 'light',
                    style: {
                        fontSize: '12px',
                    },
                    y: {
                        formatter: (val: number) => val.toLocaleString(),
                    },
                },
            }}
            height={props.height || `auto`}
        />
    </ChartWrapper>
);

注意点 #

• 把states.active的配置从全局移到plotOptions.bar下，这样只会作用于柱状图，不会影响其他类型的系列（如果后续扩展的话）
• dashArray的数值可以根据你的设计需求调整，比如[3,2]会是更细密的虚线
• 背景色和边框颜色可以直接用你的theme变量，比如theme.palette.primary.light

这样调整后，选中的柱子就会同时拥有你要的自定义背景色和虚线边框啦！

备注：内容来源于stack exchange，提问作者hongsoohyuk