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

項目中有一頁是顯示全國地圖, 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 就可以了     
};

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

 

.