分组条形图之间的echarts线

Question

我试图使图表中的数据分组更加明显：

我想要一条穿过中间的线来表明它们是两个不同的数据集。 但是，我不太确定该怎么做。

这是我生成图表的代码：

const frequencyChartoption = {
title: {},
tooltip: {},
legend: {
    data: ['Frekvens', 'Vigtighed']
},
xAxis: {
    type: 'category',
    data: ['marker_01', 'marker_02'],
    axisLine: {
        show: true
    },
    axisTick: {
        show: true
    },
    axisLabel: {
        formatter: function (value) {
            return '{' + value + '| }\n{value|}';
        },
        margin: 20,
        rich: {
            value: {
                lineHeight: 30,
                align: 'center'
            },
            marker_01: {
                height: 20,
                align: 'center',
                backgroundColor: {
                    image: icons.marker_01
                }
            },
            marker_02: {
                height: 20,
                align: 'center',
                backgroundColor: {
                    image: icons.maker_02
                }
            },

        }

    }
},
yAxis: {
    axisLine: {
        show: true
    },
    axisTick: {
        show: true
    },
    axisLabel: {}
},
series: [{
    name: 'Frekvens',
    type: 'bar',
    data: frequencyChartFrequencyScore,
    tooltip: {
        formatter: '{c0}'
    },
    itemStyle: {
        normal: {
            color: colors[0],
            label: {
                interval: 5,
                show: true,
                position: 'top',
                formatter: '\n{c}'
            }
        }
    }
},
    {
        name: 'Vigtighed',
        type: 'bar',
        data: frequencyChartImportance,
        tooltip: {
            formatter: '{c0}'
        },
        itemStyle: {
            normal: {
                color: colors[1],
                label: {
                    show: true,
                    position: 'top',
                    formatter: '\n{c}'
                }
            }
        }
    }
]
};

谁能帮我吗？

Answer 1

我认为您正在寻找的是splitLine 。 刚刚在xAxis上启用splitLine并相应地设置样式。

xAxis: {
    splitLine: {
        show: true,
        lineStyle: ...         
    }
}