echarts 实现多个图表共用一个 tooltip xAxis 指示线 All in One

echarts 实现多个图表共用一个 tooltip xAxis 指示线 All in One

echarts / ucharts

echarts

https://echarts.apache.org/examples/zh/editor.html?c=grid-multiple

    axisPointer: {
        link: {
            // 实现多个图的贯穿 X 轴提示线 ✅
            xAxisIndex: 'all',
        }
    },

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

var timeData = [];

timeData = timeData.map(function (str) {
    return str.replace('2009/', '');
});

option = {
    title: {
        text: '雨量流量关系图',
        subtext: '数据来自西安兰特水电测控技术有限公司',
        left: 'center'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            animation: false
        }
    },
    legend: {
        data: ['流量', '降雨量'],
        left: 10
    },
    toolbox: {
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
        }
    },
    axisPointer: {
        link: {
            // 实现多个图的贯穿 X 轴提示线 ✅
            xAxisIndex: 'all',
        }
    },
    dataZoom: [
        {
            show: true,
            realtime: true,
            start: 30,
            end: 70,
            xAxisIndex: [0, 1]
        },
        {
            type: 'inside',
            realtime: true,
            start: 30,
            end: 70,
            xAxisIndex: [0, 1]
        }
    ],
    grid: [{
        left: 50,
        right: 50,
        height: '35%'
    }, {
        left: 50,
        right: 50,
        top: '55%',
        height: '35%'
    }],
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            axisLine: {onZero: true},
            data: timeData
        },
        {
            gridIndex: 1,
            type: 'category',
            boundaryGap: false,
            axisLine: {onZero: true},
            data: timeData,
            // position: 'top',
        }
    ],
    yAxis: [
        {
            name: '流量(m^3/s)',
            type: 'value',
            max: 500
        },
        {
            gridIndex: 1,
            name: '降雨量(mm)',
            type: 'value',
            inverse: false,
        }
    ],
    series: [
        {
            name: '流量',
            type: 'line',
            symbolSize: 8,
            hoverAnimation: false,
            data: [],
        },
        {
            name: '降雨量',
            type: 'line',
            xAxisIndex: 1,
            yAxisIndex: 1,
            symbolSize: 8,
            hoverAnimation: false,
            data: [],
        }
    ]
};

option && myChart.setOption(option);

ucharts

标记线

https://demo.ucharts.cn/#/

enableMarkLine	

是否启用标记线功能
注意：不启用将无法显示标记线，也可做为隐藏图表区域内的标记线的开关。
启用后请在下面【标记线配置】菜单内修改配置

???

funji app

refs

---

---

©xgqfrms 2012-2025

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---