echarts 柱状图数据集结合堆叠图

效果图：

1.使用echarts的数据集，可以动态展示多组数据统计a,b,c,d…；
2.其中每个数据又使用堆叠图展示详细数据，比如a可以分成成功和失败的次数进行堆叠，
3.所有数据使用不同颜色进行区分，而每个数据的失败次数都用红色区分；
4.横坐标为时间，只展示存在的数据集，不存在的会空白，比如2022-01-01不存在c数据;
5.鼠标悬浮自定义样式和文字，悬浮到a柱子可以仅显示a数据趋势，其他数据透明度降低，参考echarts数据集样式配置
6.横坐标可拖动缩放

静态数据格式：

 dataset: {
        source: [
            ['时间', 'a_成功次数', 'a_失败次数', 'b_成功次数', 'b_失败次数', 'c_成功次数', 'c_失败次数'],
            ['2022-01-01', '10','2', '8', 4, 0, 0],
            ['2022-01-02', '12', '3', 0, 0, 6, 2],
            ['2022-01-03', '12', 5, 0, 3, 6, 2]
        ]
    },

根据给出的数组 [‘时间’, ‘a_成功次数’, ‘a_失败次数’, ‘b_成功次数’, ‘b_失败次数’, ‘c_成功次数’, ‘c_失败次数’]，编写一个函数来动态生成对应的 series 数组。以下是一个示例代码，演示如何实现这个映射过程：

generateSeries(dataArray) {
    let series = [];
    
    for (let i = 1; i < dataArray.length; i += 2) {
        let toolName = dataArray[i].split('_')[0];
        let successKey = dataArray[i];
        let failKey = dataArray[i + 1];
        
        series.push({
            type: 'bar',
            name: toolName,
            stack: toolName,
            encode: {
                x: '时间',
                y: successKey
            }
        });
        
        series.push({
            type: 'bar',
            name: toolName,
            stack: toolName,
            encode: {
                x: '时间',
                y: failKey
            },
            itemStyle: {
                color: '#F56C6C'  // 失败次数的颜色
            }
        });
    }
    
    return series;
}

根据后端返回的动态数据添加配置：
数据放入series
自定义鼠标悬浮格式和数据展示