AngularJS 項目裡使用echarts 2.0 實現地圖功能

標籤：cat   綁定   char   類比   log   sop   lzo   方法   ack   

項目中有一頁是顯示全國地圖, echarts官網的地圖執行個體裡,有一個類比遷徙的執行個體,比較符合項目需求.所以大部分配置項是參考此執行個體.

angular 就不過多介紹了, Google出品的mvc(或者說mvvm)架構. 雙向資料繫結,指令等特性很好用.

echarts 是百度的開源圖表外掛程式, 功能豐富,展示形式多樣.

首先定義一個directive

.directive(‘echartsMap‘, [‘$timeout‘, function ($timeout) {    return {        restrict: ‘EA‘,        replace: true,        scope: {            option: ‘=echartsOption‘     //這裡的作用是資料繫結        },        template: ‘<div style="height:700px;"></div>‘,   // 自訂圖表寬高        link: function (scope, element, attrs, ctrl) {　　　　　　　// 以下是echarts 初始化方法, 官網有            require.config({                paths: {                    echarts: ‘js/lib/echarts‘                },                packages: [                    {                        name: ‘BMap‘,                        location: ‘js/lib/echarts/src‘,                        main: ‘main‘                    }                ]            });            require(                [                    ‘echarts‘,                    ‘BMap‘,                    ‘echarts/chart/map‘                ],                function(echarts, BMapExtension) {                    $timeout(function () {　　　　　　　// 這裡用一個$timeout 0, 是等 dom 載入完畢　

　　　　　　　　　　　　　　var BMapExt = new BMapExtension(element[0], BMap, echarts, require(‘zrender‘));  // 這裡的elemet[0] 就是這個指令本身,或者指令所在標籤

　　　　　　　　　　　　　　var map = BMapExt.getMap();
　　　　　　　　　　　　　　var container = BMapExt.getEchartsContainer();

　　　　　　　　　　　　　　var startPoint = { //初始化座標
　　　　　　　　　　　　　　　　x: 104.114129,  
　　　　　　　　　　　　　　　　y: 37.550339
　　　　　　　　　　　　　　};

　　　　　　　　　　　　　　var point = new BMap.Point(startPoint.x, startPoint.y);
　　　　　　　　　　　　　　map.centerAndZoom(point, 5);
　　　　　　　　　　　　　　map.enableScrollWheelZoom(true);

　　　　　　　　　　　　　　var myChart = BMapExt.initECharts(container); // echarts執行個體
　　　　　　　　　　　　　　window.onresize = myChart.onresize;
　　　　　　　　　　　　　　BMapExt.setOption(scope.option, true);

                    }, 0);                                    });                    }    };}])

view 裡

<echarts-map echarts-option="ecOption"></echarts-map>

controller 裡

$scope.ecOption = {   //這裡寫 echarts 的options 就可以了     };

這樣,最基本的地圖就可以顯示出來了.

 

.

 

AngularJS 項目裡使用echarts 2.0 實現地圖功能