echarts双正x轴显示温度湿度

新手程序员一枚

最近接到一个需求，要求实现echarts在同一个x轴上，左边显示温度，右边显示湿度，原型图如下

 

脑壳疼！！！！！，经过不断的查看echarts官方文档，终于也是解决了这个问题

实现效果图如下

 

代码如下

var environBaroption= {
    tooltip: {
        trigger: 'axis',
        axisPointer: {           
            type: 'shadow' ,
            
        },
         formatter (params) {
            if(params[0].data.pre=='+'){
            var temperature=Math.abs(params[0].data.value);
            }else{
            var temperature=params[0].data.value;    
            }
          return '<p style="color:#2a76f3">'+params[0].name+' 温度:'+temperature+'℃</p>'+
          '<p style="color:#ff9b42">'+params[0].name+' 湿度:'+params[1].value+'%'+'</p>';
        }
        
    },
    legend: {
       
    },
    grid: {
       top:"5%",
       
       left:"0%",
       
       right:"5%",
       
       bottom:"3%",
       
       backgroundColor: '#fff',
       
       width:"auto", 
       
       height:"auto", 
       containLabel:true
    },
    xAxis: [
        {  
            
            
            splitLine:{
               show:false    
            },
            type: 'value',
            axisLabel: {

//关键性的一步，这里将x轴的值全部取绝对值，所以才能在同一条x轴上显示两个不同的数据
              formatter (value) {
                  if(value>0){
                    return value+"%";
                  }
                return Math.abs(value)+"℃"; 
              }
            }
            
        }
        
              
        
    ],
    yAxis: [
        {
            
            type: 'category',
            axisTick: {
                show: false
            },
            data: []
        }
    ],
    series: [
        {
            
            type: 'bar',
            stack: 'one',
            label: {
                show: true,
                position: 'insideRight',
                formatter: function (params) {
                                   if(params.data.pre=='+'){
                                  return Math.abs(params.data.value)+" ℃";
                                  }
                                   return params.data.value+" ℃";
                               }
                
            },
            itemStyle: {
                            normal: {
                                
                                
                                    color: '#2a76f3' //改变折线颜色
                                
                            }
                        },
            emphasis: {
                focus: 'series'
            },
            data: [
            ]
        },
        {
            
            type: 'bar',
            stack: 'one',
            label: {
                show: true,
                position: 'insideLeft',
                formatter: '{c} %'
            },
            itemStyle: {
                        normal: {
                                
                                
                                    color: '#ff9b42' //改变折线颜色
                                
                            }
                        },
            emphasis: {
                focus: 'series'
            },
            data: []
        }
    ]
};

 

注意一下，温度的series data的格式是{‘pre’：***，‘value’：***}；赋值的时候将温度的值全部取负值，pre纪录温度的正负符号，这样才能保证温度一直在左边显示；然后显示的时候再根据符号进行formater一下，就可以将负温度和正温度全部显示出来啦；亲测有效！！！！！