Echart-Baidu map (scatter chart), echart-Map

Echart-Baidu map (scatter chart), echart-Map

Reference: http://blog.csdn.net/xieweikun7/article/details/52766676

1. First, download

Echarts http://echarts.baidu.com/download.html

Baidu map http://lbsyun.baidu.com/>>>> functions and services >>> map >>>> get key >>> follow the prompts to operate

 

2. Introduce plug-ins

1 <script type="text/javascript" src="echarts.min.js"></script>2 <script type="text/javascript" src="bmap.js"></script>　3 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=？"></script>      

The question mark is the key you obtained. 3. Start to write js and set the map height to 9/16 in width. The height cannot be absent, and the map without height cannot be displayed, $ (# statistics-map '). height ($ ('# statistics-map '). width () * 8/16); 4. var geoCoordMap = {'beijing': [116.395645, 39.929986],...} set the coordinates of the latitude and longitude Echarts instance is written to death, I also write to death, to live also line, in Baidu map development platform download a http://lbsyun.baidu.com/index.php? Title = open/dev-res this is the most comprehensive one I can find, but the data is not the same as var geoCoordMap, when writing the method later, you can call 5 and var data ={} to set your data. Of course, you can write it to death, and pass the value through the background, but you must have it, after all, it makes no sense if there is no data. 6. My map is basically copied from the Echart instance, and I made some modifications to meet my project requirements, most of the comments are English translations.

1 var option = {2 title: {// title 3 text: '', 4 subtext:'', // subtitle 5 sublink: '', // subtitle link 6 left: 'center' // Title position, center 7}, 8 tooltip: {// tooltip 9 trigger: 'item' // trigger type, default data trigger, see, optional: 'item' | 'axis '10}, 11 bmap: {// setting of Baidu map 12 center: [106.23248, 37.48644], // center 13 zoom: 5, // scale 14 roam: true, // roaming 15 mapStyle: {// map style 16 styleJson: [{17 "featureType": "water ", // water 18 "elementType": "all", // feat Ure is feature, element is element 19 "stylers": {20 "color": "#044161" 21} 22}, 23 {24 "featureType": "land ", // land 25 "elementType": "all", 26 "stylers": {27 "color": "#004981" 28} 29}, 30 {31 "featureType ": "boundary", // border 32 "elementType": "geometry", 33 "stylers": {34 "color": "#064f85" 35} 36 }, 37 {38 "featureType": "railway", // railway 39 "elementType": "all", 40 "stylers": {41 "visibility": "off" 4 2} 43}, 44 {45 "featureType": "highway", // highway and National highway 46 "elementType": "geometry", // ry (graphic) 47 "stylers": {48 "color": "#004981" 49} 50}, 51 {52 "featureType": "highway", 53 "elementType": "geometry. fill ", // ry fill 54" stylers ": {55" color ":" #005b96 ", 56" lightness ": 1 57} 58 }, 59 {60 "featureType": "highway", 61 "elementType": "labels", // tag 62 "stylers": {63 "visibility ": "off" 64} 65 }, 66 {67 "featureType": "arterial", // Main City Road 68 "elementType": "geometry", 69 "stylers": {70 "color ": "#004981" 71} 72}, 73 {74 "featureType": "arterial", 75 "elementType": "geometry. fill ", 76" stylers ": {77" color ":" # 00508b "78} 79}, 80 {81" featureType ":" poi ", // locate 82 "elementType": "all", 83 "stylers": {84 "visibility": "off" 85} 86}, 87 {88 "featureType ": "green", // Greenland 89 "elementT Ype ":" all ", 90" stylers ": {91" color ":" #056197 ", 92" visibility ":" off "93} 94 }, 95 {96 "featureType": "subway", // Metro 97 "elementType": "all", 98 "stylers": {99 "visibility ": "off" 100} 101}, 102 {103 "featureType": "manmade", // man-made region 104 "elementType": "all", 105 "stylers ": {106 "visibility": "off" 107} 108}, 109 {110 "featureType": "local", // normal road 111 "elementType": "all ", 112 "stylers": {113 "vis Ibility ":" off "114} 115}, 116 {117" featureType ":" arterial ", 118" elementType ":" labels ", 119" stylers ": {120 "visibility": "off" 121} 122}, 123 {124 "featureType": "boundary", 125 "elementType": "geometry. fill ", 126" stylers ": {127" color ":" #029fd4 "128} 129}, 130 {131" featureType ":" building ", // building 132 "elementType": "all", 133 "stylers": {134 "color": "#1a5787" 135} 136}, 137 {138 "featureType ": "la Bel ", // tag 139" elementType ":" all ", 140" stylers ": {141" visibility ":" off "142} 143} 144] 145} 146 }, 147 series: [{// classification series of display data 148 name: 'alumni distribution', // name 149 type: 'scatter ', // type 150 coordinateSystem: 'bmap ', // coordinate system, use the bmap151 data :{}, // data defined above. This parameter is set to null. 152 symbolSize: function (val) is assigned after the data is transmitted from the request background) {// the size of the data display symbol 153 return val [2]; // diameter? Radius? Length 154}, 155 label: {// label 156 normal: {157 formatter: '{B}', // format 158 position: 'right', label display position 159 show: false // whether to display 160}, 161 emphasis: {// emphasize 162 show: false163} 164}, 165 itemStyle: {// style 166 normal: {167 color: '# FFD700' 168} 169} 170}, 171 {172 name: 'top 5', // Category 2 173 type: 'effectscatter ', 174 coordinateSystem: 'bmap', 175 data :{}, 176 symbolSize: function (val) {177 return val [2]/10; 178}, 179 showEffectOn: 'emphasa', 180 rippleEffect: {// chain reaction 181 brushType: 'stroke' 182}, 183 hoverAnimation: true, // hover operation 184 label: {185 normal: {186 formatter: '{B }', 187 position: 'right', 188 show: true189} 190}, 191 itemStyle: {192 normal: {193 color: '# f4e925', 194 shadowBlur: 10,195 shadowColor: '#333' 196} 197}, 198 zlevel: 1 // level 199} 200] 201 };

7. Modify the display format after the sliding operation. You can specify the display format based on the returned data.

1 // official instance tooltip 2 tooltip: {3 trigger: 'item' 4}, 5 6 7 // The changed 8 tooltip: {9 trigger: 'item ', 10 // Add a function here to return and change the original format 11 formatter: function (data) {12 return data. name + ":" + data. value [2]; 13} 14 },

8. No. You can try it on the Echarts official website.