jili2-screen/src/common/components/echarts.vue

<template>
    <div>
        <div v-if="flag" :ref="id" class="charts-div" />
    </div>
</template>

<script>
import Vue from 'vue';
import Component from 'vue-class-component';
import * as echarts from 'echarts';

@Component({
    props: {
        id: {
            type: String,
            default: 'myChart',
        },
        data: {
            type: Object,
            default: null,
        },
        s: {
            type: String,
            default: '',
        },
    },
    computed: {
        result() {
            const ca = JSON.parse(JSON.stringify(this.data));
            return ca;
        },
    },
    watch: {
        result() { // 监听data数据是否有变化
            this.drawLine();
            console.log('111111111', this.data);
        },
    },
})
export default class Echarts extends Vue {
    flag = true;

    myChart = null;

    created() {
        // const that = this;
        // window.onresize = () => (() => {
        //     that.myChart.setOption(that.data, true);
        //     console.log('1111111111');
        // })();

        this.$nextTick(() => {
            if (!this.myChart) {
                if (this.s) {
                    this.myChart = echarts.init(this.$refs[this.id], this.s);
                } else {
                    this.myChart = echarts.init(this.$refs[this.id]);
                }

                this.$emit('onload', this.myChart);
            }
            this.drawLine();
        });
    }

    drawLine() {
        if (this.data && this.myChart) {
            // 绘制图表
            this.myChart.setOption(this.data);
        }
    }
}
</script>

<style scoped lang="scss">
.charts-div {
    width: 100%;
    height: 100%;
}
</style>