echarts上下排列柱状图

您可以使用ECharts来创建一个上下排列的柱状图，以下是一个基本的示例代码：

// 引入 ECharts 主模块
var echarts = require('echarts');

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

// 定义数据
var data = [
  { name: '类别1', value1: 100, value2: 200 },
  { name: '类别2', value1: 150, value2: 250 },
  { name: '类别3', value1: 120, value2: 180 },
  // ...更多数据
];

// 设置图表配置项
var option = {
  tooltip: {},
  legend: {
    data: ['Value1', 'Value2'],
  },
  xAxis: {
    data: data.map(item => item.name),
  },
  yAxis: {},
  series: [
    {
      name: 'Value1',
      type: 'bar',
      stack: '总量',
      data: data.map(item => item.value1),
    },
    {
      name: 'Value2',
      type: 'bar',
      stack: '总量',
      data: data.map(item => -item.value2), // 将 Value2 的数据取负值以实现反向排列
    },
  ],
};

// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);

这段代码创建了一个基本的柱状图，通过设置`series`中的两个数据系列来实现上下排列的效果。其中，`name`属性用于图例展示，`type`属性设置为`bar`表示柱状图类型，`stack`属性设置为同一个值，将两个数据系列叠加在一起。通过设置`data`属性来指定数据来源。

您可以根据实际需求修改数据和配置项，进一步定制您的上下排列柱状图。同时，确保在HTML页面中添加一个id为"chart"的容器元素，用于渲染图表。

请注意，这只是一个简单示例，您可能需要根据实际情况进行更多的配置和样式调整。如需了解更多关于ECharts的详细信息，请查阅ECharts官方文档。