Element + Vue之封装的Echarts折线图组件

调用该组件需要传以下几个参数

• id： 该echarts盒子的id（可以随意设置，它是echarts渲染的关键要素，同时我用它来在一个页面多次调用该组件而做的区分）
• option： 该折线图的option配置代码，主要是大部分折线图每一个配置都不一样，不是单纯的改改数据而已，由于时间问题，我也没有再进行进一步的封装。

<template>
    <div :id="id" :option="option" class="mychart"></div>
</template>
<script>
export default {
    name: 'linechart',
    props: ['id','option'],
    data(){
        return {
            myChart: null
        }
    },
    mounted(){
    	// 页面加载完毕调用渲染图表的方法
        this.lineChart(this.id,this.option)
        // 处理echarts响应式问题
        window.addEventListener("resize",function(){
            if(this.myChart) {
                this.myChart.resize()
            }
        })
    },
    methods: {
    	// 渲染图表
        lineChart(id,option){
        	// 每次重绘前先清除echarts，不然没有绘制线的动画
       		if(this.myChart) this.myChart.clear();
            if(document.getElementById(id)) {
                this.myChart = this.$echarts.init(document.getElementById(id))
                this.myChart.setOption(option,true)
            }
        }
    },
    watch: {
    	// 监听父组件传过来option的变化（主要是数据切换）
        option:{
            handler(newValue) {
                if(document.getElementById(this.id)) {
                    this.myChart = this.$echarts.init(document.getElementById(this.id))
                    this.lineChart(this.id,newValue)
                }
            },
            deep: true
        }
    },
}
</script>

<style lang="less" scoped>
.mychart {
    max-width: 100%;

    /deep/div:nth-child(1) {
        width: 100% !important;  
        max-width: 100%;
    }

    /deep/canvas {
        // width: 100% !important;
        max-width: 100%;
    }
}
</style>

父组件调用

<linechart :id="'flowEchart'" :option="tabActive==0?flowEchart:inquireEchart" style="width: 100%;max-width: 100%;height: 220px;"></linechart>