echarts图表tootip显示不同图表信息

先贴图

image.png

需求是显示三个独立的图表，在其中一个显示tooltip时其他图表的信息同时显示。

一、思路：在echarts里并没有提供不同绘制区域同时显示图表tooltip的方法，那就只能将这几个图表绘制在同一的区域里面

二、方法：配置3个网格布局

    // 配置3个网格布局
    const gridWidth = 27; // 每个图表占27%宽度
    const grids = [];
    for (let i = 0; i < 3; i++) {
        grids.push({
            left: i === 0 ? '5%' : i === 1 ? `38%` : '70%',
            width: `${gridWidth}%`,
            top: '1%',
            height: '92%',
            bottom: '0%'
        });
    }

填充图表数据及图表所使用的网格信息

const series = [];
    for (let index = 0; index < 3; index++) {
        series.push({
            name: '',
            type: 'line',
            xAxisIndex: index,
            yAxisIndex: index,
            data: [],
            symbol: 'none',
            lineStyle: {
                width: 2,
                color: '#91cc75',
            },
            animation: false, // 关闭动画以提高性能
            smooth: false, // 不使用平滑曲线
        });
    }

配置各个网格的XY轴信息

    // 配置X轴（数值轴）
    const xAxes = [];
    for (let i = 0; i < 3; i++) {
        xAxes.push({
            type: 'value',
            gridIndex: i,
            axisLine: {
                onZero: false  // 解决反转Y轴后X轴回跑到顶部的问题
            }
        });
    }

    // 配置Y轴（时间轴）
    const yAxes = [];
    for (let i = 0; i < 3; i++) {
        yAxes.push({
            type: 'value',
            gridIndex: i,
            inverse: true, // 从上往下显示
        });
    }

配置option

const option = {
        tooltip: {
            trigger: 'axis', //横向显示tooltip
            axisPointer: { //线的样式
                type: 'line',
                axis: 'y',
                lineStyle: {
                    type: 'solid',
                    color: 'red',
                },
            },
            formatter(params: any) {
                if (!params || params.length === 0) {
                    return '';
                }
                let result = ''
                for (let index = 0; index < params.length; index++) {
                    const item = params[index]
                    result += `<div style="font-weight:600;margin-bottom:6px;"> ${item.seriesName}：${item.value[1]}</div>`;
                }
                return result
            },
        },
        axisPointer: {
            link: [
                {
                    yAxisIndex: [0, 1, 2]  // 三条线同时显示
                }
            ],
        },
        grid: grids,
        xAxis: xAxes,
        yAxis: yAxes,
        series,
    };