Echarts表格三连的效果

let option = {
            //图形网格边距
            grid: [
                {
                    top: "0%",
                    left: "40",
                    right: "40",
                    height: "30%",
                },
                {
                    top: "30%",
                    left: "40",
                    right: "40",
                    height: "30%",
                },
                {
                    top: "60%",
                    left: "40",
                    right: "40",
                    height: "30%",
                    // bottom: '1%',
                    // containLabel: true
                },
            ],
            //图形缩放
            dataZoom: [{
                type: "inside",
                xAxisIndex: [0, 1, 2],
            }],
            //提示框
            tooltip: {
                confine: true,     //提示框不会出屏幕边界
                trigger: 'axis',
                axisPointer: {
                    type: 'none',
                },
                backgroundColor: '#fff',  //背景色
                //   padding: [1, 3, 3, 1],   //边距
                borderColor: '#DDDDDF',  //边框颜色
                borderWidth: 1,    //边框线宽度
                textStyle: {     //文字样式
                    color: '#2F3243',
                    decoration: 'none',
                },
                extraCssText: 'text-align: left;',  //文字对齐方式 1 翻转90° 2 翻转180° 3 轻推 4 敲击两下 6 摇一摇 8 平面旋转 9 静止后触动
                formatter: function (data) {
                    if (data[0].value !== '') {
                        let startStr, a;
                        console.log(data[0].value, 'data[0].value')
                        let clickTimes = data[0].value ? data[0].value : 0
                        startStr = timeFlag[data[0].dataIndex];
                        let dateTime;
                        if (dayOrWeekFlag) {
                            dateTime = startStr.substr(0, 4) + '年' + startStr.substr(4, 2) + '月' + startStr.substr(6, 2) + '日' + startStr.substr(8, 2) + '时';
                        } else {
                            dateTime = startStr.substr(0, 4) + '年' + startStr.substr(4, 2) + '月' + startStr.substr(6, 2) + '日';
                        }
                        // dateStr = timeInterval[data[0].dataIndex].slice(0, 10);
                        if (data[0].seriesIndex == 0) {
                            a = '<span style="display:inline-block;">' + '时间：' + dateTime + '<br/>' + '触发：' + clickTimes + '次' + '<br/>' + '单击' + '</span>';
                        } else if (data[0].seriesIndex == 1) {
                            a = '<span style="display:inline-block;">' + '时间：' + dateTime + '<br/>' + '触发：' + clickTimes + '次' + '<br/>' + '双击' + '</span>';
                        } else if (data[0].seriesIndex == 2) {
                            a = '<span style="display:inline-block;">' + '时间：' + dateTime + '<br/>' + '触发：' + clickTimes + '次' + '<br/>' + '长按' + '</span>';
                        }
                        return a;
                    } else {
                    }
                },
                position: function (point, params, dom, rect, size) {
                    var x = 0; // x坐标位置
                    var y = 0; // y坐标位置
                    // 当前鼠标位置
                    var pointX = point[0];
                    var pointY = point[1];
                    // 提示框大小
                    var boxWidth = size.contentSize[0];
                    var boxHeight = size.contentSize[1];
                    if (boxWidth > pointX) {
                        x = 5;
                    } else {
                        x = pointX - boxWidth / 2;
                    }
                    if (boxHeight > pointY) {
                        y = -15;
                    } else {
                        y = pointY - boxHeight - 10;
                    }
                    return [x, y];
                }
            },

            xAxis: [
                {
                    type: 'category',
                    "gridIndex": 0,
                    data: allEveryHours,
                    show: true,
                    axisLine:{
                        show:true,
                        onZero:false,
                        lineStyle:{
                            color:'#CBD2DC',
                            width:1,
                            type: 'dotted',
                        }
                    },
                    axisTick:{
                        show:false,
                    },
                    axisLabel:{
                        show:false,
                        margin:12,
                    },
                },
                {
                    type: 'category',
                    "gridIndex": 1,
                    data: allEveryHours,
                    show: true,
                    axisLine:{
                        show:true,
                        onZero:false,
                        lineStyle:{
                            color:'#CBD2DC',
                            width:1,
                            type: 'dotted',
                        }
                    },
                    axisTick:{
                        show:false,
                    },
                    axisLabel:{
                        show:false,
                        margin:12,
                    },
                },
                {
                    type: 'category',
                    "gridIndex": 2,
                    data: allEveryHours, // ["04:00","08:00","12:00","16:00"],
                    name: '时区：GMT+08:00',
                    nameLocation: 'middle',
                    nameTextStyle: {
                        color: '#9BA3B0',
                        fontWeight: '400',
                        fontSize: "10",
                    },
                    nameGap: 50,
                    axisLine: {
                        show: true,
                        onZero: false,
                        lineStyle: {
                            color: '#CBD2DC',
                            width: 1,
                        }
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        show: true,
                        margin: 10,
                        lineHeight: 9,  //如果发现横坐标的文字被遮挡，可以调整这个lineHeight的值
                        formatter: function (v) {
                            if (v.indexOf(" ") > -1) {
                                return v.replace(" ", "\n");
                            } else {
                                return v;
                            }
                        },
                        textStyle: {
                            fontFamily: "PingFangSC-Regular,PingFang SC",
                            fontSize: "10",
                            fontWeight: 400,
                            color: "#9BA3B0",
                        },
                        showMinLabel:true,
                        showMaxLabel:true,
                    },

                }
            ],

            yAxis: [
                {
                    name: 'y轴名字',
                    nameLocation: 'center',
                    gridIndex: 0,
                    show: true,
                    nameGap: -5, // y轴名称偏移量
                    nameTextStyle: {
                        color: '#A96DE3',
                        align: 'left',
                        fontSize: "10",
                    },
                    offset: 40,  // y轴偏移量
                    nameRotate: 360,
                    axisLine: {  //y轴轴线
                        show: true,
                        lineStyle: {
                            color: '#A96DE3',
                            width: 5,
                        }
                    },
                    axisTick: { //坐标轴刻度
                        show: false,
                    },
                    axisLabel: {  //坐标轴刻度标签
                        show: false,
                    },
                    splitLine: {  //刻度线
                        show: false,
                    },
                },
                {
                    name: '双击',
                    nameLocation: 'center',
                    gridIndex: 1,
                    show: true,
                    nameGap: -5, // y轴名称偏移量
                    nameTextStyle: {
                        color: '#30CAE4',
                        align: 'left',
                        fontSize: "10",
                    },
                    offset: 40,  // y轴偏移量
                    nameRotate: 360,
                    axisLine: {  //y轴轴线
                        show: true,
                        lineStyle: {
                            color: '#30CAE4',
                            width: 5,
                        }
                    },
                    axisTick: { //坐标轴刻度
                        show: false,
                    },
                    axisLabel: {  //坐标轴刻度标签
                        show: false,
                    },
                    splitLine: {  //刻度线
                        show: false,
                    },
                },
                {
                    name: '长按',
                    nameLocation: 'center',
                    gridIndex: 2,
                    show: true,
                    nameGap: -5, // y轴名称偏移量
                    nameTextStyle: {
                        color: '#4F92FF',
                        align: 'left',
                        fontSize: "10",
                    },
                    offset: 40,  // y轴偏移量
                    nameRotate: 360,
                    axisLine: {  //y轴轴线
                        show: true,
                        lineStyle: {
                            color: '#4F92FF',
                            width: 5,
                        }
                    },
                    axisTick: { //坐标轴刻度
                        show: false,
                    },
                    axisLabel: {  //坐标轴刻度标签
                        show: false,
                    },
                    splitLine: {  //刻度线
                        show: false,
                    },

                }
            ],

            series: [
                {
                    type: "bar",
                    barWidth: 10,
                    xAxisIndex: 0, // 指定x轴
                    yAxisIndex: 0, // 指定y轴
                    data: allYdataDanji,    //[0,0,18,35],
                    itemStyle: {
                        color: "#A96DE3",//正常柱状图的颜色
                    },

                    emphasis: {
                        itemStyle: {
                            color: "#7A63EF",//选中柱状图之后的颜色
                        }
                    },
                },
                {
                    type: "bar",
                    barWidth: 10,
                    xAxisIndex: 1,
                    yAxisIndex: 1,
                    data: allYdataShuangji,    //[0,0,18,35],
                    itemStyle: {
                        color: "#30CAE4",//正常柱状图的颜色
                    },
                    emphasis: {
                        itemStyle: {
                            color: "#7A63EF",//选中柱状图之后的颜色
                        }
                    },
                },
                {
                    type: "bar",
                    barWidth: 10,
                    xAxisIndex: 2,
                    yAxisIndex: 2,
                    data: allYdataChangan,  
                    itemStyle: {
                        color: "#4F92FF",//正常柱状图的颜色
                    },
                    emphasis: {
                        itemStyle: {
                            color: "#7A63EF",//选中柱状图之后的颜色
                        }
                    },
                },
            ]
        }