echarts自适应模板

最新推荐文章于 2024-11-12 11:19:19 发布

可乐西瓜冰

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量377

点赞数 5

文章标签： echarts javascript 前端 vue

本文链接：https://blog.csdn.net/qq_49012497/article/details/141425956

版权

echarts自定义组件，适配没问题，在调用这个组件的外部设置它的宽高就行，他会自适应

<template>
    <div :id="echartsId" class="Echarts"></div>
</template>
<script>
export default {
    name: 'Echarts',
    props: {
        datas: {
            type: Object,
        },
        echartsId: {
            type: String,
            default: 'echarts3'
        },
    },
    data() {
        return {
            echarts: null,
            resize: null,
        };
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart()
        });
    },
    watch: {
        datas: {
            deep: true,
            handler(newVal, oldVal) {
                if (newVal) {
                    this.initChart()
                }
            },
        }
    },
    beforeDestroy() {
        if (this.echarts) {
            this.echarts.dispose();
            window.removeEventListener("resize", this.resize);
        }
    },
    methods: {
        initChart() {
            let tempIns = this.$echarts.getInstanceByDom(
                document.getElementById(this.echartsId)
            );
            if (!tempIns) {
                this.echarts = this.$echarts.init(document.getElementById(this.echartsId));
            }
            // 指定图表的配置项和数据
            const option = {

            };
            this.echarts.setOption(option);
            this.resize = this.addResize(
                this.echarts
            );
        },
        addResize(chart) {
            let temp = function () {
                chart.resize();
            };
            window.addEventListener("resize", temp);
            return temp;
        },
    },
};
</script>
<style scoped>
.Echarts {
    width: 100%;
    height: 100%;
}
</style>