如何实现select下选框控制echarts【angularJs】

havetroublein 发布于 2016/08/08 14:51
阅读 512
收藏 0

刚入门搜了很多关键词都没有解决方案。求大神前辈!

假设我需要用select选择对应年份,这时选出来的年份数据(如 2015年,某城每个月的温度)对应需要在echart里显示出来。

用的是AngularJs,不用json(因为之后会写后台接口,所以暂时用的固定数据)

应该怎么对应修改js的数据部分呢?


var app = angular.module('app', []);

app.controller('lineCtrl', function($scope) {
    $scope.legend = ["Berlin", "London",'New York','Tokyo'];
    $scope.item = ['Jan', 'Feb', 'Mar', 'Apr', 'Mar', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    $scope.data = [    //在这里修改,该怎么做呢?
         [-1, 1, 3, 7, 13, 16, 18, 16, 15, 9, 4,2],//Berlin
         [0, 1, 4, 7, 12, 15, 16, 15, 15, 10, 6, 5], //London
         [4, 4, 5, 10, 16, 22, 25, 24, 20, 14, 9, 3],    //New York
         [7, 6, 8, 14, 17, 22, 25, 27, 24, 17, 14, 10]   //Tokyo
    ];
});


app.directive('line', function() {
    return {
        scope: {
            id: "@",
            legend: "=",
            item: "=",
            data: "="
        },
        restrict: 'E',
        template: '<div style="height:400px;"></div>',
        replace: true,
        link: function($scope, element, attrs, controller) {
            var option = {
                // 提示框,鼠标悬浮交互时的信息提示
                tooltip: {
                    show: true,
                    trigger: 'item'
                },
                // 图例
                legend: {
                    data: $scope.legend
                },
                // 横轴坐标轴
                xAxis: [{
                    type: 'category',
                    data: $scope.item
                }],
                // 纵轴坐标轴
                yAxis: [{
                    type: 'value'
                }],
                // 数据内容数组
                series: function(){
                    var serie=[];
                    for(var i=0;i<$scope.legend.length;i++){
                        var item = {
                            name : $scope.legend[i],
                            type: 'line',
                            data: $scope.data[i]
                        };
                        serie.push(item);
                    }
                    return serie;
                }()
            };
            var myChart = echarts.init(document.getElementById($scope.id),'default');
            myChart.setOption(option);
        }
    };
});





加载中
0
LuciusMa
LuciusMa

<select ng-change='vm.getData();' ng-model='vm.year'>
<line data='data' ...></line>

controller:
this.getData = getData;
function getData(){
    //根据this.year,给$scope.data赋不同的值,可以是提前做好的几组假数据
}



返回顶部
顶部