Echarts,一个效果非常棒的可视化库,可以生产各种图表,动态展示,附上官方网址:http://www.echartsjs.com/index.html

之前带本科实习时有同学用过,狗哥的博客也用这个展示他的旅游足迹,所以在这次山西项目里我也拿来试了一下。类似于echarts这种库,最好的学习方法就是按照官网的demo来做,所以我先找了一个符合我要求的demo将其实现,然后再分别掌握其中的重要属性,最后按照自己的需求进行改动。

一、地图展示

我看的主要是以下两种:都在series里,位置在侧栏标出来了

二、属性设置

属性是以键值对的形式调用的,大部分都很简单,和样式有关,一看就知道是干什么的,需要重点关注的是以下几个:

tooltip:浮动提示框组件

legend:图例

series:系列列表,每个系列通过 type 决定自己的图表类型

其中,series里的label和tooltrip中都含有formatter属性,这两个是调整地图所展示的点信息的关键,一定要理清楚formatter属性中的参数含义 ,具体参见官方文档的详细介绍。注意分清 系列名 / 数据名 / 数据值 这三者对应的内容

这是我调整之后的效果:左边是label,右边是tooltip,其他的内容写在代码的注释里了,可以往下看

有不会的一定记得查阅官方文档,里面有不同属性非常详细的介绍

      

内容我已经上传到github了,欢迎大家查看和下载,觉得不错的话可以关注我~

地址:https://github.com/santana2000/sxWebGIS/tree/master/poi

三、代码实现

var myChart = echarts.init(document.getElementById('sxmap'));

// 注意引入版本
// 注意不同版本使用差别 var data = [ //元素为对象的数组
{name: '长治', value: 41},
{name: '大同', value: 58},
{name: '临汾', value: 47},
{name: '太原', value: 39},
{name: '阳泉', value: 31},
{name: '晋城', value: 70},
{name: '平遥', value: 20},
{name: '吕梁', value: 10},
]; var geoCoordMap = { //对象
'阳泉':[113.57,37.85],
'大同':[113.3,40.12],
'长治':[113.08,36.18],
'临汾':[111.5,36.08],
'太原':[112.53,37.87],
'晋城':[112.43,36.87],
'平遥':[112.03,37.37],
'吕梁':[112.53,37.37],
} var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value) //新值= 坐标+旧值;
});
}
}
return res; // [113.57, 37.85, 31]
}; option = {
backgroundColor: '#404a59',
title: {
text: '矿山灾害点危险性展示',
left: 'center',
textStyle: {
color: '#fff',
fontSize:25
}
},
tooltip: { //提示框组件
trigger: 'item',
formatter:'{b} <br/> ', //{c@[2]}
show:false
}, legend: { //图例
orient: 'vertical',
y: 'bottom',
x: 'right',
data: ['危害性'],
textStyle: {
color: '#fff'
}
},
geo: {
map: "china",
label: {
emphasis: {
show: false
}
},
roam: true,
center:[112.38,37.67],
zoom:7,
itemStyle: {
normal: {
areaColor: "#323c48",
borderColor: "#000000"
},
emphasis: {
areaColor: "#2a333d"
}
}
},
series: [{
name: '危险指数:',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(data.sort(function (a, b) {
return b.value - a.value;
}).slice(0, 8)), //选取从 start 到数组结尾的所有元素,该方法并不会修改数组,而是返回一个子数组
symbolSize: function (val) {
return val[2] / 2; //res数组中的第三个元素
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}:{@2}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1
}
]
}; myChart.setOption(option); /*
a(); 执行一次绘制地图
$(window).resize(function() { 窗口缩放一次
map.resize(); 地图画布缩放一次
a() 地图再绘制一次 */

最后说两个要注意的点:

1. 看清楚当前的版本,现在更新到了4.x,有一些属性在之前的版本上做了改动

2. 引用时注意版本,可以看到bootcdn里可选的很多,自己测试时建议选完整版的

