echarts多个折线图共用X轴，实现tooltip合并和分离

最新推荐文章于 2024-08-15 17:52:41 发布
原创
最新推荐文章于 2024-08-15 17:52:41 发布 · 3.6k 阅读
6 ·
CC 4.0 BY-SA版权
文章标签：
#echarts #数据可视化
echarts共享X轴案例：
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>

        <style>
            .wrap {
                width: 100%;
                height: 400px;
                overflow: hidden;
            }
            /* #lineChart {
                width: 100%;
                height: 100%;
            } */
        </style>
    </head>
    <body>
        <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

        <div id="lineChart" style="width: 800px; height: 600px"></div>

        <script>
            myChart = null; // 定义变量用来存放echarts实例
            xData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']; // 两个echarts公用的x轴的数据
            y1Data = [8888, 9999, 7777, 10000, 3334, 7878, 6543]; // 小件货物
            y2Data = [56, 64, 32, 58, 64, 76, 81]; // 网点负荷
            y3Data = [88, 99, 77, 100, 21, 66, 95]; // 大件货物

            // 画图方法
            let drawEcharts = function () {
                myChart = echarts.init(document.getElementById('lineChart'));
                let options = {
                    color: ['#bfa', '#baf', 'pink', '#baf'], // 配置数据颜色
                    grid: [
                        // 配置第一个折线图的位置
                        {
                            left: '14.5%',
                            right: '12%',
                            top: '10%',
                            height: '32%',
                        },
                        // 配置第二个折线图位置
                        {
                            left: '14.5%',
                            right: '12%',
                            top: '50%',
                            height: '32%',
                        },
                    ],
                    tooltip: {
                        trigger: 'axis', //axis /item
                        // formatter函数动态修改tooltip样式
                        formatter: function (params) {
                            if (params) {
                                var htmlStr = '';
                                htmlStr += params[0].name.replace(/\-/g, '/') + '<br/>'; //x轴的名称
                                for (var i = 0; i < params.length; i++) {
                                    var param = params[i]; // 存一份item项
                                    var seriesName = param.seriesName; //图例名称
                                    var value = param.value; //y轴值
                                    var color = param.color; //图例颜色
                                    htmlStr += '<div>';
                                    htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>';
                                    //圆点后面显示的文本
                                    htmlStr += seriesName + '：' + value;
                                    switch (seriesName) {
                                        case '小件货物':
                                            htmlStr += ' ' + '件';
                                            break;
                                        case '网点负荷':
                                            htmlStr += ' ' + '%';
                                            break;
                                        case '大件货物':
                                            htmlStr += ' ' + '件';
                                            break;
                                        default:
                                            htmlStr += ' ';
                                    }
                                    htmlStr += '</div>';
                                }
                                return htmlStr;
                            } else {
                                return;
                            }
                        },
                        backgroundColor: '#ccc',
                        borderWidth: 1,
                        borderColor: '#ccc',
                        padding: 10,
                        textStyle: {
                            color: '#000',
                            fontSize: 12,
                            align: 'left',
                        },
                        hideDelay: 10000, //延时消失时间
                    },
                    legend: {
                        show: true,
                        x: 'center',
                        y: '0',
                        data: ['小件货物', '网点负荷', '大件货物', '网点负荷'],
                        textStyle: {