Echarts动态数据显示

自己慢慢摸索出来的，留着以后可能会用到

一、先引入jquery，再引入echarts.js

二、配置容器

三、配置路径和数据选项等

<script type="text/javascript">

    // 路径配置

    require.config({

        paths: {

            echarts: '/scripts/dist'

        }

    });



    // 使用

    require(

            [

                'echarts',

                'echarts/chart/line', // 使用直线图就加载line模块，按需加载

                'echarts/chart/bar'

            ],

            function(ec){

            var myChart=ec.init(document.getElementById('main'));

                var option = {

                    tooltip:{

                        trigger:'axis'

                    },

                    toolbox: {

                        show: true,

                        x:'right',

                        borderWidth:0,

                        feature:{

                             mark:{show:true},

                             dataView:{show:true,readOnly:false},

                             magicType:{show:true,type:['line','bar']},

                             restore:{show:true},

                             saveAsImage:{show:true}

                        }

                    },

                    calculable:true,

                    legend: {

                        data:['在线人数']

                    },



                    xAxis : [

                        {

                            name:'时间',

                            type : 'category',

                            data : []

                        }

                    ],

                    yAxis : [

                        {

                            name:'人数',

                            type : 'value',

                            splitArea:{show:true}

                        }

                    ],

                    series : [

                        {

                            name:"在线人数",

                            type:"line",

                            data:[],

                            markPoint:{

                                 data:[

                                      {type:'max',name:'最大值'},

                                      {type:'min',name:'最小值'}

                                 ]

                            },

                            markLine:{

                                  data:[

                                  {type:'average',name:'平均值'}

                                  ]

                            },

                            itemStyle:{

                                  normal:{

                                      label:{

                                           show:true,

                                           textStyle:{

                                                color:'black'

                                           }

                                      }

                                  }

                            }

                        }

                    ]

                };

            var time=new Date();

            $.getJSON("../../Ajax/GetChartData.aspx?time="+time,function(data){     //使用post，get都可以，但需要注明是json类型

            $.each(data,function(num,val){});

            var len=data.length;

            var xarr=new Array();

            var sarr=new Array();

            for(var i=1;i<=len;i++){                                          //将json数据压入相应数组

                     xarr[i-1]=data[i-1].date;

                     sarr[i-1]=data[i-1].num;

                     };

                     option.xAxis[0].data=xarr;

                     option.series[0].data=sarr;

                     myChart.setOption(option)

                });

            }

        );

    </script>