SmartCommunity/videoSurveillance/src/components/common/echart.vue

<template>
    <div :id="'echarts-' + _uid"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    name: 'zz-echart',
    props: ['option'],
    data() {
        return {
            echart: ''
        };
    },
    mounted() {
        this.initEchart();
    },

    computed: {
        resize() {
            // 通过scale值来判断窗口是变化
            return this.$store.getters['getScale'];
        },
        collapse() {
            return this.$store.getters['getCollapse'];
        }
    },
    methods: {
        initEchart() {
            this.echart = echarts.init(document.getElementById('echarts-' + this._uid));
            if (this.option) {
                this.echart.setOption(this.option);
                this.echart.on('rendered', () => {
                    this.$emit('finish', this.echart);
                });
                this.echart.on('mouseover', (p) => {
                    this.$emit('mouseover', this.echart, p);
                });
            }
        }
    },
    watch: {
        resize() {
            this.echart.resize();
        },
        collapse() {
            this.echart.resize();
        },
        option: {
            deep: true,
            handler(n) {
                this.echart.dispose();
                // this.echart.setOption(n);
                this.initEchart();
            }
        }
    },
    destroyed() {
        this.echart.dispose();
    }
};
</script>
<style lang="scss" scoped>
[id^='echarts-'] {
    width: 100%;
    height: calc(100% - 2px);
}
</style>