vue2里echarts不能正常显示

Question

echart写在一个对话框里，然后下面这句就是报错，写了各种方式都取不到his.$refs.myEchart2
应该是页面渲染没好的感觉。

let myChart = echarts.init(this.$refs.myEchart2);

以下是完整代码

<template>
    <div class="hello">
        <button @click="selectTag(1,1)">1111</button>
        <el-dialog title="概况" class="myD" :visible.sync="dialogVisible2" width="60%">
            <span slot="title"><b class="myD-title"><i class="el-icon-data-analysis"></i> 概况</b>
            </span>
            <span slot>
                <p style="text-align: left;font-size: 30px;">{{map.description}}</p>
                <div>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-card header="车辆类型统计" style="font-weight: bold;">
                                <div ref="myEchart1" style="height: 350px;">
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="12">
                            <el-card header="车辆出租状态统计" style="font-weight: bold;">
                                //echart要再这里显示
                                <div ref="myEchart2" id="mychart3" style="height: 350px;">
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>

                </div>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button class="myDB" type="primary" @click="dialogVisible2 = false">关 闭</el-button>
            </span>
        </el-dialog>

    </div>

</template>

<script>
    var echarts = require('echarts');
    export default {
        name: 'ok',
        props: {
            msg2: Array
        },
        data() {
            return {
                //changValue: 0,
                tag_cat: [],
                dialogVisible2: false,
                nowWidth: 30,
                nowHeight: 30,
                nowIndex: 0,
                tagAll: [],
                map: {
                    id: 'ID',
                    description: '描述',
                },

            };
        },
        created() {


        },
        mounted() {
            /////////////////////////
            //   下面主要测试代码   //
            ////////////////////////
            //1.这样写拿不到this.$refs
            setTimeout(() => {
                console.log(this.$refs.myEchart2)
            }, 10000);
            //2.这样写拿不到this.$refs
            console.log(this.$refs.myEchart2);
            this.$nextTick(() => {
                //3.这样写拿不到this.$refs
                console.log(this.$refs.myEchart2);
                let myChart = echarts.init(this.$refs.myEchart2);
                let option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        bottom: 10,
                        left: 'center',
                        data: ['已出租', '未出租', '已预约']
                    },
                    series: [{
                        name: '车辆出租状态',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '40%'],
                        data: [{
                                value: 11,
                                name: '已出租'
                            },
                            {
                                value: 22,
                                name: '未出租'
                            },
                            {
                                value: 33,
                                name: '已预约'
                            }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                };
                myChart.setOption(option);
            });
        },
        watch: {},
        methods: {
            selectTag(did, type) {

                if (type == '1') {
                    this.dialogVisible2 = true;
                    this.$options.methods.selectMap(did, type, this);
                }
            },
            selectMap: function(e, type, that) {
                this.dialogVisible2 = true;
            },
        },
    }
</script>

<style scoped>

</style>

---

补充一点：是首次打开页面的时候显示不了

Answer 1

---

页面中看不到调用时的代码，盲猜加 nextTick 就可以了。

---

没道理获取不到，应该是获取到了，但是没有宽高，在 visible 的 watch 里面用 nextTick 来初始化吧。

其实这种操作dom的推荐封装成组件，这样可以直接走生命周期钩子函数。