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

Question

默认情况下 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 轴都不是类目轴,这样的情况下怎么可以让柱状图横着表示?

Answer 1

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 轴的定义即可。