angular.js - 用angular1.x封装了一个echarts的directive，在ng-view的模板里使用指令无法渲染图表

问题描述

问 题

如果不写在ng-view里面，是可以正常渲染的。

代码如下

directive：

app.directive('eCharts', function () {
    function link($scope, element, attrs) {
        var myChart = echarts.init(element[0]);
        $scope.$watch(attrs['eOption'], function() {
            var option = $scope.$eval(attrs['eOption']);
            if (angular.isObject(option)) {
                myChart.setOption(option);
            }
        }, true);
        $scope.getDom = function() {
            return {
                'height': element[0].offsetHeight,
                'width': element[0].offsetWidth
            };
        };
        $scope.$watch($scope.getDom(), function() {
            // resize echarts图表
            myChart.resize();
        }, true);
    }
    return {
        restrict: 'A',
        link: link
    };
})

controller：

app.controller('userGroupProfileCtrl', ['$scope', '$http',function ($scope, $http) {

    // 指定图表的配置项和数据
    $scope.option1 = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

}]);

模板：

<div ng-controller="userGroupProfileCtrl">
    <div e-charts e-option="option1" class="chart-panel"></div>
</div>

解决方案

<div e-charts e-option="option1" class="chart-panel"></div>

你这一层是不是没有高度，我用了你的代码也是没有渲染，我给.chart-panel了一个高度、宽度就好了。

这篇关于angular.js - 用angular1.x封装了一个echarts的directive，在ng-view的模板里使用指令无法渲染图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！