echarts对于移动端的处理
通过media实现的
$(function() {
// 多列柱形图
var mychar = echarts.init(document.getElementById('bar'));
var option = {
baseOption : {
title : {
text : '南丁格尔玫瑰图',
subtext : '纯属虚构',
x : 'center'
},
tooltip : {
trigger : 'item',
formatter : "{a}
{b} : {c} ({d}%)"
},
legend : {
data : ['rose1', 'rose2', 'rose3', 'rose4', 'rose5',
'rose6', 'rose7', 'rose8']
},
toolbox : {
show : true,
feature : {
mark : {
show : true
},
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : ['pie', 'funnel']
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
calculable : true,
series : [{
name : '半径模式',
type : 'pie',
roseType : 'radius',
label : {
normal : {
show : false
},
emphasis : {
show : true
}
},
lableLine : {
normal : {
show : false
},
emphasis : {
show : true
}
},
data : [{
value : 10,
name : 'rose1'
}, {
value : 5,
name : 'rose2'
}, {
value : 15,
name : 'rose3'
}, {
value : 25,
name : 'rose4'
}, {
value : 20,
name : 'rose5'
}, {
value : 35,
name : 'rose6'
}, {
value : 30,
name : 'rose7'
}, {
value : 40,
name : 'rose8'
}]
}, {
name : '面积模式',
type : 'pie',
roseType : 'area',
data : [{
value : 10,
name : 'rose1'
}, {
value : 5,
name : 'rose2'
}, {
value : 15,
name : 'rose3'
}, {
value : 25,
name : 'rose4'
}, {
value : 20,
name : 'rose5'
}, {
value : 35,
name : 'rose6'
}, {
value : 30,
name : 'rose7'
}, {
value : 40,
name : 'rose8'
}]
}]
},
media : [{
option : {
legend : {
right : 'center',
bottom : 0,
orient : 'horizontal'
},
series : [{
radius : [20, '50%'],
center : ['25%', '50%']
}, {
radius : [30, '50%'],
center : ['75%', '50%']
}]
}
}, {
query : {
minAspectRatio : 1
},
option : {
legend : {
right : 'center',
bottom : 0,
orient : 'horizontal'
},
series : [{
radius : [20, '50%'],
center : ['25%', '50%']
}, {
radius : [30, '50%'],
center : ['75%', '50%']
}]
}
}, {
query : {
maxAspectRatio : 1
},
option : {
legend : {
right : 'center',
bottom : 0,
orient : 'horizontal'
},
series : [{
radius : [20, '50%'],
center : ['50%', '30%']
}, {
radius : [30, '50%'],
center : ['50%', '70%']
}]
}
}, {
query : {
maxWidth : 500
},
option : {
legend : {
right : 10,
top : '15%',
orient : 'vertical'
},
series : [{
radius : [20, '50%'],
center : ['50%', '30%']
}, {
radius : [30, '50%'],
center : ['50%', '75%']
}]
}
}]
};
mychar.setOption(option);
});