顶部和底部的 Echarts 条形图轴标签答案

【问题标题】：Echarts Bar Chart Axis Label on Top and Bottom顶部和底部的 Echarts 条形图轴标签
【发布时间】：2020-10-09 17:52:53
【问题描述】：

我想在条形图中的顶部 x 轴和底部 x 轴上显示标签。我试图将条形表示为两个相反值之间的范围，例如：精力充沛与悠闲。

有人知道如何在echarts 中执行此操作吗？理想情况下，它会像下面这样，但我找不到任何东西：

option = {
  ...

  xAxis: [{
    type: "category",
    data-top: ["happy", "energetic", "early-bird"],
    data-bottom: ["melancholy", "laid-back", "night-owl"]
  }],

  ...
}

我希望有一种方法可以使用 formatter 选项，但我不知道如何。

非常感谢您的帮助！！

【问题讨论】：

标签： data-visualization formatter echarts

【解决方案1】：

您可以使用辅助 x 轴在图表的顶部和底部显示标签

请参考下面的图表选项，

option = {
    xAxis: [{
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    {
        type: 'category',
        data: ['Mon Top', 'Tue Top', 'Wed Top', 'Thu Top', 
        'Fri Top', 'Sat Top', 'Sun Top']
    }],
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
        }
    }]
};

图表应显示为，

【讨论】：