监听网页大小 动态调整Echarts内字体的大小。
function FontChart(fontSize) {
var whei = $(window).width()
return (whei / 22) * fontSize / 100
}
function getecharts5() {
var chartDom = document.getElementById('echarts5');
var myChart = echarts.init(chartDom);
var option = {
legend: {
height: '100%',
show: true,
orient: 'vertical',
right: '10%',
bottom: 'center',
align: 'left',
textStyle: {
color: '#fff',
fontSize: FontChart(14)
},
data: [{
name: '58检查',
value: 10
}, {
name: '产品点检',
value: 20
}, {
name: '安全检查',
value: 30
}, {
name: '行为观察',
value: 30
}, {
name: '巡检',
value: 30
}],
itemWidth: FontChart(15),
itemHeight: FontChart(10),
itemGap: FontChart(20)
},
series: [
{
type: 'pie',
center: ['30%', '50%'],
radius: ['35%', '55%'],
color: ['rgba(0, 172, 146, 1)',
'rgba(243, 113, 63, 1)',
'rgba(2, 118, 232, 1)',
'rgba(213, 161, 35, 1)',
'rgba(160, 206, 58, 1)'],
labelLine: {
normal: {
length: FontChart(20)
}
},
label: {
normal: {
formatter: '{b|{b}} \n {per|({d}%)} ',
borderColor: 'transparent',
borderRadius: 4,
rich: {
b: {
color: 'rgba(255, 255, 255, 1)',
fontSize: FontChart(16)
},
per: {
color: 'rgba(169, 177, 192, 1)',
fontSize: FontChart(16),
padding: [5, 0, 5, -5]
}
},
textStyle: {
color: '#fff',
fontSize: FontChart(14)
}
}
},
data: [{
name: '58检查',
value: 10
}, {
name: '产品点检',
value: 20
}, {
name: '安全检查',
value: 30
}, {
name: '行为观察',
value: 30
}, {
name: '巡检',
value: 30
}]
}
]
}
myChart.clear()
myChart.resize()
option && myChart.setOption(option);
}