爬了一个echarts+bootstrap模态框的小坑
来源:互联网 发布:金融数据公司 编辑:程序博客网 时间:2024/06/01 20:26
最近在做一个pc的项目,要把echarts图表在bootstrap模态框里展示,用户点击按钮弹出内容为echarts图表的modal。听起来so easy对吧?来,我们按照正常的思路
一、先搞一个模态框出来~
HTML:
<button type="button" class="btn btn-primary"><!--弹出按钮-->弹出来</button><div id="myModal" class="modal fade bs-example-modal-lg"><!--模态框--> <div class="modal-dialog modal-lg" style="height: 80%"><div class="modal-content" style="height: 100%;"><div id="box" style="height: 100%"></div><!--给echarts准备的容器--></div></div></div>JS:
$('.btn').click(function(){$('#myModal').modal();//点击按钮弹出模态框})二、渲染图表:
$.ajax({//发送请求url : BASE_URL + "/index/search",data : {"keyword" : keyword},type : 'GET',dataType : 'json',success : function(data.data){//拿回数据 var data = data.data;var myChart = echarts.init(document.getElementById('box'));//初始echarts option = {//配置图表(从echarts官网示例上扒的option,可忽略) backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{ offset: 0, color: '#f7f8fa' }, { offset: 1, color: '#cdd0d5' }]), title: { text: '1990 与 2015 年各国家人均寿命与 GDP' }, legend: { right: 10, data: ['1990', '2015'] }, xAxis: { splitLine: { lineStyle: { type: 'dashed' } } }, yAxis: { splitLine: { lineStyle: { type: 'dashed' } }, scale: true }, series: [{ name: '1990', data: data[0], type: 'scatter', symbolSize: function (data) { return Math.sqrt(data[2]) / 5e2; }, label: { emphasis: { show: true, formatter: function (param) { return param.data[3]; }, position: 'top' } }, itemStyle: { normal: { shadowBlur: 10, shadowColor: 'rgba(120, 36, 50, 0.5)', shadowOffsetY: 5, color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{ offset: 0, color: 'rgb(251, 118, 123)' }, { offset: 1, color: 'rgb(204, 46, 72)' }]) } } }, { name: '2015', data: data[1], type: 'scatter', symbolSize: function (data) { return Math.sqrt(data[2]) / 5e2; }, label: { emphasis: { show: true, formatter: function (param) { return param.data[3]; }, position: 'top' } }, itemStyle: { normal: { shadowBlur: 10, shadowColor: 'rgba(25, 100, 150, 0.5)', shadowOffsetY: 5, color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{ offset: 0, color: 'rgb(129, 227, 238)' }, { offset: 1, color: 'rgb(25, 183, 207)' }]) } } }] }; myChart.setOption(option);//渲染图表 }})此时我们可能以为这个功能已经成功了,但其实这里有一个小坑,如图:
图表会变成一坨,而不是自适应撑满整个容器。原因是这样的:
echarts在渲染图表时,会自动根据容器的尺寸撑满图表,而此时我们的容器同时又是未弹出的bootstrap模态框,当我们把容器的width、height单位设置为百分比(我们都知道百分比是根据父元素的尺寸来的,模态框没打开,父元素的尺寸也就不存在),echarts无法得知容器的尺寸,就会按照默认最小值进行渲染,就导致了上图中的情况。那怎样解决呢?
既然没打开模态框时echarts渲染蒙逼了,那我们可以让echarts在模态框打开后重新渲染一遍。该怎么做?从bootstrap和echarts的官方文档可以找到:
上图所示,我们可以利用bootstrap模态框的回调函数等模态框完全打开再去重新渲染图表:
$('#myModal').on('shown.bs.modal',function(){//.....})
上图所示,echarts为我们提供了重新渲染图表的resize方法,这样我们就可以结合bootstrap模态框的回调函数根据新的尺寸重新渲染:
$('#myModal').on('shown.bs.modal',function(){myChart.resize()})把以上代码放进ajax请求成功的回调函数就ok了!
阅读全文
0 0
- 爬了一个echarts+bootstrap模态框的小坑
- 一个简单的错误,关于bootstrap模态框挡住了按钮。
- echarts的小例子
- Echarts的小例子
- echarts的小案例
- 一个利用Bootstrap写的的小作品
- 学习Bootstrap后制作一个小dome的所思
- 一个使用了 Bootstrap 的基本的 HTML 模板
- 今天接了一个小的工程
- 一个忽视了的小问题
- 写了一个小的网站困惑
- 发现了一个gdb的小bug
- Echarts 图表放到bootstrap的tab-panel中不加载
- Echarts 图表放到bootstrap的tab-panel中不加载
- 关于echarts在bootstrap框架下的自适应
- 使用bootstrap-table遇到的一个坑
- 基于Echarts图表生成的小案例
- 遇到了一个C++的小问题,百度了一下
- NOIP前中总结
- HashMap为什么是线程不安全的?
- vim 怎么用
- PS基础,灰度色彩模式
- go学习笔记(3)
- 爬了一个echarts+bootstrap模态框的小坑
- Android studio http 代理设置
- Java EE开发环境——MyEclipse2017破解 和 Tomcat服务器配置
- C++中的lambda
- C#初识1 进程
- MyEclipse/Eclipse中Debug调试(断点调试)
- Intent跳转布局及传递数据
- java 反射机制 之 newInstance 执行无参数构造函数
- NOIP2010提高组T2:乌龟棋