echart图实现双x轴的两种情况

echart 图设置双类目轴的情况

相关代码

 // 因为 第一个 x 轴 与第二个 x 轴的数据是成对应关系的，也就是 : 第一个 x 轴 与第二个 x 轴之间的数量是成倍数关系的。
    // 所以 第二个 x 轴的就能实现对齐
    option = {
        title: {
            text: '双x轴'
        },
        legend: {
            data: ['销量']
        },
        // x轴的数据
        xAxis: [{
            data: [
                '王',
                '胡歌',
                '曾小贤',
                '吕小布',
                '关谷',
                '阿不多',
                'ceshi2',
                'ceshi3',
                'ceshi4',
                'ceshi5',
                'ceshi6',
                'ceshi7'
            ],
            axisLabel: {
                interval: 0
            },
            axisTick: {
                show: true, // 显示坐标轴刻度线
                length: 20 // 刻度线的长度
            }
        }, {
            data: ['王', '胡歌', '吕小布', '关谷'],
            axisLabel: {
                interval: 0
            },
            position: 'bottom', // 很重要，如果没有这个设置，默认第二个x轴就会在图表的顶部
            offset: 20, // X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用。
            axisTick: {
                show: true,
                length: 30,
                lineStyle: {
                    type: 'dotted'
                }
            }
        }, {
            data: [],
            axisLabel: {
                interval: 0
            },
            position: 'bottom', // 很重要，如果没有这个设置，默认第二个x轴就会在图表的顶部
            offset: 50, // X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用。
            axisTick: {
                show: true,
                length: 30,
                lineStyle: {
                    type: 'dotted'
                }
            }
        }],
        yAxis: {},
        // 可用于指定统计图类型
        series: [{
            name: '销量',
            type: 'line',
            smooth: true,
            data: [5, 20, 36, 10, 30, 190, 12, 23, 34, 45, 56, 67]
        }]
    };

    option && myChart.setOption(option);

案例2 : 不等分的双类目轴

option = {
        title: {
            text: '双x轴'
        },
        legend: {
            data: ['销量']
        },
        // x轴的数据
        xAxis: [{
            type: 'category',
            data: ['All', 'Tue', 'All', 'Thu', 'Fri', 'All', 'Sun', 'ceshi1', 'ceshi2', 'All', 'ceshi3', 'ceshi4'],
            position: 'bottom',
            offset: 20,
            axisTick: {
                length: 55, // 延长刻度线做分组线 
                inside: false, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
                lineStyle: {
                    color: '#ff9800'
                }, // 非必须，仅为了演示，明显标示出分组刻度线
                interval: function(index, value) {
                    console.log('测试---- index', index);
                    console.log('测试---- value', value);
                    if (value === 'All') {
                        return value // 根据 第一个 x 轴里面重复出现的值进行判段
                    }
                }
            }
        }, {
            position: 'bottom', // 将分组x轴位置定至底部，不然默认在顶部
            offset: 70, // 向下偏移，使分组文字显示位置不与原x轴重叠
            axisLine: {
                show: false // 隐藏分组x轴的轴线
            },
            axisTick: {
                show: false,
                length: 55, // 延长刻度线做分组线 
                inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
                lineStyle: {
                    color: '#ff9800'
                }, // 非必须，仅为了演示，明显标示出分组刻度线

            },
            axisLabel: {
                inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
                interval: 0, // 强制显示全部刻度名
                formatter: function(val, index) {
                    console.log('测试999 val--- ', val);
                    console.log('测试999 index--- ', index);
                    return '    ' + val // 这儿可以根据 返回 空字符串，来调整 第二个 x 轴值出现的位置。
                }

            },
            data: ['20日', '21日', '22日', '23日'] // 与原x轴保持一致，方便使用对应名称做判断
        }],
        yAxis: {},
        // 可用于指定统计图类型
        series: [{
            name: '销量',
            type: 'bar',
            smooth: true,
            data: [5, 20, 36, 10, 30, 190, 12, 23, 34, 45, 56, 67]
        }]
    };

第一次写帖子，记录一下，如果有不正确的地方欢迎指正