Question

这是Echarts柱形图：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon','Tue']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120],
        type: 'bar'
    },
{
        data: [100],
        type: 'bar'
    }    
    ]
};

它将显示一个带有两个条形图的柱形图，每个系列一个。 ECharts会这样渲染它：

我真正想要的是让Mon在第一个数据系列中成为红色条的标签，而Tue在第二个数据系列中成为蓝色条的标签。换句话说，我希望显示每个系列中每个项目的x标签，就像它是单个系列时一样：

第二个图表是我希望显示的方式，除了我希望“ Tue”栏显示为蓝色，就像在其他系列中一样。

在我的实际情况中，我希望每个系列只有一个项目，因此，如果解决方案与该系列的名称有关，而不是与单个项目的名称/标签有关，那将适用于我。

任何指导将不胜感激。

Answer 1

至少有两种方法可以完成此操作。

使用两个小节系列和barGap：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon','Tue']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: ['-', 120],
        type: 'bar',
        barGap: '-100%'
    },
{
        data: [100, '-'],
        type: 'bar'
    }    
    ]
};

ref：https://echarts.apache.org/en/option.html#series-bar.barGap

使用带有自定义数据项的单个条形系列：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon','Tue']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [
            120,
            {
                value: 100,
                itemStyle: {
                    color: '#324b5b'
                }
            }
        ],
        type: 'bar'
    }    
    ]
};

ref：https://echarts.apache.org/en/option.html#series-bar.data

以上两种方法均应产生如下图所示的图表： two vertical bars with different colours

ECharts：显示具有多个系列的每个项目的标签

1 个答案: