Echarts 在rem适配的页面进行适配字体大小 FontChart

echarts yekong 84℃

监听网页大小 动态调整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);
    }
喜欢 (0)