美文网首页
Angularjs动态加载ECharts(一)

Angularjs动态加载ECharts(一)

作者: ZZES_ZCDC | 来源:发表于2017-10-04 10:46 被阅读133次

    今早发现,directive写的echarts组件,虽然能够获取到Controller中的数据,但是当我使用$http请求到的数据,想传到directive却总是获取不到,知道这是异步问题,图表加载后,数据才请求到,所以图表加载不了数据

    解决方法

    使用ng-if,判断,如果有数据才显示,完美解决

    <realtem-data ng-if="data" id="temdata" legend="legend" item="item" data="data"></realtem-data>
    

    其余代码

    controller代码

    app.controller("temdataCtrl", function($scope, $http, $log) {
        $http({
            method: "get",
            url: "http://..:3000/tem",
            headers: {
                "content-type": "application/json"
            }
        }).then(function(req) {
            // console.log(req.data)
            $scope.data = req.data
        })
    })
    

    directive代码

     app.directive('realtemData', function() {
         return {
             scope: {
                 id: "@",
                 data: "="
             },
             restrict: 'E',
             template: '<div class="real-data-charts"></div>',
             replace: true,
             link: function($scope, element, attrs, controller) {
                 var option = {
                     color: ['#CD3700'],
                     tooltip: {
                         trigger: 'axis',
                         axisPointer: { // 坐标轴指示器,坐标轴触发有效
                             type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
                         }
                     },
                     legend: {
                         data: ['温度'],
                     },
                     label: {
                         normal: {
                             show: true
                         }
                     },
                     grid: {
                         left: '3%',
                         right: '4%',
                         bottom: '3%',
                         containLabel: true
                     },
                     xAxis: [{
                         type: 'category',
                         data: [1, 2, 3, 4, 5],
                         axisTick: {
                             alignWithLabel: true
                         }
                     }],
                     yAxis: [{
                         type: 'value'
                     }],
                     series: [{
                         name: '温度',
                         type: 'line',
                         barWidth: '60%',
                         data: $scope.data
                     }]
                 };
                 var myChart = echarts.init(document.getElementById($scope.id), 'macarons');
                 myChart.setOption(option);
             }
         };
     });
    
    图片.png

    注意
    发现如果多个数据的话,可能这么操作会导致图表上只有一个数据显示
    所以我把所有的数据都放到一个对象中,然后ng-if只判断这个对象即可

    相关文章

      网友评论

          本文标题:Angularjs动态加载ECharts(一)

          本文链接:https://www.haomeiwen.com/subject/dlwqyxtx.html