echarts 柱状图加折线图 柱状图的层级

ECharts是一个强大的JavaScript数据可视化库，它可以方便地创建各种图表，包括柱状图和折线图。如果你想在ECharts中同时展示柱状图和折线图，并设置柱状图的层级（通常指堆叠柱状图），你可以这样做：

1. **创建基础配置**：
首先，你需要引入ECharts库并在HTML中创建一个echarts实例。例如：

   <div id="chart"></div>

2. **初始化图表**：

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

3. **配置柱状图和折线图**：
使用`series`数组添加两个系列，一个用于柱状图，另一个用于折线图。对于柱状图，可以设置`type: 'bar'`，并指定`stack`属性来定义层级（堆叠）：

   var option = {
       series: [
           {
               type: 'bar', // 柱状图
               name: '柱状图',
               stack: '总量', // 定义柱状图的堆叠层名称
               data: [...]
           },
           {
               type: 'line', // 折线图
               name: '折线图',
               data: [...]
           }
       ]
   };

4. **绘制图表**：
将配置选项应用到图表上：

   myChart.setOption(option);

5. **调整层级**：
ECharts默认会自动处理堆叠，如果需要手动调整柱子之间的间隙，可以使用`barGap`属性。如果需要控制每级的显示，可以使用`dataZoom`配合。