新手程序员一枚
最近接到一个需求,要求实现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一下,就可以将负温度和正温度全部显示出来啦;亲测有效!!!!!