視覺化篇：Echarts2.0引入百度地圖

阿新 • • 發佈：2019-02-01

寫在最前
Echarts作為百度團隊下一個視覺化的js庫，自2.0更新至3.0以來，其帶來的視覺衝擊更加強悍，資料可視更加精美，圖形互動更加貼合用戶。
由於echarts2在百度地圖的例項上沒有作過多的說明，echarts3更是刪除了該例項，另外由於工作需要，搗鼓一番，作個筆記。

百度API呼叫及echart庫引入

1. 百度API ak申請：

2. 申請認證企業資訊：

3. 下載相關javaScript庫：

jquery.min.js，require.js，echarts.js，這裡我都已下載好，JQ用的是jQuery v1.10.2，require用的是RequireJS 2.2.0，echart用的是echarts-2.2.7，引入如下：
這裡寫圖片描述

其中第二個 script 標籤裡對應的需換成申請的ak，example2.js對應為echart效果。

4. 百度地圖額外依賴庫main.js

main
這裡模組化的引入對應資料夾下echarts檔案，main.js存放於下載的echarts原始碼中的extension\BMap\src路徑下，同時需引入其他echarts2的圖形控制元件，在build\dist\chart路徑，在該路徑下對應有：

需要時再引入即可，若無需其他視覺化擴充套件，可刪除除map.js外的其他js檔案。

5. 為例項化百度地圖背景構建一個容器：

例項化

Margin設為0則與瀏覽器無邊界融合，div屬性容器id，後面js腳本里需要用到該屬性，並將echart填充到該容器裡，當然，div可以有多個，故可以填充多個echart例項。例項化後再js腳本里呼叫echart api即可：

呼叫API

上圖中的方法都封裝在main.js中，使用的時候按上圖呼叫即可，其中css樣式對應之前的容器大小，BMapExt為初始化的地圖物件，具體可看main.js原始碼，中間getMap,getEchartsContainer為獲取地圖例項及echart例項物件，BMap.Point是定義當前開啟地圖的中心點，最下面兩個函式則定義了地圖的縮放等級及是否可以滾動縮放。

6. 引入的文件結構：

7. 測試程式碼–首頁

<html>
    <head>
        <meta charset="utf-8"> 

        <style type="text/css">
            body {
                margin: 0;
            }
            #main {
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div id="main"></div>
        <script src="./echarts/echarts.js"></script>
        <script type="text/javascript"   src="http://api.map.baidu.com/api?v=2.0&ak=53oVIOgmSIejwV7EfphPgTynOZbIiVYu"></script>
        <script src="./js/jquery.min.js"></script>
        <script src="./js/require.js"></script>
        <script src="./js/example2.js"></script>
    </body>
</html>

8. 測試程式碼–echarts+百度地圖樣式：

(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()
        });

        // 初始化地圖
        var BMapExt = new BMapExtension($('#main')[0], BMap, echarts,{
            enableMapClick: false
        });
        var map = BMapExt.getMap();
        var container = BMapExt.getEchartsContainer();

        var startPoint = {
            x: 113.328755, //天河城 
            y: 23.137588
        };

        var point = new BMap.Point(startPoint.x, startPoint.y);
        map.centerAndZoom(point, 17);
        map.enableScrollWheelZoom(true);
        // 地圖自定義樣式
        map.setMapStyle({
           styleJson: [
          {
                    'featureType': 'land',     //調整土地顏色
                    'elementType': 'geometry',
                    'stylers': {
                              'color': '#081734'
                    }
          },
          {
                    'featureType': 'building',   //調整建築物顏色
                    'elementType': 'geometry',
                    'stylers': {
                              'color': '#04406F'
                    }
          },
         {
                    'featureType': 'building',   //調整建築物標籤是否可視
                    'elementType': 'labels',
                    'stylers': {
                    'visibility': 'off'
                    }
          },
          {
                    'featureType': 'highway',     //調整高速道路顏色
                    'elementType': 'geometry',
                    'stylers': {
                    'color': '#015B99'
                    }
          },
          {
                    'featureType': 'highway',    //調整高速名字是否可視
                    'elementType': 'labels',
                    'stylers': {
                    'visibility': 'off'
                    }
          },
          {
                    'featureType': 'arterial',   //調整一些幹道顏色
                    'elementType': 'geometry',
                    'stylers': {
                    'color':'#003051'
                    }
          },
          {
                    'featureType': 'arterial',
                    'elementType': 'labels',
                    'stylers': {
                    'visibility': 'off'
                    }
          },
          {
                    'featureType': 'green',
                    'elementType': 'geometry',
                    'stylers': {
                    'visibility': 'off'
                    }
          },
          {
                    'featureType': 'water',
                    'elementType': 'geometry',
                    'stylers': {
                              'color': '#044161'
                    }
          },
          {
                    'featureType': 'subway',    //調整地鐵顏色
                    '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',     //調整所有的標籤的邊緣顏色
                    'elementType': 'labels.text.stroke',
                    'stylers': {
                              'color': '#313131'
                    }
          },
          {
                    'featureType': 'all',     //調整所有標籤的填充顏色
                    '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': {
                              'lightness': -40
                    }
          },
          {
                    'featureType': 'boundary',
                    'elementType': 'geometry',
                    'stylers': {
                              'color': '#8b8787',
                              'weight': '1',
                              'lightness': -29
                    }
          }
    ]
        });

