ECharts 避免变窄

var roomPercentChart = echarts.init(document.getElementById('room_percent'));
function ajaxGetRoomPercent() {
    // 基于准备好的dom,初始化echarts实例
    $.ajax({
        url: "ajaxGetRoomPercent",
        data: {},
        type: "POST",
        dataType: "json",
        success: function (res) {
            // 指定图表的配置项和数据
            var option = {
                tooltip: {
                    formatter: "{a} <br/>{b} : {c}%"
                },
                series: [
                    {
                        name: '房间使用量',
                        type: 'gauge',
                        detail: {formatter: '{value}%'},
                        data: [{value: res.data, name: '已使用'}]
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            roomPercentChart.setOption(option,true);
        }
    });

}

// 避免尺寸变窄
setInterval(function () {
    if ($("#room_percent").width() != $("#room_percent canvas").width() && $("#room_percent canvas").width() < $("#room_percent").width()) {
        // myChart.resize();
        roomPercentChart.resize();
    }
}, 100);

ajaxGetRoomPercent();

myChart.resize();

定时检查宽度,如果不一致,并且太小的话,就resize重置一下。

posted @ 2019-11-16 15:49  TBHacker  阅读(656)  评论(0编辑  收藏  举报