I am working on a PC project recently, where I want to display the echarts chart in the bootstrap modal box. When the user clicks the button, a modal with the content of the echarts chart pops up.
1. First create a modal box~
HTML：
JS：
$('.btn').click(function(){ $('#myModal').modal();//点击按钮弹出模态框 })2. Render chart:
$.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);//渲染图表 } })At this point we may think that this function has been successful, but in fact there is a small pit here, as shown in the picture:
The chart will become a lump instead of adaptively filling the entire container.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
The reason is this:
echarts will automatically fill the chart according to the size of the container when rendering the chart. At this time, our container is also a bootstrap modal box that has not popped up. When we set the width and height units of the container to percentages (we all know The percentage is based on the size of the parent element. If the modal box is not opened, the size of the parent element does not exist.) echarts cannot know the size of the container, so it will render according to the default minimum value, which results in the above picture. Condition. So how to solve it?
Since echarts rendering is blurred when the modal box is not opened, we can let echarts re-render after the modal box is opened. How to do? The answer can be found from the official documentation of bootstrap and echarts:
As shown in the picture above, we can use the callback function of the bootstrap modal box to wait until the modal box is fully opened before re-rendering the chart:
As shown in the picture above, echarts provides us with the resize method to re-render the chart, so that we can combine it with the callback function of the bootstrap modal box to re-render according to the new size:
Put the above code into the callback function of successful ajax request and it will be ok!
A small pit, a small sharing, it is best to help children who encounter the same problem! If you have any questions, please leave a message and guidance is welcome.