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. .NET手记-ASP.NET MVC快速分页的实现

    对于Web应用,展示List是很常见的需求,随之而来的常见的分页组件.jQuery有现成的分页组件,网上也有着大量的第三方分页组件,都能够快速实现分页功能.但是今天我描述的是用基本的C#和html代码 ...

  2. javascript 实现数据结构 - 队列

    队列是遵循FIFO(First In First Out,先进先出,也称为先来先服务)原则的一组有序的项.队列在尾部添加新元素,并从顶部移除元素.最新添加的元素必须排在队列的末尾. 1.构造函数构建队 ...

  3. JAVA实现调用微信js-sdk扫一扫

    喜欢的朋友可以关注下. 已经很久没有给大家分享一片技术文章了,今天抽了点时间来,给大家说一说如何调用微信提供的扫一扫接口. 前提: 需要申请一个公众号:申请公众号需要的资料我就不说了,去申请微信会提示 ...

  4. jsp和servlet的关系

    JSP是Servlet技术的扩展,本质上就是Servlet的简易方式.JSP编译后是“类servlet”. Servlet和JSP最主要的不同点在于:Servlet的应用逻辑是在Java文件中,并且完 ...

  5. 【深入 MongoDB 开发】使用正确的姿势连接分片集群

    MongoDB分片集群(Sharded Cluster)通过将数据分散存储到多个分片(Shard)上,来实现高可扩展性.实现分片集群时,MongoDB 引入 Config Server 来存储集群的元 ...

  6. 3.spring环境搭建

    1. 导入jar     1.1 四个核心包一个日志包(commons-logging)

  7. 微信开放平台创建android应用时怎么获取应用签名

    之前微信开放平台中申请创建应用,没有整理,过了好久,又重新百度,今天索性整理了,以供童鞋们备用. 1.微信开发平台注册申请成开发者账号,就此略过 2.在管理中心选择创建移动应用.按照严格要求填写.上传 ...

  8. 从零开始学 Web 之 移动Web(六)响应式布局

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  9. Apktool的安装与使用

    官网的安装方式如下图: 前提条件: Java 1.8版本已安装 通过在终端内输入"java -version"可以查看Java版本 因为我用的是MacBook,所以只介绍如何在Ma ...

  10. Spring Boot + Spring Cloud 实现权限管理系统 后端篇(二十三):配置中心(Config、Bus)

    在线演示 演示地址:http://139.196.87.48:9002/kitty 用户名:admin 密码:admin 技术背景 如今微服务架构盛行,在分布式系统中,项目日益庞大,子项目日益增多,每 ...