bootstrap模态框引用echarts折线图100%宽度变成100px宽度问题解决

出现这种情况的原因是，echarts图表默认占用盒子的100%，所以，当模态框处于隐藏状态下，宽高为0，此时echarts折线图会使用自身默认的宽100px和高100px

 

解决方案：

　　首先我们要了解模态框的一个事件：shown.bs.modal  ——此事件在模态框已经显示出来（并且同时在CSS过渡效果完成）之后被触发

　　所以我们可以在模态框刚加载出来之后就给折线图重新赋值

　　代码如下：（把红色代码放到ajax请求里面就可以了）

　　　　

var myChart = echarts.init(document.getElementById('map4'), 'dark');

$('#myModal4').on('shown.bs.modal', function(){

myChart.resize()

})

var option2 = {

xAxis: {

type: 'category',

data: time,

axisLabel: {

interval:0,

rotate:20

}

},

yAxis: {

type: 'value'

},

series: [{

data: dianya,

type: 'line'

}]

}

 

转载于:https://www.cnblogs.com/md-lw/p/10245362.html