echarts图自适应

最新推荐文章于 2024-06-01 10:47:21 发布

caoning315629

最新推荐文章于 2024-06-01 10:47:21 发布

阅读量923

点赞数

本文链接：https://blog.youkuaiyun.com/caoning315629/article/details/81865163

版权

这段代码展示了如何使用ECharts初始化两个饼图，并实现窗口大小变化时图表自适应调整。通过绑定窗口的resize事件，并设置延迟重置图表大小，确保了在窗口尺寸变化时，ECharts图表能够正确地更新布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var myChart2 = echarts.init(document.getElementById('img_2'));
option2 = {
    title: {
        text: '存量中各学历段情况',
        x:'center'
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        y: '30',
        data:name
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    series: [
        {
            name: '学历占比',
            type: 'pie',
            radius: [0, '40%'],
            data:zt
        },
    ]

};
myChart2.setOption(option2);
var myChart3 = echarts.init(document.getElementById('img_3'));
option3 = {
    title: {
        text: '正常卡量中各学历段情况',
        x:'center'
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        y: '30',
        data:name
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    series: [
        {
            name: '学历占比',
            type: 'pie',
            radius: [0, '40%'],
            data:zc
        },
    ]

};
myChart3.setOption(option3);

var resizeTimer = null;
$(window).bind('resize', function () {
    if (resizeTimer) clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function () {
        var reset = myChart2.resize;
        reset();
        var reset1 = myChart3.resize;
        reset1();
    }, 100);
});