echarts柱状图横过来

要将 ECharts 柱状图横过来，可以使用 ECharts 中的直角坐标系中的 `xAxis` 和 `yAxis` 进行设置。

具体做法如下：
1. 将 `xAxis` 和 `yAxis` 的 `type` 属性分别设置为 `'value'` 和 `'category'`。
2. 将 `series` 中的 `xAxisIndex` 和 `yAxisIndex` 属性互换。

以下是示例代码：

option = {
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: ['A', 'B', 'C', 'D', 'E']
  },
  series: [{
    data: [120, 200, 150, 80, 70],
    type: 'bar',
    // 将 xAxisIndex 和 yAxisIndex 属性互换
    yAxisIndex: 0,
    xAxisIndex: 0
  }]
};

相关问题

echarts柱状图横过来后顺序排列反转了

当 ECharts 的柱状图横向显示时，默认是按照数据从上到下的顺序展示的，而不是从左到右。如果您需要从左到右展示柱状图，可以通过设置 `xAxis` 的 `inverse` 属性为 `true` 来实现。

但是，由于横向柱状图的特殊性，当 `inverse` 属性设置为 `true` 时，柱子的顺序排列会反转。这是因为 `inverse` 属性实际上是控制坐标轴的显示方向，而不是柱子的顺序。因此，需要通过设置 `series` 中的 `sort` 属性来控制柱子的显示顺序。

例如，如果您希望在横向柱状图中，数据从左到右依次展示，可以按照以下方式设置 `sort` 属性：

option = {
    xAxis: {
        type: 'value',
        inverse: true, // 设置 inverse 属性为 true
    },
    yAxis: {
        type: 'category',
        data: ['数据1', '数据2', '数据3', '数据4', '数据5'],
    },
    series: [
        {
            name: '柱状图名称',
            type: 'bar',
            data: [20, 50, 80, 30, 70],
            sort: 'ascending', // 设置 sort 属性为 'ascending'，表示按照数据升序排列
        },
    ],
};

在上述代码中，我们将 `xAxis` 的 `inverse` 属性设置为 `true`，表示横向显示柱状图。然后，将 `sort` 属性设置为 `ascending`，表示按照数据升序排列，从而实现了从左到右依次展示的效果。

如果您需要降序排列，将 `sort` 属性设置为 `descending` 即可。

echarts 柱状图横向显示

要实现echarts柱状图横向显示，可以通过设置横纵坐标轴的位置和交换数据的方式来实现。首先，隐藏横纵坐标轴和网格线可以使用echarts的配置项进行设置。可以将xAxis和yAxis的show属性设为false来隐藏横纵坐标轴，将splitLine属性设为false来隐藏网格线。

然后，需要将横纵坐标轴的位置进行调整。在横向显示的情况下，需要将横坐标轴显示在图表的左侧，纵坐标轴显示在图表的底部。可以通过设置xAxis的position属性为'top'，yAxis的position属性为'left'来实现。

最后，需要交换数据的显示方式，即将原本在纵向柱状图中的数据显示在横向柱状图中。可以通过将series中的type设置为'bar'，将xAxis和yAxis的data属性进行互换，来实现柱状图的横向显示。

综上所述，要实现echarts柱状图的横向显示，可以通过设置横纵坐标轴的位置和交换数据的方式来实现。具体的配置和代码可以参考echarts的文档和示例。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [echarts 折线图 + 柱状图](https://blog.csdn.net/aibujin/article/details/124803493)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]