javascript - Comment transmettre des paramètres aux deux graphiques créés par Echarts depuis Android? ?

Question

Comment transférer des paramètres vers les deux graphiques réalisés par echarts depuis Android ? ?
Le code est le suivant :
<script type="text/javascript">

function setEchart(data,nums){
    var myChart = echarts.init(document.getElementById('zh-chart'));
    var option = {
        title:{
            text:'每小时的起飞航班总数和每小时的航班延误数对比分析',
            padding:[10,10],
            x: 'center',
            align: 'right',
            textStyle: {
                color: '#fff',
                fontSize: 14,
            }
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {
                type : 'shadow'
            },
            textStyle: {
                color: "#2088C2",
                fontSize: 12
            },
        },
        legend: {
            data:['每小时的起飞航班总数','每小时的航班延误数'],
            textStyle: {
                color: '#fff',
                fontSize: 14,
            },
            padding:[35,15]
        },
        xAxis : [
            {
                type : 'category',
                // data : ['050416','050417','050418','050419','050420','050421','050422','050423','050500','050501','050502','050503','050504','050505','050506','050507','050508','050509','050510','050511','050512','050513','050514','050515'],
                data:data,
                nameTextStyle: {
                    color: '#fff',
                    fontSize: 14,
                },
                axisLine: {
                    lineStyle: {
                        color: '#ccc'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: "#9ea4ba",
                        fontSize: 13
                    }
                }
            }
        ],
        yAxis : [
            {
                type : 'value',
                nameTextStyle: {
                    color: '#fff',
                    fontSize: 14
                },

                splitLine: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#ccc'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: "#9ea4ba",
                        fontSize: 13
                    },
                }
            }
        ],
        series : [
            {
                name:'每小时的起飞航班总数',
                type:'bar',
                itemStyle: {
                    normal: {
                        barBorderRadius: 5,
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#14c8d4'},
                                {offset: 1, color: '#43eec6'}
                            ]
                        )
                    }
                },
                // data:[1, 0, 0, 0, 0, 3,12, 21, 14, 10, 17, 14, 14,16, 15, 14, 13, 15, 15,10,12,10, 15, 5]
                data:nums,
            },
            {
                name:'每小时的航班延误数',
                type:'bar',
                itemStyle: {
                    normal: {
                        barBorderRadius: 5,
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#ce0320'},
                                {offset: 1, color: '#f71334'}
                            ]
                        )
                    }
                },
                data:nums,
            }
        ]
    };
    myChart.setOption(option);
    window.onresize=function(){
        myChart.resize()
    }
}
setEchart();
function setchart2(dataRate,numRate){
    var myChart2 = echarts.init(document.getElementById('zh-cahrt2'));
    var option2 = {
        title:{
            text:'全天总正常率和每小时正常率统计对比分析',
            padding:[10,10],
            x: 'center',
            align: 'right',
            textStyle: {
                color: '#fff',
                fontSize: 14,
            }
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : { 
                type : 'shadow'
            },
            textStyle: {
                color: "#2088C2",
                fontSize: 12
            },
        },
        legend: {
            data:['24小时的总正常率统计','每小时的正常率统计'],
            textStyle: {
                color: '#fff',
                fontSize: 14,
            },
            padding:[35,15]
        },
        xAxis : [
            {
                type : 'category',
                // data : ['050416','050417','050418','050419','050420','050421','050422','050423','050500','050501','050502','050503','050504','050505','050506','050507','050508','050509','050510','050511','050512','050513','050514','050515'],
                data:dataRate,
                nameTextStyle: {
                    color: '#fff',
                    fontSize: 16,
                },
                axisLine: {
                    lineStyle: {
                        color: '#ccc'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: "#9ea4ba",
                        fontSize: 13
                    }
                }
            }
        ],
        yAxis : [
            {
                type : 'value',
                nameTextStyle: {
                    color: '#fff',
                    fontSize: 16
                },

                splitLine: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#ccc'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: "#9ea4ba",
                        fontSize: 13
                    },
                }
            }
        ],
        series : [
            {
                name:'24小时的总正常率统计',
                type:'line',
                itemStyle: {
                    normal: {
                        barBorderRadius: 5,
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#14c8d4'},
                                {offset: 1, color: '#43eec6'}
                            ]
                        )
                    }
                },
                // data:[0, 0, 0, 0, 0,25, 81.25,83.78, 86.27,88.52, 91.03,91.3, 91.51,91.8, 91.97, 92.05,92.68, 92.74, 91.24,91.18,90.28,90.71, 90.04, 89.02]
                data:numRate,
            },
            {
                name:'每小时的正常率统计',
                type:'line',
                itemStyle: {
                    normal: {
                        barBorderRadius: 5,
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#ce0320'},
                                {offset: 1, color: '#f71334'}
                            ]
                        )
                    }
                },
                // data:[0, 100, 100, 100, 100, 33.33,100, 85.71, 100, 100, 100, 92.86, 92.86,93.75, 93.33, 92.86, 100, 93.33, 73.33,90,75,100, 80, 40]
                data:numRate
            }
        ]
    };
    myChart2.setOption(option2);
    window.onresize=function(){
        myChart2.resize()
    }
}
setchart2();

</script>
Celui d'Android a dit qu'il avait analysé les données, lu l'arrière-plan, puis m'a transmis des paramètres. J'ai défini deux méthodes, chaque méthode a deux types de tableaux de paramètres (deux Il y a deux éléments de données dans. chaque graphique),,,, je ne sais pas si c'est correct ? ? ? ? Les experts peuvent-ils me donner des idées ? ?

Answer 1

Les paramètres transmis par Android sont des chaînes, vous pouvez donc directement transmettre la chaîne JSON et l'analyser avec JSON.Stringify côté Web.

Answer 2

Je suppose que vous êtes un développeur hybride et que vous êtes responsable de la page H5. Le côté natif a obtenu les données en arrière-plan et doit vous les transmettre, puis dessiner le graphique. Ce que vous ne comprenez pas maintenant, c'est comment Android vous transmet les données et quel est le format des données.
Vous pouvez jeter un œil à ma réponse /q/10..., clarifier d'abord la transmission de données entre Native et H5, et revenir à votre question, Native appelle la méthode que vous avez écrite dans l'interface H5 via un code similaire au suivant, webview.loadUrl(javascript:yourFunc(data););, les données transmises sont une chaîne, vous pouvez définir le format vous-même, généralement une chaîne JSON, vous devez convertir cette chaîne en JSON, puis l'obtenir via la clé