基於ECharts 的地圖例子

 

最近的一個項目要用到顯示地圖,本來用jq做了一個,但由於客戶不滿意（確實自己弄的樣式效果都不是太理想）,於是就上網搜了搜,最后決定基於百度的ECharts來弄地圖

本來自己js基礎不是很扎實,ECharts理解起來費了很多功夫,也走了很多彎路（特別是js的模塊化部分）,這里就把代碼放上 以便我一樣的js基礎不是很扎實的同學少走些彎路吧

 

首先是導入文件

這里就是完全就是js  js文件夾結構如下圖

 

src(ECharts里的src文件夾 下載)

zrender(zrender文件夾 下載)

esl.js(js模塊化用的  下載)

jquery(這個就自己找吧)

 

然后依次講解 

 

1 首先導入js

<script src="js/esl.js"></script>
<script src="js/jquery-1.11.2.min.js"></script>

這里因為用到的是js模塊化 所以不用導入ECharts和zrender的js 只需導入esl.js來加載模塊化

 

2 編寫HTML部分 

    <div id="main"></div>
    <div id='btn'>數據變換</div>

main是顯示的地圖 btn是之后為了變化數據為准備的按鈕

 

3 加載器配置路徑

 require.config({
            packages: [
                {
                    name: 'echarts',
                    location: 'js/src',      
                    main: 'echarts'
                },
                {
                    name: 'zrender',
                    location: 'js/zrender/src',
                    main: 'zrender'
                }
            ]
        });

這里是為模塊加載器配置echarts和zrender路徑 （這個zrender貌似可以刪掉,怪我沒有深入研究哈），注意路徑要配置正確

4 使用

require([...],function(ec){...});

require有兩個參數 第一個是加載使用的模塊兒 第二個是加載option和添加事件句柄等

 

5 填寫option

var option={
　　color:...,
　　title:{...},
　　dataRange:{...},
　　series;[
　　　　{
　　　　　　...
　　　　},
　　　　{
　　　　　　...
　　　　}
　　],
　　...
}

這里就要根據需求來設置不同的屬性了 詳細設置還是看下官方API 吧 

 

--------------------------------------------------------------------

好 弄完以上 

附帶自己弄的一個小例子 以供參考 (遼寧地圖 附帶經緯度坐標點)

下載地址   密碼:ps6k