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: '
'}))
        .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