ng-repeat 循环加载Echars

Posted 2022-12-03 zhangyufeng0126

 

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;