插件echarts使数据可视化后，图随窗口自适应变化的方法

注：自己去echarts官网下载echarts.js，引入到html。

一、HTML

二、CSS代码

*{margin:0;padding: 0;}
#ecm3{height:500px;margin:100px auto;width: 80%;}

三、JS代码

const myChart = echarts.init(document.getElementById('ecm3'));
option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {         // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'     // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data: ['正常', '任务', '休息', '请假', '迟到', '旷工'],
        right: '40%'
    },
    calculable: true,
    xAxis: [{
        axisLabel: {
            rotate: 70,
            interval: 0
        },
        type: 'category',
        data: ["区域一","区域二","区域三","区域四","区域五","区域六","区域七"]
    }],
    grid: {         // 控制图的大小，调整下面这些值就可以，
        x: 40,
        x2: 80,
        y2: 125, // y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
    },
    yAxis: [{
        type: 'value'
    }],
    series: [{
        name: '正常',
        type: 'bar',
        barWidth: 10,
        stack: '总量',
        itemStyle: {
            normal: {
                label: {
                    show: false,
                    position: 'insideRight'
                },
                color: "#01c2b1"
            }
        },
        data: [10,9,8,5,6,4,2]
     }, {
        name: '任务',
        type: 'bar',
        barWidth: 10,
        stack: '总量',
        itemStyle: {
            normal: {
                label: {
                    show: false,
                    position: 'insideRight'
                },
                color: "#f6be1f"
            }
        },
        data: [2,5,4,5,8,6,4]
    },{
        name: '请假',
        type: 'bar',
        barWidth: 10,
        stack: '总量',
        itemStyle: {
            normal: {
                label: {
                    show: false,
                    position: 'insideRight'
                },
                color: "#ee6531"
            }
        },
        data: [2,5,4,5,8,4,5]
    }, {
        name: '迟到',
        type: 'bar',
        barWidth: 10,
        stack: '总量',
        itemStyle: {
            normal: {
                label: {
                    show: false,
                    position: 'insideRight'
                },
                color: "#b5b5b5"
            }
        },
        data: [2,0,1,0,1,2,0]
    }, {
        name: '旷工',
        type: 'bar',
        barWidth: 10,
        stack: '总量',
        itemStyle: {
            normal: {
                label: {
                    show: false,
                    position: 'insideRight'
                },
                color: "#c65885"
            }
        },
        data: [0,1,0,1,1,0,2]
    }]
};
myChart.setOption(option);

方法介绍：

首先，如果界面只有一个柱形图或其他图形，让图形自适应，可以在JS里面添加如下代码：

window.onresize = myChart.resize; 

或

window.onresize = function(){
    myChart.resize();
}

其次，如果界面有多个柱形图或其他图形，让图形自适应，只能在JS里面添加如下代码：

window.onresize = function(){
    myChart.resize();
    myChart2.resize();
    myChart3.resize();
            ...
    myChartN.resize();

}

图片如下：