modal中使用echarts

要在模态框（Modal）中使用 ECharts，你需要在模态框的 `shown.bs.modal` 事件中渲染图表，并在模态框关闭时销毁图表。以下是一个简单的示例：

<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">ECharts 在模态框中的使用</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- ECharts 图表容器 -->
        <div id="chartContainer" style="width: 100%; height: 400px;"></div>
      </div>
    </div>
  </div>
</div>

// 在模态框弹出后渲染图表
$('#myModal').on('shown.bs.modal', function () {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('chartContainer'));

  // 绘制图表
  myChart.setOption({
    // ...
  });
});

// 在模态框关闭时销毁图表
$('#myModal').on('hidden.bs.modal', function () {
  var myChart = echarts.getInstanceByDom(document.getElementById('chartContainer'));
  myChart.dispose();
});

在上面的代码中，我们在模态框的 `shown.bs.modal` 事件中初始化了 ECharts 实例，然后在 `setOption` 中绘制了图表。在模态框关闭时，我们在 `hidden.bs.modal` 事件中获取到图表实例并销毁它，以免重复创建实例导致内存泄漏。