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;
}