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

Posted 2020-08-16

项目中有一页是显示全国地图, 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 就可以了     
};

这样,最基本的地图就可以显示出来了.

 

.