javascript - How to pass parameters to the two charts made by echarts from Android? ?

Question

How to pass parameters to the two charts made by echarts from Android? ?
The code is as follows:
<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>
The Android guy said that he parsed the data, read the background, and then passed parameters to me. I defined two methods, each with two parameter array types. ,, (there are two pieces of data in the two charts respectively),,, I don’t know if this is correct? ? ? ? Can the experts give me some ideas? ?

Answer 1

The parameters passed by Android are strings, so you can directly pass the JSON string and parse it with JSON.Stringify on the web side.

Answer 2

I guess you are a Hybrid developer and you are responsible for the H5 page. The Native side has obtained the data from the background and needs to forward the data to you and then draw the chart. What you don't understand now is how Android transmits data to you and what the data format is.
You can take a look at my answer /q/10..., first clarify the data transmission between Native and H5, and return to your question, Native calls the method you wrote in the H5 interface through code similar to the following ,webview.loadUrl(javascript:yourFunc(data););, the data passed is a string, you can set the format yourself, usually a JSON string, you need to convert this string into JSON, and then get it through the key