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.