vue中echarts实现自适应大小-手赚鸭

vue中echarts实现自适应大小

echarts要实现自适应大小，需要在页面发生大小改变的时候，对图表实例进行重绘。

在echarts里边，提供了一个重绘的方法：resize()图表的实例对象调用该方法即可进行重绘。

然后还需要在vue的钩子函数mounted里边，定义一个window.resize()方法来监听页面发生变化。当页面发生变化时，就执行重绘的方法。

完整示例如下：

<template>
    <div class="echarts">
        <div id="echart"></div>
    </div>
</template>

<script>
import Echarts from 'echarts'
export default {
    data() {
        return{
            myChart: {}
        }
    },
    created() {
        this.$nextTick(()=> {
            this.loadEchart()
        })
    },
    mounted(){
        let _this = this;
        window.onresize = function() {
            _this.myChart.resize()
        }
    },
    methods: {
        loadEchart() {
            this.myChart = Echarts.init(document.getElementById("echart"));
            this.myChart.setOption({
                title: {
                    text: 'ECharts 示例'
                },
                tooltip: {},
                xAxis: {
                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            })
        }
    }
}
</script>

<style>
#echart {
    width: 50%;
    height: 300px;
}
</style>

效果图：