bootstrap模態框展示echarts折線圖寬度從100%變為100px

 

 出現這種情況的原因，echarts圖表默認占用盒子的100%，所以，modal處於隱藏狀態下時，寬高為0，此時echarts折線圖會使用自身默認的寬100Px和高100px;

解決方案：

首先我們要了解模態框的一個事件：shown.bs.modal--------此事件在模態框已經顯示出來（並且同時在CSS過渡效果完成）之后被觸發

所以我們可以在模態框剛被加載出來之后就給折線圖重新賦值

代碼如下：（藍色標注）

var myChart = echarts.init(document.getElementById('GradeChart'));
$('#ModalGrade').on('shown.bs.modal', function(){
  myChart.resize()
})
option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
......

效果如下：