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)自定義組件模塊

 1 angular.module('ng-echarts',[])
 2     .directive('ngEcharts',[function(){
 3         return {
 4             link: function(scope,element,attrs,ctrl){
 5                 function refreshChart(){
 6                     var theme = (scope.config && scope.config.theme)
 7                         ? scope.config.theme : 'default';
 8                     var chart = echarts.init(element[0],theme);
 9                     if(scope.config && scope.config.dataLoaded === false){
10                         chart.showLoading();
11                     }
12 
13                     if(scope.config && scope.config.dataLoaded){
14                         chart.setOption(scope.option);
15                         chart.resize();
16                         chart.hideLoading();
17                     }
18 
19                     if(scope.config && scope.config.event){
20                         if(angular.isArray(scope.config.event)){
21                             angular.forEach(scope.config.event,function(value,key){
22                                 for(var e in value){
23                                     chart.on(e,value[e]);
24                                 }
25                             });
26                         }
27                     }
28                 };
29 
30                 //自定義參數 - config
31                 // event 定義事件
32                 // theme 主題名稱
33                 // dataLoaded 數據是否加載
34 
35                 scope.$watch(
36                     function () { return scope.config; },
37                     function (value) {if (value) {refreshChart();}},
38                     true
39                 );
40 
41                 //圖表原生option
42                 scope.$watch(
43                     function () { return scope.option; },
44                     function (value) {if (value) {refreshChart();}},
45                     true
46                 );
47             },
48             scope:{
49                 option:'=ecOption',
50                 config:'=ecConfig'
51             },
52             restrict:'EA'
53         }
54     }]);

 

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