项目使用AngularJS做框架，图表组件用的ECharts，于是就想整个AngularJS版的ECharts。ECharts中图表渲染都是通过一个option对象来驱动，具体可以参考官网文档。说说我的思路：

• 一定要很方便使用ECharts原生的option方式。也就是把官网的例子扒过来直接能用。
• 针对option没有的比如主题、事件等属性都放到config中。

指令代码很简单：

angular.module('ng-echarts',['ng-echarts.theme'])
    .directive('ngEcharts',['theme',function(theme){
        return {
            controller: function($scope,$element){
                $scope.chart = echarts.init($element[0]);
                this.getChart = function(){
                    return $scope.chart;
                };
                this.showLoading = function (loadingOption) {
                    var op = loadingOption || {
                            text : '数据加载中',
                            effect : 'bubble',
                            textStyle : {
                                fontSize : 20
                            }
                        };
                    $scope.chart.showLoading(op);
                };
                this.hideLoading = function () {
                    $scope.chart.hideLoading();
                };
            },
            link: function(scope,element,attrs,ctrl){
                var chart = scope.chart;
                function refreshChart(){
                    if(scope.config && scope.config.dataLoaded === false){
                        ctrl.showLoading(scope.config.loadingOption);
                    }
                    if(scope.config && scope.config.dataLoaded){
                        var tn = theme.getTheme(scope.config.theme);
                        chart.clear();
                        chart.setOption(scope.option);
                        chart.setTheme(tn||{});
                        chart.resize();
                        ctrl.hideLoading();
                    }
                };
                //事件绑定
                function bindevent(){
                    if(angular.isArray(scope.config.event)){
                        angular.forEach(scope.config.event,function(value,key){
                            for(var e in value){
                                chart.on(e,value[e]);
                            }
                        });
                    }
                }
                if(scope.config.event){
                    bindevent();
                }
                //自定义参数 -
                // event 定义事件
                // theme 主题
                // dataLoaded 数据是否加载
                scope.$watch(
                    function () { return scope.config; },
                    function (value) {if (value) {refreshChart();}},
                    true
                );
                //图表原生option
                scope.$watch(
                    function () { return scope.option; },
                    function (value) {if (value) {refreshChart();}},
                    true
                );
            },
            scope:{
                option:'=ecOption',
                config:'=ecConfig'
            },
            restrict:'EA'
        }
    }]);

怎么用？指令使用ec-option绑定原生的option对象，其他属性都放到ec-config。

ng-echarts只需要两个变量：

• ecOption：也就是echarts中的option，因此你直接可以把官网的例子拷进来用
• ecConfig：其他参数的配置项
  • theme：图表主题
  • event：绑定事件
  • dataLoaded：数据是否加载（用于Loading）
  • loadingOption：加载效果配置项同官网

比如：

$scope.ecConfig = {
        theme:'blue',
        dataLoaded:false,
        event = [{click:onClick}];
    };

数据加载完后，可以再设置dataLoaded为true取消loading画面。

$scope.ecConfig.dataLoaded = true;

查看项目

本文链接:https://www.it72.com/9830.htm