Visualization: Echarts2.0 introduction of Baidu Map

Written in the first
Echarts as Baidu Team next Visual JS Library, since the 2.0 update to 3.0, it brings more powerful visual impact, more beautiful data visibility, graphic interaction more user-aligned.
As echarts2 in the Baidu map of the example did not make too much explanation, ECHARTS3 is deleted the example, in addition, because of the work needs, tinkering with a note.

The following is for echarts2.2.7, its source download address is: Http://echarts.baidu.com/build/echarts-2.2.7.zip Baidu API call and Echart Library introduced 1. Baidu API AK Application:

Http://lbsyun.baidu.com/apiconsole/key?application=key

To introduce Baidu maps, you need to apply your own key, which is introduced as a later SRC.

2. Application for Certification Enterprise information:

Http://lbsyun.baidu.com/apiconsole/auth, quota increase application.

Of course, if the individual user, no need to increase the quota, generally do not exceed the limit number.

3. Download the relevant JavaScript library:

Jquery.min.js,require.js,echarts.js, I have downloaded it here, JQ uses jquery V1.10.2,require is Requirejs 2.2.0,echart is used by echarts-2.2.7, which is introduced as follows:

The corresponding ak,example2.js in the second script tag corresponds to the Echart effect.

4. Baidu Map Additional dependency library Main.js

Here the modular introduction of the corresponding folder under the Echarts file, main.js stored in the downloaded echarts source extension\bmap\src path, and the need to introduce other ECHARTS2 graphics control, in the Build\dist\chart path , which corresponds to the following path:

When needed, you can remove other JS files except map.js without additional visual extensions.

5. Build a container for the instance of the Baidu map background:

Margin set to 0 and the browser without boundary fusion, div attribute container ID, the following JS script needs to use this attribute, and the echart filled into the container, of course, Div can have more than one, so you can populate multiple Echart instances. After instantiation, the Echart API can be called in the JS script:

The methods in the above are encapsulated in Main.js, when using the above image call, where the CSS style corresponding to the previous container size, bmapext for the initialization of the map object, specifically to see Main.js source code, the middle Getmap, Getechartscontainer to get the map instance and Echart instance object, Bmap.point defines the center point of the currently open map, and the bottom two functions define the zoom level of the map and whether it can be scrolled.

6. Introduction of the document structure:

