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

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条回答

      报告相同问题?

      相关推荐 更多相似问题

      问题事件

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

      悬赏问题

      • ¥15 JS如何把上面这种数据类型转换成下面这种的
      • ¥15 ubuntu 16.04.2 oss上传文件并显示耗时
      • ¥15 存储过程调用没有进行逻辑计算
      • ¥15 R语言数据分析的相关问题
      • ¥15 模型导入SP后贴图纹理只有一个,拆了四张UV的,怎么解决?
      • ¥15 检索带order by 非常慢
      • ¥20 python 爬虫 token 加密方式
      • ¥20 IAR环境报错reading CPU status failed
      • ¥20 Python如何读取指定播放设备的音频帧?
      • ¥15 用dnspy修改游戏数据报错