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>