正文

基于ECharts 的地图例子

IP云
IP云V管理员/5 阅读
08/04
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示
 
最近的一个项目要用到显示地图,本来用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