vuejs echart 地图,echart 地图图标,vuejs echart 地图优化

演示地址:http://www.kedooedu.com/fileweb/echart%E5%...

源码下载地址:http://www.kedooedu.com/uishow/#/ ,点击左侧:代码实现,然后搜索:echart地图优化

==========开发===========

说明:我这里是用vuejs开发的,源码也是vue的,需要html的可以点击上面下载链接,加左侧v,手动帮你撸一个

第一步:安装echart扩展,输入命令npm install -S echart

第二步:1、引入 import echarts from "echarts";2、引入地图地理坐标的json文件

第三步:代码中加入地图层

因为要在地图上加标注,所以大致上可以分两个图层,第一层是地图,第二层是地图上的标注。

1、实现地图加载

2、配置地图参数

到这里地图基础已经完成了,虽然地图上的标注和地图不是一个层级,但它和地图是一个整体,所以渲染要在最后做

3、添加地图上的标注,

标注撒到地图上是通过经纬度来与地图关联,所以我们首先需要做两组数据,一组标注的位置,另一组鼠标移到标注上显示的气泡数据信息,这两组数据又通过名称关联

数据:

4、将标注push到地图的series中,并渲染地图及标注

vue
讨论数量: 2

感谢分享,顺便mark一下

3周前 评论

这东西都还要收费下载嘛

4天前 评论

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!