option = {
    color: ['gold','aqua','lime','red','blue'],
    title : {
        text: '搖折扣--通勤圖',
        subtext: '',
        x:'center',
        textStyle: {
            color: '#fff',
            fontSize: 25
        }
    },
    legend: {
        orient: 'vertical',
        x:'left',
        data:['全部', '上班人群', '購物人群','買菜人群','流浪人群'],
        selectedMode: 'single',
        selected:{
            '上班人群' : false,
            '購物人群' : false,
            '買菜人群' : false,
            '流浪人群' : false,
            },
        textStyle : {
            color: '#fff',
            fontSize: 15
            },
        padding:[20,5,5,20]
    },
    tooltip : {
        show: false,
        trigger: 'item',
        formatter: function (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(param.data[0].value.colorValue);
                    },
                borderWidth:1,
                lineStyle: {
                    type: 'dashed',
                    width: 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'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p435'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p436'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p437'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p438'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p439'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p440'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p441'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p442'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p443'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p444'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p445'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p446'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p447'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p448'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p449'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p450'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p451'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p452'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p453'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p454'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p455'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p456'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p457'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p458'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p459'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p460'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p461'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p462'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p463'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p464'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p465'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p466'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p467'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p468'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p469'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p470'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p471'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p472'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p473'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p474'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p475'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p476'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p477'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p478'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p479'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p480'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p481'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p482'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p483'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p484'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p485'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p486'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p487'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p488'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p489'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p490'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p491'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p492'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p493'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p494'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p495'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p496'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p497'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p498'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p499'}, {name:'p900',value:{colorValue:'grey'}}],
[{name:'p500'}, {name:'p900',value:{colorValue:'grey'}}]]},
    geoCoord:{
'p900': [113.3302,23.13848],
'p401': [113.3270,23.13743],
'p402': [113.3243,23.13767],
'p403': [113.3303,23.13735],
'p404': [113.3338,23.13985],
'p405': [113.3291,23.13972],
'p406': [113.3328,23.13755],
'p407': [113.3322,23.13563],
'p408': [113.3266,23.13853],
'p409': [113.3262,23.13382],
'p410': [113.3311,23.13829],
'p411': [113.3332,23.13532],
'p412': [113.3347,23.13655],
'p413': [113.3264,23.13744],
'p414': [113.3283,23.13829],
'p415': [113.3247,23.13500],
'p416': [113.3267,23.13889],
'p417': [113.3222,23.13654],
'p418': [113.3241,23.13749],
'p419': [113.3295,23.14119],
'p420': [113.3332,23.14208],
'p421': [113.3258,23.13706],
'p422': [113.3322,23.13318],
'p423': [113.3275,23.13652],
'p424': [113.3252,23.13836],
'p425': [113.3291,23.14020],
'p426': [113.3279,23.13774],
'p427': [113.3288,23.13811],
'p428': [113.3291,23.13845],
'p429': [113.3345,23.13943],
'p430': [113.3314,23.13802],
'p431': [113.3290,23.13699],
'p432': [113.3271,23.13750],
'p433': [113.3270,23.14132],
'p434': [113.3310,23.13812],
'p435': [113.3272,23.13590],
'p436': [113.3314,23.13231],
'p437': [113.3292,23.13313],
'p438': [113.3330,23.13989],
'p439': [113.3247,23.13887],
'p440': [113.3219,23.13803],
'p441': [113.3285,23.13254],
'p442': [113.3268,23.13326],
'p443': [113.3307,23.13484],
'p444': [113.3241,23.13730],
'p445': [113.3280,23.14244],
'p446': [113.3283,23.13171],
'p447': [113.3291,23.14070],
'p448': [113.3299,23.13923],
'p449': [113.3334,23.13863],
'p450': [113.3300,23.13776],
'p451': [113.3313,23.14453],
'p452': [113.3292,23.13621],
'p453': [113.3287,23.14180],
'p454': [113.3323,23.14031],
'p455': [113.3329,23.13609],
'p456': [113.3287,23.13430],
'p457': [113.3304,23.13721],
'p458': [113.3312,23.13602],
'p459': [113.3286,23.14076],
'p460': [113.3301,23.13384],
'p461': [113.3310,23.13586],
'p462': [113.3259,23.13477],
'p463': [113.3316,23.13916],
'p464': [113.3255,23.13462],
'p465': [113.3285,23.13740],
'p466': [113.3273,23.13568],
'p467': [113.3316,23.13670],
'p468': [113.3263,23.13498],
'p469': [113.3277,23.13713],
'p470': [113.3323,23.13211],
'p471': [113.3304,23.13676],
'p472': [113.3260,23.14195],
'p473': [113.3264,23.13867],
'p474': [113.3290,23.13605],
'p475': [113.3329,23.13798],
'p476': [113.3274,23.13843],
'p477': [113.3274,23.13889],
'p478': [113.3291,23.14105],
'p479': [113.3296,23.13476],
'p480': [113.3279,23.14075],
'p481': [113.3265,23.13461],
'p482': [113.3310,23.13907],
'p483': [113.3293,23.14134],
'p484': [113.3248,23.13829],
'p485': [113.3294,23.13928],
'p486': [113.3263,23.13722],
'p487': [113.3314,23.13599],
'p488': [113.3346,23.14013],
'p489': [113.3336,23.14240],
'p490': [113.3296,23.14111],
'p491': [113.3266,23.13513],
'p492': [113.3243,23.13664],
'p493': [113.3265,23.13805],
'p494': [113.3294,23.13123],
'p495': [113.3259,23.13996],
'p496': [113.3287,23.14130],
'p497': [113.3273,23.13609],
'p498': [113.3290,23.13569],
'p499': [113.3264,23.13586],
'p500': [113.3287,23.13662]
    }
    },
    ]
};


        var myChart = BMapExt.initECharts(container);
        window.onresize = myChart.onresize;
        BMapExt.setOption(option);
    }
);
})();

