vue2使用ECharts自适应大小

1.安装监听容器大小变化的插件

npm install element-resize-detector --save

2.ECharts已经有重新绘制图表的函数 resize();

<template>
    <div id="home">
        <div id="myChart1" style="width: 50%;height: 50%;">
            <div id="myChart2" style="width: 100%;height:100%;"></div>
        </div>
    </div>
</template>
<script>
    let elementResizeDetectorMaker = require("element-resize-detector");
    export default {
        name: 'home',
        data() {
            return {}
        },
        mounted: function() { //进入页面后直接加载
            var myChart2 = this.$echarts.init(document.getElementById('myChart2'))
            //监听元素变化
            let erd = elementResizeDetectorMaker();
            let that = this;
            erd.listenTo(document.getElementById("myChart1"), function(element) {
                that.$nextTick(function() {
                    //使echarts尺寸重置
                    myChart2.resize();
                })
            })
            this.onHuiZhiTuBiao() //生成图表
        },
        methods: { //方法
            onHuiZhiTuBiao() {
                // 基于准备好的dom，初始化echarts实例
                var myChart2 = this.$echarts.init(document.getElementById('myChart2'));
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: 'ECharts 入门示例'
                    },
                    tooltip: {},
                    legend: {
                        data: ['销量']
                    },
                    xAxis: {
                        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20]
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart2.setOption(option);
            }
        },
        destroyed: function() { //离开页面时执行
        },
        activated: function() { //进入缓存页面时执行
        },
        deactivated() { //离开缓存页面
        },
        components: { //组件调用
        },
    }
</script>
<style scoped>
    #home {
        width: 100%;
        height: 100%;
    }
</style>

翻译

搜索

复制