Echarts地图展示及属性分析的更多相关文章

  1. echarts 地图 动态 展示 结合css+js

    echarts地图展示功能非常强大,官网上静态展示的样例非常多了,动态的资料少.研究了下.我眼下实现的通过ajax从server获取数据动态展示地图. 另外,我们有时候希望在地图之上做些自己定义的东西 ...

  2. react使用echarts地图实现中国地图大区展示

    日常项目中经常会用到百度地图或者echarts图标展示,今天给大家展示的是如何在react开发项目中使用百度echars的地图展示,把中国地图分为东北大区.华东大区.华南大区.华西大区.华中大区以及华 ...

  3. echarts地图边界数据的实时获取与应用,省市区县多级联动【附最新geoJson文件下载】

    首先,来看下效果图 在线体验地址:https://hxkj.vip/demo/echartsMap/,并提供实时geoJson数据文件下载 echarts官方社区链接地址(可在线编辑):https:/ ...

  4. 【iOS】7.4 定位服务->3.1 地图框架MapKit 功能1:地图展示

    > 本文并非最终版本,如果想要关注更新或更正的内容请关注文集,联系方式详见文末,如有疏忽和遗漏,欢迎指正. --- > 本文相关目录: ================== 所属文集:[[ ...

  5. Echarts 地图添加自定义区域

    使用 Echarts 生成地图时,如果需要添加一些自定义区域,该怎么做呢?请看下面示例. 生成原始地图 index.hmtl 引入 Jquery 和 Echart <!DOCTYPE html& ...

  6. openlayers4 入门开发系列之地图展示篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  7. Echarts 地图上显示数值

    Echarts 地图上展示数值,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiangsu', ...

  8. echarts地图扩展文件使用geoJson格式。

    echarts地图扩展文件使用geoJson格式. 1.在线生成 http://ecomfe.github.io/echarts-map-tool/  这里可以生成省市区的json,但是最多生成到”区 ...

  9. 本周学习总结(原生+Echarts地图)

    本周主要想完成工作中大屏地图相关的知识,所以学习的时间不是很长 dsa.js(数据结构) 拖了两个星期还没看,等啥时候继续研究算法和数据结构再看源码 GoJS 有时间要好好研究下 https://gi ...

随机推荐

  1. Hbase shell基本操作

    1.启动cd <hbase_home>/bin$ ./start-hbase.sh 2.启动hbase shell # find hadoop-hbase dfs fileshadoop ...

  2. python数据结构-数组/列表/栈/队列及实现

    首先 我们要分清楚一些概念和他们之间的关系 数组(array)  表(list)  链表(linked list)  数组链表(array list)   队列(queue)  栈(stack) li ...

  3. 通过Postman进行post请求时传递X-XSRF-TOKEN

    前言介绍 这段时间一个项目后端用的是laravel.在写API接口时通过Postman6进行测试.但是在测试后形式的接口时laravel自带了CSRF验证机制.这就很尴尬了... 所以我们的目的在使用 ...

  4. java开发,年薪15W的你和年薪50W的他的差距

      在这个IT系统动辄就是上亿流量的时代,Java作为大数据时代应用最广泛的语言,诞生了一批又一批的新技术,包括HBase.Hadoop.MQ.Netty.SpringCloud等等 .   一些独角 ...

  5. [P2402] 奶牛隐藏

    二分答案+最大流. 对答案建图,若长度≤答案,连边即可.(先要预处理点对间的最短路) 当然得拆点,(否则,就此题而言,就会出现流量x-y不走x-y的最短路边的情况,而是走了一条路径 ,答案约束的仅仅是 ...

  6. 开源API测试工具 Hitchhiker v0.10 - 中文版

    Hitchhiker 是一款开源的支持多人协作的 Restful Api 测试工具,支持自动化测试, 数据对比,压力测试,支持脚本定制请求,可以轻松部署到本地,和你的team成员一起协作测试Api. ...

  7. LDA-线性判别分析(一)预备知识

    本来是要调研 Latent Dirichlet Allocation 的那个 LDA 的, 没想到查到很多关于 Linear Discriminant Analysis 这个 LDA 的资料.初步看了 ...

  8. Linux学习笔记之五————Linux常用命令之用户、权限管理

    一.引言 用户是Unix/Linux系统工作中重要的一环,用户管理包括用户与组账号的管理. 在Unix/Linux系统中,不论是由本机或是远程登录系统,每个系统都必须拥有一个账号,并且对于不同的系统资 ...

  9. 从零开始学 Web 之 JavaScript(一)JavaScript概述

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  10. Nexus安装、使用说明 (转)

    1. 为什么使用Nexus 如果没有私服,我们所需的所有构件都需要通过maven的中央仓库和第三方的Maven仓库下载到本地,而一个团队中的所有人都重复的从maven仓库下 载构件无疑加大了仓库的负载 ...