早睡早起,方能养生!
Sleep early rise early, square can preserve one's health!

ECharts简单的使用

super
2019-01-22 17:23
views 938
<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
   </body>
</html>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
        }]
    };

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
    
    //异步加载
    function getData()
    {
        myChart.showLoading();//自带加载动画  不要可删
        $.post("get.php", {param:"参数"}, function(returnData)
        {
            myChart.hideLoading();//隐藏加载动画
            myChart.setOption({
                xAxis:{
                    name: '时间',
                    data: returnData.time
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '数量',
                    data: returnData.data
                }]
            });
       })
    }

</script>
<?php

if(!empty($_POST))
{
    //查询...
    $timeArray = ['1-1', '1-2', '1-3', '1-4', '1-5', '1-6'];
    $dataArray = ['500', '200', '300', '500', '800', '1000'];
    return ['time'=>$timeArray, 'data'=>$dataArray];
}

?>



分享
0 条讨论
top