爬了一個echarts+bootstrap模態框的小坑。

最近在作一個pc的項目，要把echarts圖表在bootstrap模態框裏展現，用戶點擊按鈕彈出內容爲echarts圖表的modal。聽起來so easy對吧？來，咱們按照正常的思路

1、先搞一個模態框出來~

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();//點擊按鈕彈出模態框
})

 

2、渲染圖表：

$.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了！

一個小坑，小小的分享一下，能幫助遇到相同問題的童鞋最好！有問題歡迎留言，歡迎指導。