angularf封装echarts

前言：angular中快速使用echarts

在html使用ehart很简单，你只需要引入文件和按照官方例子按照对应参数配置和数据填充就Ok了，那么在angular中怎么使用eharts(可以使用echarts3)，你只需要去看个官方提供的demo，大致知道图形通过做哪些事构建出来的就行。

步骤：

1.知道大致流程，这里你可以官网直接去gitup地址，上面有angular echarts的使用方法的介绍，我三个都看了觉得最三个最容易看懂且代码也比较少，克隆下来看里面代码很快就明白了。

2.引入文件到项目中

1）你可以使用npm i ng-echarts --save-dev，然后在task任务中打包，相应地方require引入。

2）通过下载js文件外部引入(博主一般将插件都外部引入放在lib目录中)

你在gitup克隆下来的demo中js文件复制到lib的echarts下，macarons.js是一个主题文件，你需要在官网中的主题文件下载中下载你对应的主题。

3.在gulp任务中将引入的文件打包

　gulp.task('build-lib-js', ['build-clean-third-lib-js'], function () {

    var thirdLibJs = gulp.src([//外部引用js
        './lib/bootstrap/js/bootstrap.min.js',
        './lib/echarts/echarts.min.js',
        './lib/echarts/macarons.js',
    ])
        .pipe(concat('lib.min.js', {newLine: '\r\n'}))
        .pipe(gulp.dest('js'));

    return merge.apply(null, thirdLibJs);
　});

4.使用方法
1).html模块
 ec-option:echarts中的option
ec-config:其他参数的配置项 * theme：图表主题名称, * event：绑定事件 * dataLoaded：数据是否加载（用于Loading）

<ng-echarts class="col-md-6 echarts" ec-config="lineConfig" ec-option="lineOption"></ng-echarts>

2)自定义组件模块

 angular.module('ng-echarts',[])
     .directive('ngEcharts',[function(){
         return {
             link: function(scope,element,attrs,ctrl){
                 function refreshChart(){
                     var theme = (scope.config && scope.config.theme)
                         ? scope.config.theme : 'default';
                     var chart = echarts.init(element[0],theme);
                     if(scope.config && scope.config.dataLoaded === false){
                         chart.showLoading();
                     }

                     if(scope.config && scope.config.dataLoaded){
                         chart.setOption(scope.option);
                         chart.resize();
                         chart.hideLoading();
                     }

                     if(scope.config && scope.config.event){
                         if(angular.isArray(scope.config.event)){
                             angular.forEach(scope.config.event,function(value,key){
                                 for(var e in value){
                                     chart.on(e,value[e]);
                                 }
                             });
                         }
                     }
                 };

                 //自定义参数 - config
                 // 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'
         }
     }]);

3）controller模块（配置参数和加载数据）
你可以根据官方例子将数据更改为接口获取，将配置项根据需要修改参数，参数具体参考

.controller('Ctrl1',function($scope,$interval,$timeout){
            function onClick(params){
                console.log(params);
            };

            $scope.lineConfig = {
                                theme:'default',//主题
                                event: [{click:onClick}],//触发事件
                                dataLoaded:true//数据是否加载
                            };

            $scope.lineOption = {
                title : {//标题
                    text: '未来一周气温变化(5秒后自动轮询)',
                    subtext: '纯属虚构'
                },
                tooltip : {//提示框 坐标轴触发
                    trigger: 'axis'
                },
                legend: {//图例组件
                    data:['最高气温','最低气温']
                },
                toolbox: {//工具箱
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},//数据视图(可更改为自己的样式)
                        magicType : {show: true, type: ['line', 'bar']},//视图切换
                        restore : {show: true},//还原
                        saveAsImage : {show: true}//存为图片
                    }
                },
                calculable : true,
                xAxis : [//x轴
                    {
                        type : 'category',
                        boundaryGap : false,
                        data : ['周一','周二','周三','周四','周五','周六','周日']
                    }
                ],
                yAxis : [//y轴
                    {
                        type : 'value',
                        axisLabel : {
                            formatter: '{value} °C'
                        }
                    }
                ],
                series : [//数据
                    {
                        name:'最高气温',
                        type:'line',
                        data:[11, 11, 15, 13, 12, 13, 10],
                        markPoint : {
                            data : [
                                {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name:'最低气温',
                        type:'line',
                        data:[1, -2, 2, 5, 3, 2, 0],
                        markPoint : {
                            data : [
                                {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name : '平均值'}
                            ]
                        }
                    }
                ]
            };
        })

　　-----原创文章，©版权所有，转载请注明标明出处：http://www.cnblogs.com/doinbean