echarts实现竖向胶囊柱状图

ECharts是一个强大的JavaScript图表库，可以创建各种复杂的可视化图表，包括竖向胶囊柱状图（也称为胶囊堆叠柱状图）。这种类型的柱状图通常用于显示不同类别之间的比较，其中每个胶囊代表一个数据系列，高度表示值的大小。

以下是使用ECharts实现竖向胶囊柱状图的基本步骤：

1. 首先，在HTML中引入ECharts库和相关的CSS样式文件：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/echarts@5.2.2/theme/white.css">

2. 创建一个div容器，并给它一个id，以便在JavaScript中引用：

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

3. 使用JavaScript初始化ECharts实例，并配置数据和选项：

var myChart = echarts.init(document.getElementById('chartContainer'));

// 数据配置，假设我们有两组数据
var data = [
  {name: 'A', value: [1, 2, 3]},
  {name: 'B', value: [4, 5, 6]}
];

// 柱状图配置
var option = {
  type: 'candlestick',
  // 设置x轴和y轴的数据源
  xAxis: {
    data: data.map(item => item.name)
  },
  yAxis: {},
  series: [
    {
      name: '胶囊柱状图',
      type: 'candlestick',
      data: data,
      // 胶囊效果的设置
      itemStyle: {
        normal: {
          color: 'green',
          lineStyle: {
            color: 'black'
          }
        },
        emphasis: {
          color: 'red'
        }
      }
    }
  ]
};

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