VUE 使用echart 遇到的异常

<el-row v-show="typeshow!='0'">
                <el-col :span="24">
                    <div id="chart-histogram" style="width:100%;height:500px;border:1px solid #808080;" ref="histogram">

                    </div>
                </el-col>
            </el-row>

1.显示隐藏

echart对隐藏的宽度，如果是百分比，那是不认的，开始生成出来都是很窄的畸形

var myChart = echarts.init(this.$refs.histogram);
                this.$nextTick(() => {
                    myChart.resize()
                })

初始化后，加nextTick做一个重置尺寸

或者显示的时候再加载。

2.同一个id的div下生成多次

有时会出现数据被合并，就像数据串台了。

myChart.setOption(option, true);

加参数，第二个参数默认是false，允许合并，加上true解决

3.在el-dialog打开加载，通过this.$refs.duibichart找不到对应div，无法初始化

<el-dialog width="800px" :title="title" :visible.sync="dialogFormVisible" @@open="open()" @*:close-on-click-modal="false" @@close="dialogFormVisible = false;"*@>
            <div style="width:100%;height:500px;border:1px solid #808080;" ref="duibichart" id="duibichart"></div>
        </el-dialog>

el-dialog 添加open方法

open() {
                    this.$nextTick(() => {
                        //  执行echarts方法
                        this.getEchart()
                    })
                    
                },