angularjs使用echarts例子

MrLee2016-7-28 3178

项目使用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

推荐阅读
最新回复 (0)
    返回