<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.font18{
font-size:.28rem;
2rem;
border:1px solid red;
}
.font12{
font-size:.12rem;
1rem;
border:1px solid blue;
}
</style>
<body>
<p class="font18">18rem</p>
<p class="font12">12rem</p>
<div id="mycharts" style="5rem;height:5rem"></div>
<script src="jquery-1.11.0.min.js"></script>
<script src="echarts.min.js"></script>
<script>
$(function(){
setRem();
mycharts();
});
function setRem(){
def = 100/1920;// 表示1920的设计图,使用100PX的默认值
windowWidth = window.innerWidth;// 当前窗口的宽度
rem = windowWidth * def;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
$('html').css('font-size', rem + "px");
}
$(window).resize(function(){
setRem();
mycharts();
});
function mycharts(){
var watercharts = echarts.init(document.getElementById('mycharts'));
var font24=rem*0.24;
option = {
backgroundColor: "#ffffff",
color: ["#37A2DA", "#FF9F7F"],
tooltip: {},
xAxis: {
show: false
},
yAxis: {
show: false
},
legend: {
data: ['预算', '开销'],
textStyle:{
fontSize:font24
},
},
radar: {
// shape: 'circle',
indicator: [{
name: '食品',
max: 500
},
{
name: '玩具',
max: 500
},
{
name: '服饰',
max: 500
},
{
name: '绘本',
max: 500
},
{
name: '医疗',
max: 500
},
{
name: '门票',
max: 500
}
]
},
series: [{
name: '预算 vs 开销',
type: 'radar',
data: [{
value: [430, 340, 500, 300, 490, 400],
// name: '预算'
},
{
value: [300, 430, 150, 300, 420, 250],
// name: '开销'
}
]
}, {
type: 'line',
name: '预算',
data: [],
itemStyle: {
normal: {
color: '#37A2DA'
}
}
}, {
type: 'line',
data: [],
name: '开销',
itemStyle: {
normal: {
color: '#FF9F7F'
}
}
}]
};
watercharts.setOption(option, true);
window.addEventListener("resize", function() {
watercharts.resize();
var font24=rem*0.24;
})
};
</script>
</body>
</html>