Visualization: Echarts3.0 Introduction of Baidu Map (update)

Update
As the current echarts3.8.x than the previous version of the changes more, in fact, many friends in the map instance of the message ran, today updated next version of the practice, pro-test already can.

Perface
has been out of the body, message area and many friends are asked how to introduce Baidu map in the Echarts3.0, because the previous writing is Echart2.0 how to introduce, but 2.0 is no longer updated, so this period of intermittent study under, share with you.
The Echarts3.0 is introduced in a label, which is relatively easier to use and configure than the 2.0 modular introduction.

Update
The following is for Echarts3.8.4 (the practice is no longer supported in previous versions of 3.2.x), and its download address is: http://echarts.baidu.com/download.html, test as far as possible to choose Source code version 1. The first is still Baidu AK application, please refer to the Visual article: Echarts2.0 introduced Baidu map guidelines, or directly with the blogger's key can also (PS: The company as far as possible to apply for the same time to increase the quota). 2. Download Bmap.js

Update

Bmap.js is a ECHART3-based Baidu Map extension file, which can be used in Echarts.series.map.coordinateSystem directly using the parameters ' Bmap '
Download Address: Https://github.com/ecomfe/echarts, GitHub on the Echarts source code path is dist/extension/bmap.min.js, the old version of Baidu Network disk version no longer support this version (http:/ /PAN.BAIDU.COM/S/1HRPEDGK) 3. Introduction of Echarts.js, Bmap.js and AK

Update:
introduced a new container for echarts as well:

 
Where Example.js is the Echarts test sample, as follows:
 
var mychart = echarts.init (document.getElementById (' main '));
                Mychart.setoption ({bmap: {center: [120.13066322374, 30.240018034923], zoom:14, Roam:true,     Mapstyle: {stylejson: [{' Featuretype ': ' Land ', Adjust the land color ' elementtype ': ' Geometry ', ' stylers ': {' C 
                    Olor ': ' #081734 '}}, {' Featuretype ': ' Building ',//Adjust building color ' ElementType ': ' Geometry ', ' stylers ': {' color ': ' #
                    04406F '}}, {' Featuretype ': ' Building ',//Adjust building label is visible
                    ' ElementType ': ' Labels ', ' stylers ': {' visibility ': ' Off '  }}, {' Featuretype ': ' Highway ',   Adjust the high-speed road color ' elementtype ': ' Geometry ', ' stylers ': {' color ':
                    ' #015B99 '}, {' Featuretype ': ' 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 ', ' stylers ': { ' Visibility ': ' Off '}, {' Featuretype ': ' Water ', ' El
                    Ementtype ': ' Geometry ', ' stylers ': {' color ': ' #044161 '  }}, {' Featuretype ': ' Subway ',//adjust the subway color ' elementtype ':
          ' Geometry.stroke ', ' stylers ': {' color ': ' #003051 '}
                    }, {' Featuretype ': ' Subway ', ' ElementType ': ' Labels ',
                    ' Stylers ': {' visibility ': ' Off '}}, {
                    ' Featuretype ': ' Railway ', ' ElementType ': ' Geometry ', ' stylers ': {
                    ' Visibility ': ' Off '}, {' Featuretype ': ' Railway ', ' ElemeNttype ': ' Labels ', ' stylers ': {' visibility ': ' Off '} }, {' Featuretype ': ' All ',//adjust all the label's Edge Color ' elementtype ': ' LABELS.T
          Ext.stroke ', ' stylers ': {' color ': ' #313131 '} }, {' Featuretype ': ' All ',//adjust the fill color of all tags ' elementtype ': ' Labels
          . Text.fill ', ' stylers ': {' color ': ' #FFFFFF '}
                    }, {' Featuretype ': ' Manmade ', ' ElementType ': ' Geometry ',
                    ' Stylers ': {' visibility ': ' Off '}}, {
                    ' Featuretype ': ' Manmade ', ' elementtype ': ' Labels ', ' stylers ': { ' VisibilitY ': ' Off '}, {' Featuretype ': ' Local ', '
          ElementType ': ' Geometry ', ' stylers ': {' visibility ': ' Off '}
                    }, {' Featuretype ': ' Local ', ' ElementType ': ' Labels ',
                    ' Stylers ': {' visibility ': ' Off '}}, {
                              ' Featuretype ': ' Subway ', ' ElementType ': ' Geometry ', ' stylers ': { ' Lightness ': -65}}, {' Featuretype ': ' Railway ', ' ElementType ': ' All ', ' stylers ': {' lightn
                    ESS ': -40}}, {' Featuretype ': ' Boundary ', ' ElementType ': ' GeoMetRy ', ' stylers ': {' color ': ' #8b8787 ', ' Wei Ght ': ' 1 ', ' Lightness ': -29}}}}, Series:

[{type: ' Scatter ', CoordinateSystem: ' Bmap ', data: [[120, 30, 1]}]});
var bmap = Mychart.getmodel (). Getcomponent (' Bmap '). Getbmap (); Bmap.addcontrol (New Bmap.maptypecontrol ());
 
In Series.map, we can set the CoordinateSystem directly to Bmap, so 3 even if the introduction of success (is not feeling very simple.) ）。
Update:
Here the new version needs to add the last Bmap instantiation statement, hoping to help everyone.
 
The effect is as follows: