javascript - 在angularJS中点击不同的按钮通过ajax来控制echarts显示不同的数据呢？

问题描述

问 题

要实现上图的功能，点击今日、昨日、本月，通过ajax让echarts显示不同的数据，如何实现呢？目前小弟只写了一个静态页面，通过jquery实现倒是明白，但是放在angularJS中就不明白了。请大神指点！以下是本人静态页面的数据：

// echarts （来源统计）
    app.directive('echartSource', [function() {
        return {
            restrict: 'AE',
            scope: {
                echartSource: '='
            },
            link: link
        };
        console.log(app);
        function link(scope, element, attr) {
            var my_Chart = echarts.init(element[0]);

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '折线图'
                },
                tooltip: {
                    trigger: 'axis',
                    foramtter:function(params){
                        console.log(params)
//                这里处理你想要的数据
//                 return ;
                    }
                },
                legend: {
                    data:['总访问量']
                },
                grid: {
                    left: '1%',
                    right: '2%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
//                mark:{show:false}
                    }

                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['00点','01点','02点','03点','04点','05点','06点','07点','08点','09点','10点','11点','12点','13点','14点','15点','16点','17点','18点','19点','20点','21点','22点','23点']
                },
                yAxis: [{
                    type: 'value',
                    boundaryGap: false,
                    splitNumber:6,
                    scale: true,
//            控制y轴线是否显示
                    axisLine:{show:false},
//            控制网格线是否显示
                    splitLine:{
                        show:true
                    },
//            去除y轴上的刻度线
                    axisTick: {
                        show: false
                    }
                }],
                series: [
                    {
                        name:'总访问量',
                        type:'line',
                        stack: '总量',
                        itemStyle : {
                            normal : {
                                color:'#CA77FF',
                                lineStyle:{
                                    color:'#CA77FF'
                                }
                            }
                        },
                        data:[200, 150, 100, 60, 150, 430, 560,600,800,850,1000,1050,200, 150, 100, 60, 150, 430, 560,600,800,850,1000,1050]
                    }
//            {
//                foramtter:{
//                        "①广东深圳":234,
//                        "①广东东莞":234,
//                        "①广东惠州":123,
//                }
//            }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            my_Chart.setOption(option);

            // 双向传值
            // scope.$watch('echart', function(n, o) {
            //  if (n === o || !n) return;
            //  myChart.setOption(n);
            // });

            //当浏览器窗口发生变化的时候调用div的resize方法
            window.addEventListener('resize', chartResize);

            scope.$on('$destory', function() {
                window.removeEventListener('resize', chartResize);
            })

            function chartResize() {
                my_Chart.resize();
            }
        }
    }]);

解决方案

directive可以开启双向绑定，然后监听数据来源，进行渲染。

同时在ctrl中进行数据来源的控制和切换，随手写个例子。（不保证哪儿没加逗号不能运行啥的）

主要是个思路

<div ng-controller="MyCtrl">
  <button ng-click="load(1)"></button>
  <button ng-click="load(2)"></button>
  <button ng-click="load(3)"></button>
  <div class="charts" echart-source="option"></div>
</div>

var app = angular.module('app', []);
app.controller('MyCtrl', ['$scope', '$http', MyCtrl]);

function MyCtrl($scope, $http) {
  $scope.load = function(type) {
    $http.get('url' + type)
      .success(function(res) {
        $scope.option = formatData(res.data);
      });
  }

  function formatData(data) {
    return {
      //... 自己拼装需要的option数据
    };
  }
}

// echarts （来源统计）
app.directive('echartSource', [function() {
  return {
    restrict: 'AE',
    scope: {
      echartSource: '='
    },
    link: link
  };

  function link(scope, element, attr) {
    var my_Chart = echarts.init(element[0]);

    // 双向传值
    scope.$watch('echartSource', function(n, o) {
      if (n === o || !n) return;
      myChart.setOption(n);
    });

    //当浏览器窗口发生变化的时候调用div的resize方法
    window.addEventListener('resize', chartResize);

    scope.$on('$destory', function() {
      window.removeEventListener('resize', chartResize);
    })

    function chartResize() {
      my_Chart.resize();
    }
  }
}]);

这篇关于javascript - 在angularJS中点击不同的按钮通过ajax来控制echarts显示不同的数据呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！