eCharts自适应屏幕

eCharts如何自适应屏幕大小的解决办法

引入 jquery.ba-resize.min.js

div

     <div class=summary">
        <div id="source" style="width:100%;height:400px;"></div>
    </div>

JQ

    let Region = echarts.init(document.getElementById('region'))
    Region.setOption({
        title: {
            text: '地区分布',
            x: 'center',
            y: 'bottom',
            top: '70%'
        },
        tooltip: {
            show: true,
            formatter: function (params) {
                if (params.data) {
                    return `${params.name}(<span style="font-size:10px;">持有设备量:${params.data.devicesCount}</span>)</br>${params.marker}使用总数：${params.data.value}</br>${params.marker}活跃度：${params.data.devicesUseLv}`
                } else {
                    return;
                }
            }
        },
        
        visualMap: {
            type: "continuous",
            text: ["高", "低"],
            showLabel: true,
            seriesIndex: [0],
            show: false,
            min: 0,
            // calculable: true,
            max: this.mapDatas[0].value,
            inRange: {
                color: ['#f7fbff', '#4e7cef', '#0549f3']
            },
            textStyle: {
                color: "#000"
            },
            bottom: '-5',
            left: 0
        },
        geo: {
            roam: false,
            map: "china",
            layoutCenter: ["48%", "35%"],
            layoutSize: "75%",
            label: {
                emphasis: {
                    show: false
                }
            },
            scaleLimit: {
                min: 1.2,
                max: 10,
            },
            itemStyle: {
                emphasis: {
                    areaColor: "#fff464"
                }
            },

        },
        series: [{
            name: "mapSer",
            type: "map",
            roam: false,
            geoIndex: 0,
            label: {
                show: false
            },
            data: this.mapDatas
        },]
    });
    // echarts自适应
    $('.summary').resize(function () {
        Region.resize();
    });

此方法可适用于多个图