如何用echarts绘制组合柱状图

在ECharts中，绘制组合柱状图通常涉及到多个系列的数据，每个系列可以有自己的类别。以下是创建一个基本的组合柱状图的步骤：

1. **引入依赖**:
首先，需要在HTML文件中引入ECharts库：

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

2. **初始化图表**:
创建一个ECharts实例，并设置图表宽度、高度以及配置项：

   var chart = echarts.init(document.getElementById('main'), 'bar');

3. **数据准备**:
设计好两个或更多的数据系列，每系列包含`name`（分类名）和`value`（数值）数组。例如：

   var data1 = {
       name: ['A', 'B', 'C'],
       value: [10, 20, 30]
   };
   var data2 = {
       name: ['A', 'B', 'C'],
       value: [5, 15, 25]
   };

4. **配置选项**:
设置柱状图的堆叠模式（堆积与否）和其他配置，如标题、x轴和y轴标签等：

   var option = {
       title: {
           text: '组合柱状图示例'
       },
       xAxis: {
           type: 'category',
           data: data1.name.concat(data2.name) // 合并两个系列的类别
       },
       yAxis: {},
       series: [
           {
               name: 'Series 1',
               type: 'bar',
               stack: '总量', // 堆栈名称，如果不需要堆叠，则省略此属性
               data: data1.value
           },
           {
               name: 'Series 2',
               type: 'bar',
               stack: '总量',
               data: data2.value
           }
       ]
   };

5. **渲染图表**:
将配置项应用到图表上：

   chart.setOption(option);

6. **动态更新** (如果有需求的话):
如果你需要在页面交互中动态添加或删除系列，需要使用`chart.addSeries`或`chart.removeSeries`方法。