基于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