angularJS+echart动态生成图表

echart中的动态线性图

image.png

官网地址：
http://echarts.baidu.com/demo.html#dynamic-data2
首先这个图的代码，官网已经给出，我们只需要按照自己的需求修改

 // 线性图 
$scope.data=[];
var lineChart = echarts.init(document.getElementById('lineEchart'));
        function randomData(time, view) {
            return {
                name: time,
                value: [
                    time,
                    view
                ]
            }
        }
        var option = {
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    params = params[0];
                    // var date = new Date(params.name);
                    return params.value[0] + ' : ' + params.value[1];
                },
                axisPointer: {
                    animation: false
                }
            },
            dataZoom: [ //滚动条属性
                {
                    id: 'dataZoomX',
                    type: 'slider',
                    start: 0,
                    end: 30,
                }
            ],
            xAxis: {
                type: 'time',
                axisLabel: {   //x轴显示全部数据的属性
                    interval: 0,
                },
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                }

            },
            series: [{
                name: '模拟数据',
                type: 'line',
                showSymbol: false,
                hoverAnimation: false,
                data: $scope.data,  //数据绑定
            }]
        };
        lineChart.setOption(option);

$http发起异步post请求获取数据，封装成getData函数
我的程序中用到了date
$scope.startdate是页面中ng-model双向绑定的数据
$filter('date')($scope.startdate, 'yyyy-MM-dd HH:mm:ss')
过滤器帮助我们过滤时间格式，HH为24小时制

getData();  //调用函数
//获取图表数据
function getData() {
  $http.post(  "api地址", '{"startdate":"' 
+ $filter('date')($scope.startdate, 'yyyy-MM-dd HH:mm:ss') + '"}')
    .success(function (res) {
       if (res.status == "success") {
          var viewslist = []  //访问量
          var datelist = []  //时间
          //根据获得的数据格式，处理数据
          res.data.forEach(function (item) {
                 datelist.push(item.DATADT);
                viewslist.push(item.VIEWS);
          })
         var getdatalist = [];
         for (var i = 0; i < datelist.length; i++) {
            getdatalist.push(randomData(datelist[i], viewslist[i]));
         }
    //把参数传如图表中
        lineChart.setOption({
             series: [{
                 data: getdatalist
              }]
            });
         }
    })

这样就完成动态数据的图表啦！