初识echarts

show一个demo而已

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>statistics step</title>
</head>

<body>

<hr>
<p>模型简述:统计男生，女生在周一至周五所走的步数<br>
数据是（1000-2000）的随机数
</p>
<button id="girlBut">GIRL</button> <span style="margin:5px 10px"></span> <button id="boyBut">BOY</button>
<hr>
    <!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
    <!--Step:1 为ECharts准备一个具备大小（宽高）的Dom-->
    <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
  
    <!--  jquery js  -->
    <script type="text/javascript" src="./jquery-1.12.1.js"></script>
    <!--Step:2 Import echarts.js-->
    <!--Step:2 引入echarts.js-->
    <script src="../source/echarts.js"></script>
    
    <script type="text/javascript">
    //start-------------------------------------
      //全局变量
    var charts = {
            girlBar:[0,0,0,0,0],
            boyBar:[0,0,0,0,0]
    }
    var setTime;
    var setTime2;
    var i1 = 5;
    var i2 = 5;
    var myChart;
    $(function(){
        //console.log(122434);
   $("#girlBut").click(function(){
       //每次点击之后先画一个空的表
       charts.girlBar = [0,0,0,0,0];       
       myChart.setSeries([{data:charts.girlBar},{data:charts.boyBar}]);
       charts.girlBar = [];
       setTimeDrawGirlbar(5);
       console.log("执行完之后打印数组");
       console.log(charts.girlBar);

   }); 
   $("#boyBut").click(function(){
       //每次点击之后先画一个空的表
       charts.boyBar = [0,0,0,0,0];       
       myChart.setSeries([{data:charts.girlBar},{data:charts.boyBar}]);
       charts.boyBar = [];
       setTimeDrawBoybar(5);
   });
    })
  
    /**定时画一个柱子
    **/
    function setTimeDrawGirlbar(i)
    {
        console.log("girls---start");
        console.log(charts.girlBar);
        console.log(charts.boyBar);
        console.log("girls---end");
        //这里用的是全局变量，思维上可能和局部的不一样
        //获得一个1000-2000的数字
        var random = (new Date()).getTime()%1997;
        random = random < 1000 ? (1000 + random) : random;
   
        //每一次画之前
         charts.girlBar.push(random);
        myChart.setSeries([{data:charts.girlBar},{data:charts.boyBar}]);
        if(i1>1)
            {
console.log(i);
            setTime = setTimeout('setTimeDrawGirlbar('+i1+')', 2000);
            i1--;
            }
        else
            {
            i1=5;
            clearTimeout(setTime);
            }
        
    }
    
    function setTimeDrawBoybar(i)
    {
        console.log("boy---start");
        console.log(charts.girlBar);
        console.log(charts.boyBar);
        console.log("boy---end");
        //这里用的是全局变量，思维上可能和局部的不一样
        //获得一个1000-2000的数字
        var random = (new Date()).getTime()%1997;
        random = random < 1000 ? (1000 + random) : random;
        charts.boyBar.push(random);
        myChart.setSeries([{data:charts.girlBar},{data:charts.boyBar}]);
        if(i2>1)
            {
            
            setTime2 = setTimeout('setTimeDrawBoybar('+i2+')', 2000);
            i2--
            }
        else
            {
            i2=5;
            clearTimeout(setTime2);
            }
        
    }
    //end--------------------------------------
    // Step:3 conifg ECharts's path, link to echarts.js from current page.
    // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
    require.config({
        paths: {
            echarts: '../source'
        }
    });
    
    // Step:4 require echarts and use it in the callback.
    // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
    require(
        [
            'echarts',
            'echarts/chart/bar'
        ],
        function (ec) {
            //--- 折柱 ---
            myChart = ec.init(document.getElementById('main'));
            var options = {
                    tooltip : {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['GIRL','BOY']
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            data : ['MON','TWE','WED','THU','FRI']
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            splitArea : {show : true}
                        }
                    ],
                    series : [
                        {
                            name:'GIRL',
                            type:'bar',
                            data:charts.girlBar
                        },
                        {
                            name:'BOY',
                            type:'bar',
                            data:charts.boyBar
                        }
                    ]
                }
                
            myChart.setOption(options);
        
        }
    );
    </script>
</body>
</html>


核心的就是这些了，这个东西很早就做出来了，趁着整理博客发出来

 

posted @ 2016-07-17 16:20  牵牛花  阅读(497)  评论(0)  编辑  收藏  举报