封装Echarts

最新推荐文章于 2024-07-25 09:24:40 发布

malanjun11

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量74

点赞数

分类专栏： Echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/malanjun11/article/details/127799445

版权

<template>
    <div class="myChart2" ref="chart"></div>
</template>
<script>
export default {
   
    name: "line",
    data() {
   
        return {
   
            myChart: null
        };
    },
    mounted() {
   
        /* 图表初始化 */
        this.$nextTick(() => {
   
            this.initChart()
        })
        // 监听容器改变
        window.addEventListener('resize', this.resizeChart)
    },
    destroyed() {
   
        //销毁
        window.removeEventListener('resize', this.resizeChart)
    },
    props: {
   
        dataList: Object,
        tit: String
    },
    watch: {
   
        /* 如果图表数据是后台获取的，监听父组件中的数据变化，重新触发Echarts */
        dataList: {
   
            deep: true,
            handler(val) {
   
                this.initChart()
            }
        }
    },
    methods: {
   
        // 初始化
        initChart() {
   
            if (this.myChart) {
   
                this.drawLine(this.dataList)
            } else {
   
                this.myChart = this.$echarts.init(this.$el);
                
                this.drawLine(this.dataList)
            }
        },
        // 画布自适应
        resizeChart(