ng-repeat 循环加载Echars

 

ng-repeat 循环加载Echars

 

html

      <div class="ywny-basic-detail" ng-repeat="item in list  track by $index">
          
                    <div class="y-chart-box">
                        <div class="chart-value">{{item.bl}}</div>
                        <ng-echarts class="y-chart-con" ec-config="barConfigGA"
                                    ec-option="echartList[$index]"></ng-echarts>
                    </div>
                </div>
      </div>

js

    $scope.list = JSON.parse(bindingResult.content);
                for (var i = 0; i < $scope.list.length; i++) {
                    if ($scope.list[i].JBDFJSFSDM == 2) {
                        $scope.list[i].bl = ($scope.list[i].zdxl / $scope.list[i].XLHDZ * 100).toFixed(2) + '%';
                        $scope.list[i].blz = ($scope.list[i].zdxl / $scope.list[i].XLHDZ * 100).toFixed(2);
                        // $scope.list[i].blz = 122;
                        $scope.list[i].xlhdz = parseFloat($scope.list[i].XLHDZ).toFixed(2);
                        $scope.list[i].zdxlz = parseFloat($scope.list[i].zdxl).toFixed(2);
                        if (parseFloat($scope.list[i].blz)<100){
                            $scope.list[i].jl='当前需量低于需量核定值，按需量核定值收取基本电费。';
                        } else {
                            $scope.list[i].jl=' 当前需量高于需量核定值，105%部分按照核定值收取，超过105%部分加倍收取。'
                        }
                    } else {
                        $scope.list[i].ydrl = parseFloat($scope.list[i].YDRL).toFixed(2);
                    }
                    $scope.list[i].jbdf = parseFloat($scope.list[i].fu).toFixed(2);
                    $scope.sum = $scope.sum + parseFloat($scope.list[i].fu);
                    $scope.dfyj = $rootScope.dhd2(parseFloat($scope.sum).toFixed(2), 72);
                    $scope.list[i].name = '计量点' + $scope.list[i].jldxh + ': ' + $scope.list[i].jldmc;
                }
                for (var i = 0; i < $scope.list.length; i++) {
                    echartsdataDL($scope.list[i].blz);
                    $scope.echartList[i] = $scope.barOptionGA;
                }

echars

  function echartsdataDL(wcd) {

        $scope.barConfigGA = {
            theme: 'gauge',
            dataLoaded: true
        };

        $scope.optionGA = {
            grid: {
                left: 30,
                right: 30,
                top: 10,
                bottom: 0
            },
            series: [
                {
                    type: 'gauge',
                    radius: '96%',
                    center: ['50%', '55%'],
                    data: [{value: wcd, name: ''}],
                    min: 0,
                    max: 200,
                    splitNumber: 10, //刻度数量
                    startAngle: 220,
                    endAngle: -40,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            width: 25,
                            color: [
                                [ 0.525,  new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {
                                    offset: 1,
                                    color: "#A7E8C4"
                                }, {
                                    offset: 0.2,
                                    color: "#93E3B6"
                                }, {
                                    offset: 0,
                                    color: "#43CD80"
                                }] , false) ],
                                [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: "#FFC7B3"
                                }, {
                                    offset: 0.3,
                                    color: "#FFB499"
                                }, {
                                    offset: 0.4,
                                    color: "#FFB499"
                                }, {
                                    offset: 0.5,
                                    color: "#FCA383"
                                }, {
                                    offset: 0.6,
                                    color: "#FF8F66"
                                }, {
                                    offset: 0.7,
                                    color: "#FF6A33"
                                }, {
                                    offset: 0.8,
                                    color: "#ff4500"
                                }, {
                                    offset: 1,
                                    color: "#ff4500"
                                }], false) ]
                            ]

                        }
                    },
                    //仪表盘轴线
                    axisLabel: {
                        show: true,
                        color:'#fff',
                        distance: 5
                    },//刻度标签。
                    axisTick: {
                        show: true,
                        lineStyle: {
                            color: '#fff',
                            width: 1
                        },
                        length: 12
                    },
                    //分隔线样式。
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#EBEBEB',
                            width: 1
                        },
                        length: 25
                    },
                    //仪表盘详情，用于显示数据。
                    detail: {
                        show: false,
                        offsetCenter: [0, 0],
                        color: '#ddd',
                        formatter: function (params) {
                            return params
                        },
                        textStyle: {
                            fontSize: 40
                        }
                    }
                }
            ]
        };
        $scope.barOptionGA = $scope.optionGA;
        $scope.barConfigGA.dataLoaded = true;
    }