echarts创建简单上下的图表排布样式

ECharts是一个强大的数据可视化库，可以创建各种类型的图表，包括简单的上下排列的柱状图。如果你想创建一个显示对比数据的上下结构，你可以使用堆积柱状图（Stacked Bar Chart）。下面是一个基本步骤：

1. **引入ECharts库**：首先，在HTML文件中添加ECharts的CDN链接或者本地引入。

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>

2. **初始化图表**：然后，你需要创建一个`<div>`标签，并为其分配一个唯一的ID，用于放置图表实例。

<div id="main" style="width: 600px;height:400px;"></div>

3. **JavaScript配置**：在JavaScript中，设置图表的数据和配置选项。

// 创建ECharts实例
var myChart = echarts.init(document.getElementById('main'));

// 数据准备
var data = {
  categories: ['A', 'B', 'C'],
  series: [
    {name: 'Series 1', type: 'bar', stack: '总量', data: [120, 180, 150]},
    {name: 'Series 2', type: 'bar', stack: '总量', data: [150, 100, 75]}
  ]
};

// 配置项
var option = {
  title: {
    text: '堆叠柱状图'
  },
  tooltip: {},
  xAxis: {
    data: data.categories
  },
  yAxis: {
    stack: true // 设置y轴堆叠
  },
  series: data.series
};

// 绘制图表
myChart.setOption(option);

在这个例子中，我们有两个系列，每个系列的数据会被自动堆叠到一起，形成上下对比的效果。