javascript - Un petit puits de boîte modale echarts+bootstrap.

Question

Je travaille actuellement sur un projet PC, dans lequel je souhaite afficher le graphique echarts dans la boîte modale d'amorçage. Lorsque l'utilisateur clique sur le bouton, un modal avec le contenu du graphique echarts apparaîtra.

1. Créez d'abord une boîte modale ~

HTML :

<button type="button" class="btn btn-primary"><!--弹出按钮-->
    弹出来
</button>

<p id="myModal" class="modal fade bs-example-modal-lg"><!--模态框-->
     <p class="modal-dialog modal-lg" style="height: 80%">
        <p class="modal-content" style="height: 100%;">
            <p id="box" style="height: 100%"></p><!--给echarts准备的容器-->
        </p>
    </p>
</p>

JS :

$('.btn').click(function(){
    $('#myModal').modal();//点击按钮弹出模态框
})

2. Tableau de rendu :

$.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);//渲染图表
    }
})

À ce stade, nous pouvons penser que cette fonction a réussi, mais en fait il y a un petit trou ici, comme le montre l'image :

Le tableau deviendra un morceau au lieu de remplir de manière adaptative tout le conteneur.

Answer 1

La raison est la suivante :

echarts remplira automatiquement le graphique en fonction de la taille du conteneur lors du rendu du graphique. À ce stade, notre conteneur est également une boîte modale d'amorçage qui n'est pas apparue lorsque nous définissons les unités de largeur et de hauteur du conteneur sur des pourcentages. (nous savons tous que le pourcentage est basé sur la taille de l'élément parent. Si la boîte modale n'est pas ouverte, la taille de l'élément parent n'existe pas.) Les echarts ne peuvent pas connaître la taille du conteneur, ils seront donc rendus en fonction de la valeur minimale par défaut, ce qui donne l'image ci-dessus. Alors comment le résoudre ?

Étant donné que le rendu des echarts est flou lorsque la boîte modale n'est pas ouverte, nous pouvons laisser les echarts se restituer après l'ouverture de la boîte modale. Ce qu'il faut faire? La réponse peut être trouvée dans la documentation officielle de bootstrap et echarts :

Comme le montre l'image ci-dessus, nous pouvons utiliser la fonction de rappel de la boîte modale bootstrap pour attendre que la boîte modale soit complètement ouverte avant de restituer le graphique :

$('#myModal').on('shown.bs.modal',function(){
    //.....
})

Comme le montre l'image ci-dessus, echarts nous fournit la méthode de redimensionnement pour restituer le graphique, afin que nous puissions le combiner avec la fonction de rappel de la boîte modale bootstrap pour restituer en fonction de la nouvelle taille :

$('#myModal').on('shown.bs.modal',function(){
    myChart.resize()
})

Mettez le code ci-dessus dans la fonction de rappel d'une requête ajax réussie et tout ira bien !

Un petit gouffre, un petit partage, le mieux est d'aider les enfants qui rencontrent le même problème ! Si vous avez des questions, veuillez laisser un message et des conseils sont les bienvenus.