模态框:
<div id="myModal" class="modal fade bs-example-modal-lg"><!--模态框--> <div class="modal-dialog modal-lg" style="height: 50%"> <div class="modal-content" style="height: 80%;"> <div id="box" style="height: 100%"></div><!--给echarts准备的容器--> </div> </div> </div>
按钮触发模态框:
<button type='button' class='btn btn-primary' id='sunburst-trigger' data-target='#myModal'> 风机实时功率</button>
鼠标移动触发模态框:
$('#sunburst-trigger').on('mouseover', function () { $('#myModal').modal(); });
echarts渲染模态框:
<script> $(function () { getWindTower(); setInterval(getWindTower, 30000); function getWindTower() { $.ajax({ type: "GET", url: '/api/realtime/GeneratorData/' + '${farmCode}', contentType: "application/json", dataType: "json", success: function (result){ var option = { color: ['#3398DB'], tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', data: [], axisTick: { alignWithLabel: true } } ], yAxis: [ { type: 'value' } ], series: [ { name: '功率', type: 'bar', barWidth: '60%', data: [] } ] }; for (var i=0;i<result.xAxis[0].data.length;i++){ option.xAxis[0].data[i] = result.xAxis[0].data[i]; option.series[0].data[i] = result.series[0].data[i]; } var windPowerChart = echarts.init(document.getElementById('box'), 'macarons'); $('#myModal').on('shown.bs.modal',function(){ windPowerChart.resize() //重绘 }); windPowerChart.hideLoading(); windPowerChart.setOption(option); } }); } }); </script>