Echarts实现多组柱状图重叠效果图例可用

描述

Echarts 实现柱子重叠效果, 并且保证图例正常使用.
由于同一Grid内, 有多组数据时, 取消图例会导致柱子居中, 所以, 采用一组柱子一组一Grid.

效果

源代码

option = {
   
    tooltip: {
   
        trigger: 'axis',
        formatter: (params, ticket, callback) => {
   
            let title = (params || [{
   '': '未知'}])[0].axisValueLabel
            let a = params.filter(_ => _.seriesName)
                    .map(_ => `${
     _.seriesName} :: ${
     _.value}`)
                    .join('</span><br/><span>');
            return `<h2>${
     title}</h2><br/><span>${
     a}</span>`;
        },
        axisPointer: {
   
            type: 'shadow', animation: true