echarts折线图有两个y轴时如何区分数据对应哪侧

echarts折线图有两个y轴时如何区分数据对应哪侧

解决方法
在series中添加yAxisIndex: 1,默认为yAxisIndex: 0,
效果图
在这里插入图片描述

 option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            textStyle: {
                color: "#fff",
                fontSize: '18'
            },
            right: '5%',
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {

        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: curringTime,
            axisLine: {
                lineStyle: {
                    color: '#fff',
                }
            },
            axisLabel: { 
                interval: xInterval,
                textStyle: {
                    color: '#fff'
                },

                // margin:文字到x轴的距离
                margin: 15
            },
            axisPointer: {
                label: {
                    // padding: [11, 5, 7],
                    padding: [0, 0, 10, 0],
                    margin: 15,
                    // 移入时的字体大小
                    fontSize: 12,
                    backgroundColor: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#fff' // 0% 处的颜色
                        }, {
                            // offset: 0.9,
                            offset: 0.86,
                            /*
    0.86 = (文字 + 文字距下边线的距离)/(文字 + 文字距下边线的距离 + 下边线的宽度)
                            
                            */
                            color: '#fff' // 0% 处的颜色
                        }, {
                            offset: 0.86,
                            color: '#33c0cd' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#33c0cd' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                }
            },
        },
        yAxis: [{
            type: 'value',
            name:"温度(℃)",
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#fff',
                    
                },
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    // 默认x轴字体大小
                    fontSize: 16,
                },
                 //y轴上带的单位
                 formatter: '{value}'
            },
            splitLine: {
                show: false
            }
        }, {
            type: 'value',
            name:'湿度(%)',
            position: 'right',
            axisTick: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    fontSize:16
                },
                formatter: '{value}'
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#fff'
                }
            },
            splitLine: {
                show: false
            }
        }],
        series: [
            {
                name: '温度',
                type: 'line',
                data: temperature,
                symbolSize: 10
            },
            {
                name: '湿度',
                type: 'line',
                data:  humidity,
                yAxisIndex: 1,//对应右侧的y轴
                symbolSize: 10
            },
            {
                name: '设定湿度',
                type: 'line',
                data:  setHumidity,
                yAxisIndex: 1,//对应右侧的y轴
                symbolSize: 10
            },
            {
                name: '设定温度',
                type: 'line',
                data:  setTemperature,
                symbolSize: 10
            },
            
        ]
    };
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值