最近在做一个app，需要用echarts进行绘图，但是echarts的参数值是px单位，那对于rem布局的前端工作者来说怎么才能让echats大小也能适应屏幕的，简单来说，就是通过封装一个简单计算函数，让它将数值计算一番即可，以iphone6为例，rem计算出来的数值是52.63，上码：
//一个全局函数，方便用在各个地方
window.remCompute=function(num){
var str = $('html').css('font-size');
var number = Number(str.substring(0,str.length-2));
return num*number/52.63
}
var myChart2=echarts.init(document.getElementById('two'));
window.remCompute=function(num){
var str = $('html').css('font-size');
var number = Number(str.substring(0,str.length-2));
return num*number/52.63
}
var option = {
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
show:false
},
yAxis: {
type: 'category',
inverse:true,
data: [{
value:"新福克斯",
textStyle:{
padding:[remCompute(50),0,0,-40],
align:'center'
}
},{
value:"翼虎",
textStyle:{
padding:[remCompute(50),0,0,-40],
align:'center'
}
},{
value:"蒙迪欧",
textStyle:{
padding:[remCompute(50),0,0,-40],
align:'center'
}
},{
value:"锐界",
textStyle:{
padding:[remCompute(50),0,0,-40],
align:'center'
}
}
],
},
series: [
{
type: 'bar',
data: [100, 300, 200, 400],
barWidth:20,
color:'#5B9BD5',
label:{
show:'true',
position:'right'
},
markPoint: {
data:[
{ x:30,
y:remCompute(90),
symbol: "image://./images/raw_1523166925.jpeg"
},
{ x:30,
y:remCompute(170),
symbol: "image://./images/raw_1523167265.jpeg"
},
{ x:30,
y:remCompute(245),
symbol: "image://./images/raw_1523167483.jpeg"
},
{ x:30,
y:remCompute(320),
symbol: "image://./images/raw_1523167630.jpeg"
}
],
symbolSize:[remCompute(50),remCompute(50)]
},
},
]
};
myChart2.setOption(option)
就像代码中写到的，把需要适应屏幕的地方，用函数计算一下即可，也可以用在其他不能适应屏幕的插件上。
