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

【问题标题】：ECharts: Display Label For Each Item With Multiple SeriesECharts：为具有多个系列的每个项目显示标签
【发布时间】：2019-12-18 00:23:17
【问题描述】：

这是一个 Echarts 柱形图：

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

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

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

第二个图表是我希望它显示的方式，除了我希望周二栏显示为蓝色，就像它在另一个系列中一样。

在我的现实生活场景中，我希望每个系列只有一个项目，所以如果解决方案与系列的名称有关，而不是单个项目的名称/标签，那将适用于我。

任何指导将不胜感激。

【问题讨论】：

标签： javascript echarts

【解决方案1】：

至少有两种方法可以做到这一点。

使用两个bar系列和barGap：

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

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

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

上述任何一种方法都应生成如下所示的图表： two vertical bars with different colours

【讨论】：