鍍金池/ 問答/HTML/ echarts在Vue浮動(dòng)百分比div中的自適應(yīng)問題

echarts在Vue浮動(dòng)百分比div中的自適應(yīng)問題

在一個(gè)浮動(dòng)的寬度為50%的div中插入了一個(gè)echarts的china-map,請(qǐng)問怎么讓它實(shí)現(xiàn)自適應(yīng)。

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

mounted() {

        this.drawLine();
    },
    methods: {
        drawLine() {
            // 基于準(zhǔn)備好的dom,初始化echarts實(shí)例
            let myChart = echarts.init(document.getElementById('myChart'))
            // 繪制圖表
          var option = {
                title: {
                    text: '全國(guó)地區(qū)車輛數(shù)量分布圖',
                    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: ['%', ''], // 文本,默認(rèn)為數(shù)值文本
                    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: '內(nèi)蒙古',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: '臺(tái)灣',value: 0 },
                        {name: '香港',value: 0 },
                        {name: '澳門',value: 0}
                    ]
                }, ]
            };
            myChart.setOption(option)
            window.onresize = myChart.resize;
        }
    }
回答
編輯回答
冷咖啡

window.onresize = function () {

myChart.resize();

}

2017年11月2日 10:57