echarts 柱状图改为横向

要将 Echarts 柱状图改为横向，需要进行一些配置的调整。首先，你可以使用 `option` 对象中的 `grid` 属性来调整图表的布局。设置 `grid` 的 `left` 和 `top` 值可以调整图表的位置。

然后，在 `xAxis` 和 `yAxis` 中，将原来的横轴（`xAxis`）改为纵轴（`yAxis`），将原来的纵轴（`yAxis`）改为横轴（`xAxis`）。

具体的代码示例如下：

option = {
  grid: {
    left: '3%',
    top: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value' // 改为纵轴
  },
  yAxis: {
    type: 'category', // 改为横轴
    data: ['数据1', '数据2', '数据3']
  },
  series: [
    {
      name: '柱状图',
      type: 'bar',
      data: [10, 20, 30]
    }
  ]
};

通过以上的配置，你就可以将柱状图改为横向显示了。

相关问题

echarts柱状图横向排序

在Echarts中，要实现柱状图的横向排序，你可以通过设置xAxis.type为'value'，然后利用series.data中的值来进行排序。具体的步骤如下：

1. 首先，引入Echarts的库文件和所需的主题文件。

2. 创建一个DOM容器，用于显示柱状图。

3. 初始化Echarts实例，并将DOM容器传入。

4. 定义xAxis和yAxis的相关配置，其中xAxis.type设置为'value'。

5. 定义series中的data数据，根据需要进行排序。

6. 设置option中的xAxis和series，将配置信息应用到柱状图中。

最后，使用setOption方法将配置项设置到Echarts实例中，并渲染出柱状图。

下面是一个示例代码，你可以根据自己的需求进行修改：

// 引入Echarts库文件
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>

// 创建一个DOM容器
<div id="chart" style="width: 600px; height: 400px;"></div>

// 初始化Echarts实例
var myChart = echarts.init(document.getElementById('chart'));

// 定义xAxis和yAxis的相关配置
var option = {
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: ['A', 'B', 'C', 'D', 'E'] // 示例数据，根据需要修改
  },
  series: [{
    type: 'bar',
    data: [5, 20, 36, 10, 15 // 示例数据，根据需要修改
  }]
};

// 设置option并渲染出柱状图
myChart.setOption(option);

通过上述步骤，你可以实现横向排序的Echarts柱状图。请根据自己的实际需求进行配置和修改。<span class="em">1</span>

echarts柱状图横向怎么设置

要设置echarts柱状图横向，需要在option中设置xAxis和yAxis的type属性。其中xAxis的type属性设置为'category'，yAxis的type属性设置为'value'。同时，需要将series中的type属性设置为'bar'，并将data属性中的数据按照横向排列。下面是一个示例代码：

import * as echarts from 'echarts';
const chartDom = document.getElementById('main');
const myChart = echarts.init(chartDom);
const option = {
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
};
option && myChart.setOption(option);

注意，以上代码中的数据是竖向排列的，如果要将其改为横向排列，只需要将xAxis和yAxis的type属性互换即可。