AngularJS Project using Echarts 2.0 for map function

There is a page in the project showing the national map, Echarts on the official website of the map example, there is a simulation of migration instances, more in line with the project requirements. So most of the configuration items refer to this instance.

Angular does not introduce too much, the MVC (or MVVM) framework that Google produced. Two-way data binding, instructions and other features are very useful.

Echarts is an open source chart plugin for Baidu, with rich features and diverse displays.

First define a directive

. directive (' Echartsmap ', [' $timeout ',function($timeout) {return{restrict:' EA ', replace:true, scope: {option:' =echartsoption '//The role here is data binding}, Template:' <div style= ' height:700px; ></div> ',//Custom chart width High link:function(scope, element, Attrs, ctrl) {//The following is the Echarts initialization method, the official website has 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() {//here with a $timeout 0, is waiting for DOM to load complete

var bmapext = new Bmapextension (element[0], BMap, echarts, require (' Zrender ')); The elemet[0 here] is the instruction itself, or the label where the instruction is

var map = Bmapext.getmap ();
var container = Bmapext.getechartscontainer ();

var startPoint = {//Initialize coordinates
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 instances
Window.onresize = mychart.onresize;
Bmapext.setoption (Scope.option, true);

                    0) (})                                    ;     })

In view

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

Controller.

$scope. ecoption = {   // write Echarts     's options here };

In this way, the most basic map can be displayed.

.

AngularJS Project using Echarts 2.0 for map function