echarts x轴实现表格功能

实现效果

echarts 配置

重点配置项 xAixs grid

let option = {
                title: {
                    text: this.title,
                    left: 'center',
                    top: "5"
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: this.titleData,
                    bottom:46,
                    left: 30,
                    orient: 'vertical',
                    itemGap: 18
                },
                grid: this.getGrid(),
                toolbox: {
                    show: true,
                    right: "10",

                    feature: {
                        saveAsImage: {
                            title: "保存图片",
                            color: "#409EFF"
                        },
                    }
                },
                xAxis: [
                    {
                        type: "category",
                        name: this.xName,
                        max: this.xData.length - 1,
                        axisLabel: {
                            fontWeight: "bold",
                            show: true,
                            textStyle: {
                                fontSize: "14px",
                            },
                        },
                        axisPointer: {
                            type: "shadow",
                        },
                        data: this.xData,
                    },
                    {
                        position: "bottom", 
                        offset: 0,
                        axisTick: {
                            length: -(this.seriesData.length + 1) * 30,
                            inside: true,
                            lineStyle: { color: "#000" },
                        },
                        max: this.xData.length - 1,
                        axisLabel: {
                            inside: true,
                            interval: 0
                        },
                        data: [""],
                    },
                    {
                        position: "bottom", // 将分组x轴位置定至底部，不然默认在顶部
                        offset: 30, // 向下偏移，使分组文字显示位置不与原x轴重叠
                        axisTick: {
                            length: 120, // 延长刻度线做分组线
                            inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
                            lineStyle: { color: "#000" }, // 非必须，仅为了演示，明显标示出分组刻度线
                        },
                        axisLabel: {
                            inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
                            interval: 0, // 强制显示全部刻度名
                        }
                    },
                    ...this.getXTable(),

                ],
                yAxis: {
                    name: this.yName,
                    type: 'value',
                    splitLine: {   //y轴网格线
                        lineStyle: {
                            color: "#e6e6e6",
                            type: "dashed",
                        },

                    },
                    axisLine: { show: true, onZero: false }
                },
                series: this.seriesData,
            };
            
            

两个重要方法

getGrid方法设置折线图宽高，getxTable方法设置table表格线偏移距离

 getGrid() {
            const length = this.seriesData.length;
            return {x: 100,y2: 75 + 30 * length};
        },
        getXTable() {
            return this.seriesData.map((item, idx) => {
                return {
                    position: "bottom",
                    offset: 60 + idx * 30,
                    max: this.xData.length - 1,
                    axisTick: {
                        length: 0,
                        inside: true,
                        lineStyle: { color: "#000" },
                    },
                    axisLabel: {
                        inside: true,
                        interval: 0,
                    },
                    data: item.data,
                };
            });
        }