首页 > 代码库 > AngularJS 项目里使用echarts 2.0 实现地图功能

AngularJS 项目里使用echarts 2.0 实现地图功能

2024-08-18 07:23:51   219人阅读

项目中有一页是显示全国地图, 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 实现地图功能






























        

            
                
                  
                
                

                    联系

                    我们