工作中提升vue只echarts封装复用，

关于echarts我们主要就是配置项，往往我们在在写页面时有很多重复的页面，所以我们只需要提供数据，提供echarts渲染的挂载id,然而在写页面的过程中数据都好处理，就是挂载id不好处理，好在vue提供了ref属性可以代替id，不过使用ref和$refs时要注意，$refs要在页面加载完才能获取ref的值，我们可以看下vue官网的介绍：

访问子组件实例或子元素：尽管存在prop和事件，有的时候你仍可能需要在JavaScript里直接访问一个子组件。为了达到这个目的，你可以通过ref特性为这个子组件赋予一个ID引用ref=" test "。注意：ref只是一个ID引用，也就是该组件的唯一标识符或者另一个标签的唯一标识符，就像JavaScript的id标识符通过DOM操作document.getElement('id');一样，ref也有访问子组件或着标签的方式，this.$refs.test,注意$refs只会在组件渲染完成之后生效，并且他们并不是相应式。仅作为一个用于直接操作子组件的“逃生舱”——避免在模板或计算属性中访问$refs.

上述的重点在于，$refs只会在组件渲染完成之后生效，而且它们不是响应式的，———避免使用计算属性和在模板中访问$refs

所以我们应在生命周期钩子meounted(){}中使用$refs调用ref或者在this.$nextTick(()=>{})中调用

特别时做为组件时，两者都要保留，初始化页面使用生命周期钩子meounted(){}并且要判断传来的值是否为空再调用echarts挂载和echarts渲染，if(this.$ref.test){}来判断是否为空，跳过空状态，watch中的this.$nextTick(()=>{})方法也是同样的，它会在dom状态更新之后立即执行调用函数，获取最新的dom

由于$refs后面不能直接加变量名，因此可以使用··模板字符串可以动态绑定ref的值

例：:ref="test"     data(){  retrun { test:' me ' }  }

this.$refs[`${this.me}`];

父组件代码如下:

<template>
    <div>
        <div>
            <PerOne :tePer="go"></PerOne>
            <PerOne :tePer="better"></PerOne>
        </div>
    </div>
</template>

<script>
    import PerOne from './PersonalOne'
    export default {
        components:{
            PerOne
        },
        name: "Index",
        data(){
            return{
                go:'better',
                better:'go',
            }
        }
    }
</script>

<style scoped>

</style>

子组件代码如下：

<template>
        <div style="height: 600px;width: 600px;" :ref="tePer">你好</div>
</template>

<script>
    import echarts from "echarts";
    export default {
        props:{
            test:{
                type:String,
                default:'',
            },
            tePer:{
                type:String,
                default: '',
            }
        },
        name: "PersonalOne",
        data(){
            return{

            }
        },
        watch:{
            tePer(){
                this.$nextTick(()=>{
                    if(this.tePer){
                        this.perFun();
                    }
                })
            }
        },
        mounted(){
            if(this.$refs[`${this.tePer}`]){
                console.log("能用不",this.$refs[`${this.tePer}`]);
                this.perFun();
            }
        },
        methods:{
            perFun(){
                console.log("出来",this.$refs[`${this.tePer}`]);
                this.myChart = echarts.init(this.$refs[`${this.tePer}`]);
                this.myChart.setOption(
                {
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line',
                        areaStyle: {}
                    }]
                });
            }
        }
    }
</script>

<style scoped>

</style>