tooltip联动echarts category配置项内容和展示

配置项如下
      var xAxisData = ['2019-12-03','2019-12-04','2019-12-05','2019-12-06',
'2019-12-07','2019-12-08','2019-12-09','2019-12-10','2019-12-11',
'2019-12-12','2019-12-13','2019-12-14','2019-12-15','2019-12-16']
var xAxisDayData = [];
Array.from(Array(48), (v, k) => k).forEach(el => {
    xAxisDayData.push(el)
})

option = {
    axisPointer: {
        link: [
            {
                xAxisIndex: [0,1],
            },   
            {
                xAxisIndex: [2,3],
            },
        ],
    },
     tooltip : {
        trigger: 'axis',
        axisPointer : {            
            type : 'shadow'
        },
        formatter: function(params, b, c){
            let dataArr = [];
            let newDataArr = [];
            let formatterStr = ''
            params.map(function (item, index) {
                dataArr[item.seriesIndex] = item;
            })

            dataArr.map(function (item, index) {
                newDataArr.push({seriesName: item.seriesName, name: item.name, value: item.value})
            })
            
            formatterStr += newDataArr[0].name + '<br />';
           
            newDataArr.map(function (item, index) {
                formatterStr += item.seriesName + ': ' + item.value + '<br />';
            })
            return formatterStr
        }
    },
    xAxis: [
        {
            type: 'category',
            data: xAxisData,
            gridIndex: 0
        },
        {
            type: 'category',
            data: xAxisData,
            gridIndex: 1
        },
        {
            type: 'category',
            data: xAxisDayData,
            gridIndex: 2
        },
        {
            type: 'category',
            data: xAxisDayData,
            gridIndex: 3
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '单位:pc',
            gridIndex: 0
        },
        {
            type: 'value',
            name: '单位:次',
            gridIndex: 1
        },
        {
            type: 'value',
            name: '单位:pc',
            gridIndex: 2
        },
        {
            type: 'value',
            name: '单位:次',
            gridIndex: 3
        }
    ],
    grid: [
        {
            top: '6%',
            right: '52%',
            bottom: '56%',
        },
        {
            top: '56%',
            right: '52%',
            bottom: '6%'
        },
         {
            top: '6%',
            left: '52%',
            bottom: '56%',
        },
        {
            top: '56%',
            left: '52%',
            bottom: '6%'
        }
    ],
    series: [
        {
            name: '幅值',
            data: [120, 200, 150, 80, 70, 110, 130],
            xAxisIndex: 0,//使用x轴的索引
            yAxisIndex: 0,//使用y轴的索引
            type: 'bar',
        },
        {
            name: '频次',
            data: [19, 20, 15, 8, 7, 11, 13],
            xAxisIndex: 1,//使用x轴的索引
            yAxisIndex: 1,//使用y轴的索引
            type: 'line'
        },
        {
            name: '幅值',
            data: [120, 200, 150, 80, 70, 110, 130],
            xAxisIndex: 2,//使用x轴的索引
            yAxisIndex: 2,//使用y轴的索引
            type: 'bar',
        },
        {
            name: '频次',
            data: [19, 20, 15, 8, 7, 11, 13],
            xAxisIndex: 3,//使用x轴的索引
            yAxisIndex: 3,//使用y轴的索引
            type: 'line'
        }
    ]
};

    
截图如下