視覺化篇：Echarts2.0引入百度地圖

百度API呼叫及echart庫引入

1. 百度API ak申請：

2. 申請認證企業資訊：

3. 下載相關javaScript庫：

4. 百度地圖額外依賴庫main.js

5. 為例項化百度地圖背景構建一個容器：

6. 引入的文件結構：

7. 測試程式碼–首頁

8. 測試程式碼–echarts+百度地圖樣式：

9.效果

視覺化篇：Echarts2.0引入百度地圖

視覺化篇：R視覺化--map圖

換行顯示print_r($arr);打印結果顯示：Array( [0] => 百度 [1] => 阿裏)

thinkphp5.0引入百度編輯器

解決Vue引入百度地圖JSSDK：BMap is undefined 問題

第150天：網頁中插入百度地圖方法

第151天：網頁中插入百度地圖方法（不需要密鑰）

vue：vue中使用百度地圖

【php增刪改查實例】第二十二節 - 引入百度地圖

react項目中引入百度地圖打包報錯問題

Angular引入百度地圖js

頁面引入百度地圖

Android studio3.0對於百度地圖api開發（2）——百度地圖定位指定地點以及地圖型別的變換

Android studio3.0對於百度地圖api開發（3）——百度地圖定位當前地點以及地圖覆蓋物簡介

Android studio3.0對於百度地圖api開發（4）——百度地圖地圖覆蓋物製作

Android studio3.0對於百度地圖api開發（6）——百度地圖地圖POI檢索（續）

Android studio3.0對於百度地圖api開發（7）——百度地圖地圖導航實現

Android studio3.0對於百度地圖api開發（8）——百度地圖開發思考

在頁面中引入百度地圖API的步驟以及Geolocation簡單的使用

Vue專案實戰引入百度地圖（二）

視覺化篇：Echarts2.0引入百度地圖

百度API呼叫及echart庫引入

1. 百度API ak申請：

2. 申請認證企業資訊：

3. 下載相關javaScript庫：

4. 百度地圖額外依賴庫main.js

5. 為例項化百度地圖背景構建一個容器：

6. 引入的文件結構：

7. 測試程式碼–首頁

8. 測試程式碼–echarts+百度地圖樣式：

9.效果

相關推薦