VUE 使用echart 遇到的异常

原创已于 2022-03-23 09:07:19 修改 · 601 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #vue.js #javascript

于 2021-08-24 13:42:47 首次发布

Vue 同时被 2 个专栏收录

36 篇文章

订阅专栏

Echart

4 篇文章

订阅专栏

本文介绍了如何在ECharts中处理图表隐藏时的宽度调整、同一ID下生成多个图表时的数据合并问题，以及在el-dialog中的初始化挑战。通过resize方法调整大小并设置Option时启用合并选项，确保图表正确显示。

<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()
                    })
                    
                },