条形图之间的echarts线

时间:2019-02-19 11:49:59

标签: javascript echarts

我正试图使数据分组在图表中更加明显:

enter image description here

我希望一行经过中间以表明它们是两个不同的数据集。但是我不太确定该怎么做。

这是我用于生成图表的代码:

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}'
                }
            }
        }
    }
]
};

有人可以帮我吗?

1 个答案:

答案 0 :(得分:0)

我认为您正在寻找的是splitLine。 只需在您的splitLine上启用xAxis并为其设置样式即可。

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