切换echarts宽度-关于echarts图，切换tab后，返回时长度变窄。

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

项目场景：

提示：以下是该项目的背景：我目前正在做一个统计报告项目。 我需要插入ECharts图表和表格进行统计，可以导入Excel表格。

问题描述：

提示：下面是项目中遇到的问题的描述：

在开发过程中，遇到了一个问题，切换到tab然后导入页面数据后，echarts图表长度变窄。 初始化echarts图后。

原因分析：

提示：此处填写问题分析：

通过调试代码，发现每次导入excel表格并返回初始页面后切换echarts宽度切换echarts宽度，echarts图表的长度区域都是默认长度，而不是我自己设置的长度，导致图表变窄的时候切换回来。

解决方案：

提示：此处填写问题的具体解决方案：

我在网上搜索了中心化的方法并尝试了这个：

1、隐藏div下的div的宽高获取比较困难。 点击开关标签，初始化echarts，可以实现自适应。 而且，在不改变表单大小的情况下，echarts图表的长度很窄，如图3所示。提示：自动调用echartsInstance.resize()调整规格官方文档：

手动调用：
var shsfECharts = echarts.init(document.getElementById('shsfECharts'));```
shsfECharts.resize();
宽高自适应：
//ecahrts 自适应
    window.onresize = function () {
        shsfECharts.resize();
    }

2. 页面切换时，为您的echarts图片设置固定长度。

var w = $(window).width()
$("#shsfECharts ").css({ "width": $("#shsfECharts ").width(w - 100), "height": "300px" });
//这里我减了100像素的宽度，因为溢出100个像素，高度分给300像素足以。

注意：使用刚刚指定的配置项和数据来显示图表。

function setOptionsLineECharts(xAxis,shzfValue,swdtfsValue) {
        省略 option
        // 使用刚指定的配置项和数据显示图表。
        shsfECharts.hideLoading();
        shsfECharts.setOption(option);
        shsfECharts.resize(); // 一定要加
    }```
#问题解决，此处我用的是第一种方法