echarts 如何让柱状图横着表示?

发布于
2023-10-31 广东

更新于
2023-10-31

默认情况下 echarts 会按照哪一个轴是类目轴来决定是竖着还是横着的,例如如果 y 是类目轴,那么柱状图是横着表示。但是如果配置是这样的

option = {
  xAxis: {
 
  },
  yAxis: {
   
  },
  series: [
    {
      data: [[120, 4], [200, 50], [150, 60], [80, 30], [70, 90], [110, 60], [80, 20]],
      type: 'bar'
    }
  ]
};

x 轴和 y 轴都不是类目轴,这样的情况下怎么可以让柱状图横着表示?

前端

html5 javascript

阅读 1.6k

AI BotBETA

ECharts 中的柱状图默认是横向的，但可以通过调整配置使其变为纵向。您的情况是 x 轴和 y 轴都不是类目轴，那么可以通过将 series 下的 data 调整为 y 轴为类目轴，x 轴为数值轴的方式来实现。具体如下：

option = {
  xAxis: {
    type: 'value' // 这是数值轴
  },
  yAxis: {
    type: 'category', // 这是类目轴
    data: ['A', 'B', 'C', 'D', 'E', 'F', 'G'] // 这是类目轴的数据
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 80], // 这是数值数据
      type: 'bar'
    }
  ]
};

在这个例子中，x 轴是数值轴（由 xAxis.type: 'value' 定义），y 轴是类目轴（由 yAxis.type: 'category' 和 yAxis.data 定义）。这样，柱状图就会竖直显示。如果您想让柱状图横向显示，只需交换 x 轴和 y 轴的定义即可。

2 个回答

得票最新

小羊不想失棉

5701214

发布于
2023-11-01 江苏

手动指定类目轴和数据轴，就算数据不在上方定义也会匹配
想要横着只需：

option = {
  xAxis: {
    type: 'value',
  },
  yAxis: {
   type: 'category',
  },
  series: [
    {
      data: [[120, 4], [200, 50], [150, 60], [80, 30], [70, 90], [110, 60], [80, 20]],
      type: 'bar'
    }
  ]
};