echarts在Vue浮动百分比div中的自适应问题

Question

在一个浮动的宽度为50%的div中插入了一个echarts的china-map,请问怎么让它实现自适应。

<div id="myChart" style="float: left;width: 50%;"></div>

mounted() {

        this.drawLine();
    },
    methods: {
        drawLine() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById('myChart'))
            // 绘制图表
          var option = {
                title: {
                    text: '全国地区车辆数量分布图',
                    textStyle: {
                        fontSize: 30
                    },
                    x: 'center'
                },
                tooltip: {
                    show: true,
                    formatter: function(params) {
                        return params.name + '：' + params.data['value'] + '%'
                    },
                },
                visualMap: {
                    min: 0,
                    max: 5.5,
                    left: 'left',
                    top: 'bottom',
                    text: ['%', ''], // 文本，默认为数值文本
                    calculable: true,
                    inRange:{
                        color:['#ffffff','#d00000']
                    }
                },
                series: [{
                    name: '患病率',
                    type: 'map',
                    map: 'china',
                    roam: false,
                    label: {
                        show: false,
                    },
                    data:[
                        {name: '北京',value: 5.3 },
                        {name: '天津',value: 3.8 },
                        {name: '上海',value: 4.6 },
                        {name: '重庆',value: 3.6 },
                        {name: '河北',value: 3.4 },
                        {name: '河南',value: 3.2 },
                        {name: '云南',value: 1.6 },
                        {name: '辽宁',value: 4.3 },
                        {name: '黑龙江',value: 4.1 },
                        {name: '湖南',value: 2.4 },
                        {name: '安徽',value: 3.3 },
                        {name: '山东',value: 3.0 },
                        {name: '新疆',value: 1 },
                        {name: '江苏',value: 3.9 },
                        {name: '浙江',value: 3.5 },
                        {name: '江西',value: 2.0 },
                        {name: '湖北',value: 2.1 },
                        {name: '广西',value: 3.0 },
                        {name: '甘肃',value: 1.2 },
                        {name: '山西',value: 3.2 },
                        {name: '内蒙古',value: 3.5 },
                        {name: '陕西',value: 2.5 },
                        {name: '吉林',value: 4.5 },
                        {name: '福建',value: 2.8 },
                        {name: '贵州',value: 1.8 },
                        {name: '广东',value: 3.7 },
                        {name: '青海',value: 0.6 },
                        {name: '西藏',value: 0.4 },
                        {name: '四川',value: 3.3 },
                        {name: '宁夏',value: 0.8 },
                        {name: '海南',value: 1.9 },
                        {name: '台湾',value: 0 },
                        {name: '香港',value: 0 },
                        {name: '澳门',value: 0}
                    ]
                }, ]
            };
            myChart.setOption(option)
            window.onresize = myChart.resize;
        }
    }

Answer 1

window.onresize = function () {

myChart.resize();

}