加菲大帅猫 2022-04-13 11:10 采纳率: 37.8%
浏览 31
已结题

echarts图表宽度不能自适应了,并且一直报There is a chart instance already initialized on the dom.

问题遇到的现象和发生背景

使用echarts是,图表不能随着窗口的大小改变了,一直报警告

img

img

问题相关代码,请勿粘贴截图
<div id="myChart" style="width:1557px;height:350px"></div>


var myChart;
      if (myChart != null && myChart != "" && myChart != undefined){
            myChart.dispose();
        }
      myChart = echarts.init(document.getElementById("myChart"));
        myChart.setOption(this.option_TIE);
        this.$nextTick(function () {
        // 图表自适应
        window.addEventListener("resize", function () {
            echarts.init(document.getElementById("myChart")).resize();
            
        });
        });

option_TIE:{
                    title: {
                        text: ' ',
                        subtext: ' ',
                        x: 'center',
                        y: 'top'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            animation: false
                        }
                    },
                    color: ['#63B8FF', '#3B3B3B', '#43CD80', '#EEB422'],
                    legend: {
                        data: this.legend_data_TIE,
                        orient: 'horizontal',
                        x: 'center', //可设定图例在左、右、居中
                        y: 'bottom', //可设定图例在上、下、居中
                        selected: this.legend_selected_TIE
                    },
                    toolbox: {
                        show: false,
                        feature: {
                            mark: {
                                show: true
                            },
                            dataView: {
                                show: true,
                                readOnly: true
                            },
                            restore: {
                                show: true
                            },
                            saveAsImage: {
                                show: true
                            }
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '10%', // 这几个属性可以控制图表上下左右的空白尺寸,可以自己试试。
                        containLabel: true
                    },
                    xAxis: {
                        show: true,
                        type: 'category',
                        splitLine: {
                            show: true
                        },
                        boundaryGap: false,
                        axisLine: {
                            onZero: false
                        },
                        axisLabel: {
                            rotate: 45,
                        },
                        data: this.xdata
                    },
                    yAxis: {
                        // max: 'dataMax',
                        // min: 'dataMin',
                        show: true,
                        scale: true,
                        type: 'value',
                        boundaryGap: ['20%', '20%'],
                        minInterval: 1,
                        splitLine: {
                            show: true
                        }
                    },
                    series: [{
                            name: '通道1',
                            type: 'line',
                            showSymbol: true,
                            smooth: true,
                            hoverAnimation: false,
                            connectNulls: false,
                            data: this.tie1
                        }, {
                            name: '通道2',
                            type: 'line',
                            showSymbol: true,
                            smooth: true,
                            hoverAnimation: false,
                            connectNulls: false,
                            data: this.tie2
                        }, {
                            name: '通道3',
                            type: 'line',
                            showSymbol: true,
                            smooth: true,
                            hoverAnimation: false,
                            connectNulls: false,
                            data: this.tie3
                        }, {
                            name: '通道4',
                            type: 'line',
                            showSymbol: true,
                            smooth: true,
                            hoverAnimation: false,
                            connectNulls: false,
                            data: this.tie4
                        }
                    ]
                }
运行结果及报错内容
我的解答思路和尝试过的方法

网上找了好多方法都不行

我想要达到的结果
  • 写回答

3条回答 默认 最新

  • qq_40262972 2022-04-13 11:28
    关注

    echarts.init(document.getElementById("myChart")).resize(); => myChart.resize(); 这样呢

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 4月27日
  • 已采纳回答 4月19日
  • 创建了问题 4月13日

悬赏问题

  • ¥15 帮我解决一下膳食平衡的线性规划模型的数据实例
  • ¥40 万年历缺少农历,需要和阳历同时显示
  • ¥250 雷电模拟器内存穿透、寻基址和特征码的教学
  • ¥200 比特币ord程序wallet_constructor.rs文件支持一次性铸造1000个代币,并将它们分配到40个UTXO上(每个UTXO上分配25个代币),并设置找零地址
  • ¥15 关于Java的学习问题
  • ¥15 如何使用chatgpt完成文本分类任务?
  • ¥15 已知速度v关于位置s的等式,怎么转化为已知位置求速度v的等式
  • ¥15 我有个餐饮系统,用wampserver把环境配置好了,但是后端的网页却进去,是为什么,能不能帮远程一下?
  • ¥15 R运行没有名称为"species"的插槽对于此对象类"SDMmodelCV"
  • ¥20 基于决策树的数字信号处理,2ask 2psk 2fsk的代码,检查下报错的原因