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-2020

www.cnblogs.com/xgqfrms 發布文章使用：只允許注冊用戶才可以訪問！

原創文章，版權所有©️xgqfrms, 禁止轉載 🈲️，侵權必究⚠️！

---