解决Echarts 显示隐藏后宽度高度变小的问题

针对Echarts显示隐藏后宽度高度变小的问题，解决方法如下：

问题分析

Echarts在隐藏和显示时，并没有对宽度和高度进行重新计算，导致当图表重新显示时，图表大小会变小，显示不完整的问题。

解决方法

可以手动计算图表容器的宽度和高度，并调用Echarts的resize方法实现图表大小的更新。

步骤

具体步骤如下：

1. 获取图表容器的宽度和高度
   var chart = echarts.init(document.getElementById('chart-container'));
var chartWidth = $('#chart-container').width();
var chartHeight = $('#chart-container').height();
2. 然后通过Echarts的resize方法，将获取到的宽度和高度传递给图表。
   chart.resize({
width: chartWidth,
height: chartHeight
});

示例

下面通过两个实例来说明如何解决Echarts显示隐藏后宽度高度变小的问题。

示例一：切换Tab时图表大小变化

在一个Tab页面中使用Echarts绘制图表，当切换到别的Tab页再切回来时，会发现图表大小变化了。我们可以通过以下代码解决这个问题：

$('#tab1').click(function() {
    // 显示图表
    $('#chart-container').show();

    // 重新计算图表大小
    var chart = echarts.init(document.getElementById('chart-container'));
    chart.resize();
});

$('#tab2').click(function() {
    // 隐藏图表
    $('#chart-container').hide();
});

示例二：动态添加图表到页面中

在一个Web应用中，动态地向页面中添加一个Echarts图表时，可以通过以下代码解决图表大小变化的问题：

// 创建图表容器
var chartContainer = $('<div>').attr('id', 'chart-container');
$('body').append(chartContainer);

// 绘制图表
var chart = echarts.init(document.getElementById('chart-container'));
chart.setOption(option);

// 更新图表大小
var chartWidth = chartContainer.width();
var chartHeight = chartContainer.height();
chart.resize({
    width: chartWidth,
    height: chartHeight
});

通过以上代码，我们可以在动态添加图表时解决大小变化的问题。