我想用echarts实现市级地图显示,比如只显示沈阳市。然后能显示具体的区县。怎么弄?
示意代码,没使用jquery,gallery链接:网页链接 这种地图需要geoJson文件,目前容易找到的全国地图中,大都没有市级以下的信息 我是从这个人“null主人”分享的图表中下载的沈阳地图(geoJson) 链接网页链接
程序员如何轻松实现数据可视化?
按照我本人的理解,数据可视化应该是将数据库里面的各种数据用一种易于理解的形式展示出来,让用户直观的了解数据走向,有利于用户进行数据分析,那么我们可以通过图表的方式将数据展示出来,图表可以分为很多种,比如柱形图,曲线图,饼图,热点图等等,Excel中也有这些图,我们在开发过程中可以采用很多JavaScript图标控件,比如Highchart.js就比较好用,功能非常强大,我们只需要将数据以Json的方式绑定到图标控件就行了。
前端,首先推荐百度开源库Echarts,图表样式丰富,种类齐全。
其次,推荐dc.js,基于d3.js并且它集成了crossfilter,处理交叉过滤,简直不要太好用,就是样式估计需要自定义处理,和Echarts比确实有点丑。
如果要处理十万以上数据集的话,推荐mapdcharting,它集成了dcjs和crossfilter,处理大型数据很快,也有交叉过滤的功能,就是API做的不好,查起来费力,还需要SQL查询,这又和一般的SQL操作有些不同,用起来蛋疼。有社区版免费,专业版就要收费了。用社区版,可以将它的js文件作为一个js框架,就像jquery一样使用,做二次开发。
还可以用Python,处理数据也很优秀,也有pycharts,matplotlib,pandas等。本人了解不多。
使用轨迹地图,如图:
实现方法:
我熬了三个晚上帮设计师朋友实现了一个“路线地图”编辑工具
朋友是Wyn BI 产品优秀的 Designer, BI 产品的可视化大屏给人的感觉都是下面这样的科技感和酷炫感十足,对的都是出自朋友的设计稿。
最近她需要设计“路线地图”, 即需要酷炫又需要务实,既需要寻找地图的素材,又需要保证地图的动效OK。这些涉及到她的知识盲区了,基础资源问题。既需要用到SVG画图功能。
“路线地图”主要应用场景:
- 区域内路线地图,比如:厂区巡检路线图,车辆行驶路线图等关于轨迹图的应用场景。
②区域内点位信息:比如:厂区内安全门点位标记,摄像头位置等标点信息。
她需要做的工作将图片转换为SVG图后。然后从图坐标中获取相应的点,来显示对应的点,以及路线等信息。于是乎,没有代码解决不了的生活难题,如果有那就写两段代码。不忍心让她熬夜加班,我就帮他实现了这个工具(文章末尾有工具链接)
具体功能有三个:画图,取点,设置路线等功能。
先来看看成品,实现了三个功能:
2.自定义地图背景,Wyn 自定义路线地图中,地图背景需要采用SVG 格式的图片,方便获取坐标,保证任何分辨率之下的一致性,如果让大家自己找图片再将图片转换为SVG 格式,会很麻烦,我就帮大家实现了这一工具,可适用于任何场景。
画图中我们可以将目标图片转换为svg,并且可以设置区域,但是如果在后期使用到需要联动区域的时候,尽量画个图,使用方式与咱们目前wyn中的自定义地图比较类似。功能相对比较丰富,
3.获取显示数据的“坐标点”,我们在定义“路线地图”时,往往需要在地图中标注一些关键数据,比如设备的位置,比如该位置的人流量,停车数等,为了保证自定义地图的关键数据能够与显示在地图的精确位置上,提供了地图坐标点获取工具,可以用于业务数据存储。
坐标拾取,这个功能主要就是获取在自定义地图中的坐标,提供后期显示位置功能。有设置,预览等功能。
4.自定义路线,这个就是路线地图最核心且最亮眼的地方了,即我们要定义巡检的路线,巡检方向,那我们很多时候,是园区巡检,也可能是大的区域地图巡检,等等,根据自己的业务要指定具体的巡检路线,于是提供了巡检路线绘制地图。
这个就是相对于点地图,就是把当前路线给链接起来,实现路线绘制。可以预览所设置的路线。
工具有了,怎么在BI 中增加“路线地图”进行数据分析呢?
在 BI 中使用路线地图进行数据分析
综合以上两点内容,更增加个性化属性配置功能。接下来就给大家详细介绍一下具体功能点。
第一步:下载并且安装插件,相信这一步不用过多介绍。
第二步:数据准备:
1.找一张项目中需要的平面图片。因为在该插件中需要的文件格式为svg,所以对第一步我们先将图片转换为svg格式的,就用到上面的工具了。
操作步骤:
①.将图片转换为svg内容
②获取标点,将标点信息记录如数据表中.
③获取路线
④整理数据表
第三步:插件操作:
1.选择插件
2.技术设置
地图地址:这里可以放svg代码内容,也可以放一个url地址。
自定义路线:这里可以设置固定路线,根据内容填写即可。
其他内容可以自行操作后看效果。
3.绑定数据
根据需求绑定定影的路线,坐标信息.
设置好之后可以看到运动轨迹和标点信息结果。
4.路线属性设置
在这里,我们可以给路线中移动图标设置显示的图标,设置大小,颜色等。更是可以根据不同的数值分类实现个性化设置内容。目前插件中所对应的分类条件是按照分类值来做判断的。
可以看到根据不同设置显示出不同的效果。
5.坐标点设置:
功能与路线设置中类似,大家可以去试试。
6.标签设置,引导线设置
通过此功能,可以让我们整个页面显示的内容更加丰富。