7. Test Code – Home

 
8. Test code –echarts+ Baidu map style: 
(function () {require.config ({paths: {echarts: "Echarts",},}); Require (["Echarts", "Echarts/chart/main", "echarts/chart/map"], function (Echarts,
        Bmapextension) {$ (' #main '). CSS ({height:$ (' body '). Height (), Width: $ (' body '). Width ()

        });
        Initialize map var bmapext = new Bmapextension ($ (' #main ') [0], BMap, echarts,{enablemapclick:false
        });
        var map = Bmapext.getmap ();

        var container = Bmapext.getechartscontainer ();

        var startPoint = {x:113.328755,//Tianhe city y:23.137588};
        var point = new Bmap.point (startpoint.x, STARTPOINT.Y);
        Map.centerandzoom (Point, 17);
        Map.enablescrollwheelzoom (TRUE); Map Custom Style Map.setmapstyle ({stylejson: [{' Featuretype ': ' Land ',// Adjust the land color ' ElementType ': ' Geometry ', ' stylers ': {' color ': ' #081734 '} }, {' Featuretype ': ' Building ',//Adjust building color ' elementtype ': ' Geometr
         Y ', ' stylers ': {' color ': ' #04406F '}},
                    {' Featuretype ': ' Building ',//adjust the building label is visible ' ElementType ': ' Labels ',
                    ' Stylers ': {' visibility ': ' Off '}}, {
                    ' Featuretype ': ' Highway ',//adjust the high-speed road color ' elementtype ': ' Geometry ', ' Stylers ': {' color ': ' #015B99 '}}, {' Fe
                    Aturetype ': ' Highway ',//adjust the high-speed name is visible ' ElementType ': ' Labels ', ' stylers ': { ' VisibiliTy ': ' Off '}, {' Featuretype ': ' Arterial ',//adjust some trunk colors
                    ' ElementType ': ' Geometry ', ' stylers ': {' color ': ' #003051 ' }}, {' Featuretype ': ' Arterial ', ' ElementType ': '
          Labels ', ' stylers ': {' visibility ': ' Off '}}, {' Featuretype ': ' Green ', ' ElementType ': ' Geometry ', ' sty ' Lers ': {' visibility ': ' Off '}}, {' Featu
                              Retype ': ' Water ', ' elementtype ': ' Geometry ', ' stylers ': { ' Color ': ' #044161 '}}, {' Featuretype ': ' Subway ',//
                 Adjust the color of the subway   ' ElementType ': ' Geometry.stroke ', ' stylers ': {' color ': ' #003051 ' }}, {' Featuretype ': ' Subway ', ' ElementType ': ' Labels '
                    , ' stylers ': {' visibility ': ' Off '}}, { ' Featuretype ': ' Railway ', ' ElementType ': ' Geometry ', ' stylers ' : {' visibility ': ' Off '}}, {' Featuretyp E ': ' Railway ', ' ElementType ': ' Labels ', ' stylers ': {' Visibili
                    Ty ': ' Off '}, {' Featuretype ': ' All ',//adjust all the label's Edge color ' ElementType ': ' Labels.text.stroke ', ' stylers ': {' Colo
          R ': ' #313131 '          }}, {' Featuretype ': ' All ',//adjust the fill color of all tags ' elem
                    Enttype ': ' Labels.text.fill ', ' stylers ': {' color ': ' #FFFFFF ' }}, {' Featuretype ': ' Manmade ', ' ElementType ': '
          Geometry ', ' stylers ': {' visibility ': ' Off '}}, {' Featuretype ': ' Manmade ', ' elementtype ': ' Labels ', ' s Tylers ': {' visibility ': ' Off '}}, {' FEA Turetype ': ' Local ', ' ElementType ': ' Geometry ', ' stylers ': {' V
                    Isibility ': ' Off '}}, {' Featuretype ': ' Local ', ' ElementType ': ' LAbels ', ' stylers ': {' visibility ': ' Off '}}, {' Featuretype ': ' Subway ', ' ElementType ': ' Geometry ', ' sty
                    Lers ': {' lightness ':-65}}, {
                              ' Featuretype ': ' Railway ', ' ElementType ': ' All ', ' stylers ': {
                    ' Lightness ': -40}}, {' Featuretype ': ' Boundary ', ' ElementType ': ' Geometry ', ' stylers ': {' color ': ' #8b
          8787 ', ' weight ': ' 1 ', ' lightness ':-29}

}
    ]
        }); option = {color: [' Gold ', ' aqua ', ' lime ', ' red ', ' Blue '], title: {text: ' Shake discount--commuter map ', subtext:', x: ' Center ', TextStyle: {color: ' #fff ', fontsize:25}}, lege Nd: {orient: ' Vertical ', x: ' Left ', data:[' all ', ' working crowd ', ' shopping crowd ', ' buy vegetable crowd ', ' stray people '], selectedmod
            E: ' single ', selected:{' working crowd ': false, ' shopping crowd ': false, ' buy vegetable crowd ': false,
            ' Stray crowd ': false,}, TextStyle: {color: ' #fff ', fontsize:15 }, padding:[20,5,5,20]}, tooltip: {show:false, Trigger: ' Item ', FORMATTER:FU
               Nction (v) {if (v[2].tooltipvalue!=null) {return v[2].tooltipvalue;
               }else{return v[1];
        }}, Toolbox: {show:false, Orient: ' Vertical ', x: ' Right ', y: ' Center ', Feature: {mark: {show:true}, DataView: {show:true, readonly:false},
            Restore: {show:true}, Saveasimage: {show:true}}}, series: [{
        Type: ' Map ', Maptype: ' None ', data:[], markline: {symbol:[' none ', ' Arrow '],
            symbolsize:[' 0 ', ' 0.1 '], smooth:true, smooth:10, Effect: {show:true, Scalesize:1, period:30, color: ' #fff ', shadowblur:10}, ItemStyle : {color: ' red ', Normal: {color:function (param) {return (para
                    M.data[0].value.colorvalue); }, Borderwidth:1, LineStyle: {type: ' Dashed ', wid 

 th:1.5, Shadowblur:10}, Label:{show:false}}, Data: [[{Name: ' p401 '}, {name: ' p900 ', Value:{colorvalue: ' Grey '}], [{name: ' p402 '}, {name: ' p900', Value:{colorvalue: ' Grey '}], [{name: ' p403 '}, {name: ' p900 ', Value:{colorvalue: ' Grey '}], [{name: ' p404 '}, {name: ' P900 ', Value:{colorvalue: ' Grey '}], [{name: ' p405 '}, {name: ' p900 ', Value:{colorvalue: ' Grey '}], [{name: ' p406 '}, {name : ' p900 ', Value:{colorvalue: ' Grey '}], [{name: ' p407 '}, {name: ' p900 ', Value:{colorvalue: ' Grey '}], [{name: ' p408 '}, { Name: ' p900 ', Value:{colorvalue: ' Grey '}], [{name: ' p409 '}, {name: ' p900 ', Value:{colorvalue: ' Grey '}], [{name: ' p410 '} {name: ' p900 ', Value:{colorvalue: ' Grey '}], [{name: ' p411 '}, {name: ' p900 ', Value:{colorvalue: ' Grey '}}], [{name: ' p412 '}, {name: ' p900 ', Value:{colorvalue: ' Grey '}], [{name: ' p413 '}, {name: ' p900 ', Value:{colorvalue: ' Grey '}], [{Name : ' p414 '}, {name: ' p900 ', Value:{colorvalue: ' Grey '}], [{name: ' p415 '}, {name: ' p900 ', Value:{colorvalue: ' Grey '}], [{
Name: ' p416 '}, {name: ' p900 ', Value:{colorvalue: ' Grey '}], [{name: ' p417 '}, {name: ' p900 ', Value:{colorvalue: ' Grey '}], [{name: ' p418 '}, {name: ' p900 ', Value:{colorvalue: ' Grey '}], [{name: ' p419 '}, {name: ' p900 ', Value:{colorValue: ' Grey '}], [{name: ' p420 '}, {name: ' p900 ', Value:{colorvalue: ' Grey '}], [{name: ' p421 '}, {name: ' p900 ', value:{ ColorValue: ' Grey '}], [{name: ' p422 '}, {name: ' p900 ', Value:{colorvalue: ' Grey '}], [{name: ' p423 '}, {name: ' p900 ', value : {colorvalue: ' grey '}], [{name: ' p424 '}, {name: ' p900 ', Value:{colorvalue: ' Grey '}], [{name: ' p425 '}, {name: ' p900 ', Value:{colorvalue: ' Grey '}], [{name: ' p426 '}, {name: ' p900 ', Value:{colorvalue: ' Grey '}], [{name: ' p427 '}, {name: ' P900 ', Value:{colorvalue: ' Grey '}], [{name: ' p428 '}, {name: ' p900 ', Value:{colorvalue: ' Grey '}], [{name: ' p429 '}, {name : ' p900 ', Value:{colorvalue: ' Grey '}], [{name: ' p430 '}, {name: ' p900 ', Value:{colorvalue: ' Grey '}], [{name: ' p431 '}, { Name: ' p900 ', Value:{colorvalue: ' Grey '}], [{name: ' p432 '}, {name: ' p900 ', Value:{colorvalue: ' Grey '}], [{name: ' p433 '}  {name: ' p900 ', Value:{colorvalue: ' Grey '}], [{name: ' p434 '},