Echarts实现上下拼接两个折线图,每个折线图都是双y轴

实现以下效果:

上代码:

option: {
                grid: [
                    { top: '10%', bottom: '55%', left: '6%', right: '8%' },
                    { top: '45%', bottom: '10%', left: '6%', right: '8%' }
                ],
                legend: {
                    show: true
                },
                xAxis: [
                    {
                        type: 'category',
                        gridIndex: 0, // 指定使用第一个网格
                        data: [2,3,4,5,6,7,8,9,10,11,12,13,14,15,16],
                        axisLabel: {
                            show: false // 不显示 x 轴标签
                        },
                        axisLine: {
                            show: false,
                            onZero: true
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed'
                            }
                        },
                        axisTick: {
                            alignWithLabel: true
                        },
                        boundaryGap: false // 设置为 false,确保刻度标签和刻度线对齐
                    },
                    {
                        type: 'category',
                        gridIndex: 1, // 指定使用第二个网格
                        name: '压差/MPa',
                        nameLocation: 'middle',
                        axisLine: {
                            lineStyle: {
                                color: '#000000',
                            },
                            onZero: true
                        },
                        axisLabel: {
                            color: '#000000'
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed'
                            }
                        },
                        axisTick: {
                            // show: true,
                            alignWithLabel: true
                        },
                        boundaryGap: false, // 设置为 false,确保刻度标签和刻度线对齐
                        nameGap: 20,
                        data: [2,3,4,5,6,7,8,9,10,11,12,13,14,15,16],
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        gridIndex: 0,
                        name: '流量',
                        nameLocation: 'middle', // Y 轴名称显示位置
                        nameRotate: 90, // Y轴名称旋转角度  
                        nameGap: 30,
                        min: 4,
                        max: 7,
                        interval: 0.5,
                        position: 'left',
                        axisLine: {
                            show: true
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed'    //设置网格线类型 dotted:虚线   solid:实线
                            },
                            show: true
                        },
                        axisLabel: {
                            showMinLabel: false, // 不显示最小刻度标签
                            color: '#000000',
                        },
                        nameTextStyle: {
                            color: '#000000'
                        }
                    },
                    {
                        type: 'value',
                        gridIndex: 0,
                        name: '效率/%',
                        nameLocation: 'middle', // Y 轴名称显示位置
                        nameRotate: 90, // Y轴名称旋转角度   
                        nameGap: 35,
                        // offset: 7, // 手动调整位置,使得两个右侧 Y 轴对齐
                        min: 0.1,
                        max: 0.7,
                        interval: 0.1,
                        position: 'right',
                        axisLine: {
                            show: true
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            showMinLabel: false, // 不显示最小刻度标签
                            color: '#000000'
                        },
                        nameTextStyle: {
                            color: '#000000'
                        }
                    },
                    {
                        type: 'value',
                        gridIndex: 1,
                        name: '电流/A',
                        nameLocation: 'middle', // Y 轴名称显示位置
                        nameRotate: 90, // Y轴名称旋转角度   
                        nameGap: 30, 
                        min: 6.5,
                        max: 10,
                        interval: 0.5,
                        position: 'left',
                        axisLine: {
                            show: true
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed'    //设置网格线类型 dotted:虚线   solid:实线
                            },
                            show: true
                        },
                        axisLabel: {
                            showMinLabel: false, // 不显示最小刻度标签
                            showMaxLabel: false,
                            color: '#000000',
                        },
                        nameTextStyle: {
                            color: '#000000'
                        }
                    },
                    {
                        type: 'value',
                        gridIndex: 1,
                        name: '功率/KW',
                        nameLocation: 'middle', // Y 轴名称显示位置
                        nameRotate: 90, // Y轴名称旋转角度    
                        nameGap: 35,
                        // offset: 10, // 手动调整位置,使得两个右侧 Y 轴对齐
                        min: 1.4,
                        max: 2.4,
                        interval: 0.2,
                        position: 'right',
                        axisLine: {
                            show: true
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            showMaxLabel: false, // 不显示最小刻度标签
                            color: '#000000'
                        },
                        nameTextStyle: {
                            color: '#000000'
                        }
                    }
                ],
                series: [
                    {
                        name: '流量点',
                        type: 'line',
                        xAxisIndex: 0,
                        yAxisIndex: 0,
                        data: [[0, 7], [2, 6.4], [6, 5.7], [10, 5], [14, 4]],
                        smooth: true
                    },
                    {
                        name: '电流点',
                        type: 'line',
                        xAxisIndex: 1,
                        yAxisIndex: 2,
                        data: [[0, 6.5], [2, 6.9], [6, 7.7], [10, 9], [14, 10]],
                        smooth: true
                    },
                    {
                        name: '效率点',
                        type: 'line',
                        xAxisIndex: 0, // 使用第二个 x 轴
                        yAxisIndex: 1,
                        data: [[0, 0.1], [2, 0.3], [6, 0.5], [10, 0.7], [14, 0.65]],
                        smooth: true
                    },
                    {
                        name: '功率点',
                        type: 'line',
                        xAxisIndex: 1, // 使用第二个 x 轴
                        yAxisIndex: 3,
                        data: [[0, 1.4], [2, 1.6], [6, 1.9], [10, 2.2], [14, 2.3]],
                        smooth: true
                    }
                ]
            }

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值