javascript - echarts做的两个图表,安卓的怎么传参数过来??
伊谢尔伦
伊谢尔伦 2017-05-16 13:25:55
0
2
690

echarts做的两个图表,安卓的怎么传参数过来??
代码如下::
<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>
那个安卓的说他那边解析数据,读取后台,,然后给我传参数,,我就定义了两个方法,每个方法里两个参数数组类型,,(两个图表里分别有两条数据),,,这样不知道对不对????大神们可以给提出思路吗??

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

全部回复(2)
PHPzhong

安卓传参数是字符串,所以可以直接传JSON 字符串,web 端JSON.Stringify 解析即可。

phpcn_u1582

我推测你这个是Hybrid开发,你是负责H5页面的。Native端已经从后台获取到数据,需要把数据转发给你,然后画图表。你现在不明白的是Android如何把数据传给你,并且数据格式是怎样的。
你可以看下我这个回答/q/10...,先把Native与H5之间的数据传输理清楚,回到你的问题上来,Native通过类似如下代码调用你在H5界面中写的方法,webview.loadUrl(javascript:yourFunc(data););,传递的data是字符串,你们可以自己定格式,通常是JSON字符串,你需要把这个字符串转化成JSON,然后通过key获取就可以了

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!