正文 

当前位置： 首页 > java > java语法

arcgisapiforjs之echarts开源js库实现地图统计图分析

GIS之家      2022-02-16     619

关键词：

前言

关于本篇功能实现用到的 api 涉及类看不懂的，请参照 esri 官网的 arcgis api 3.x for js：esri 官网 api，里面详细的介绍 arcgis api 3.x 各个类的介绍，还有就是在线例子：esri 官网在线例子，这个也是学习 arcgis api 3.x 的好素材。

内容概览

  1. 基于 arcgis api 3.x 结合 echarts 开源 js 库实现地图统计图分析
  2. 源代码 demo 下载

前面写过一篇关于arcgis api 3.x for js 实现地图统计图的，具体见：这里
那是基于 dojo 组件来实现图表统计的，实现的效果一般般；所以，本篇利用 arcgis api 3.x 结合 echarts 实现统计图效果，效果比之前好看，效果图如下：


实现的思路

自定义气泡窗口 ChartInfoWindow，继承 InfoWindowBase，为了 echarts 统计图表展示在自定义的气泡窗口里面；自定义气泡窗口 ChartInfoWindow 是为了适应地图上同时展示多个图表，地图默认的气泡窗口只能显示一个，不能同时显示多个的；

定义 ChartInfoWindow 的样式，具体样式如下：

 

.myInfoWindow {
position: absolute;

z-index: 100;

-moz-box-shadow: 0 0 1em #26393D;

font-family: sans-serif;

font-size: 12px;

background-color: rgba(255, 255, 255, 0);

}

/*.dj_ie .myInfoWindow {*/

/*border: 1px solid rgba(255, 255, 255, 0);*/


/*}*/


.myInfoWindow .content {


position: relative;


color:#002F2F;


overflow: auto;


padding:2px 2px 2px 2px;


background-color: rgba(255, 255, 255, 0);


}

  • 构造模拟数据：

更多的详情见：GIS之家小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波

arcgisapiforjs共享干货系列之二自定义navigation控件样式风格

arcgisapiforjs默认的Navigation控件样式风格如下图： 这样的风格不能说不好，各有各的爱好，审美观，这里也不是重点，这里的重点是如何自定义一套自己喜欢的样式风格呢；自己自定义一个NavigationControl控件类，最终实现的效... 查看详情

25-vue之echarts-基本使用(代码片段)

ECharts-基本使用前言ECharts介绍ECharts快速上手ECharts配置说明前言本篇开始来学习下开源可视化库EChartsECharts介绍ECharts是百度公司开源的一个使用JavaScript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender，提... 查看详情

用python使用数据可视化工具echart之pyecharts

我们都知道有一个很厉害的可视化工具：Echarts，http://echarts.baidu.com/，但是一直觉得很不方便，因为要代码转换。国内的一个大神创建了一个轮子：pyecharts，可以实现用python调用echatrs。ECharts是一个使用JavaScript实现的开源可视化... 查看详情

ui之echarts

官网效果图展示：特性ECharts，一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库ZRender，提供直观，交互丰富... 查看详情

openlayers入门开发系列之批量叠加zip压缩shp图层篇(代码片段)

...点、线、面shp图层，效果图如下：实现的思路跟之前实现arcgisapiforjs版本是一致的：arcgisapiforjs入门开发系列二十三批量叠加zip压缩SHP图层压缩的shp截图如下：实现的核心代码：//叠加压缩SHP图层，批量加载显示$("#zipshp").click(funct... 查看详情

echarts的简单应用之柱形图(代码片段)

...来展示信息，从网上资料来看用的比较多的是百度开源的echarts。echarts的官网上有API以及demo。上面的图形都是非常炫的，不过都是静态数据，我们做项目时不可能都用静态数据，特别是做监控、管理等方面，需要前后台数据的交... 查看详情

在vue中利用arcgisapiforjs创建地图

参考技术A创建3d视图也是大同小异具体配置文档可以参考arcgis官网的API 查看详情

arcgisapiforjs入门开发系列十五台风轨迹

上一篇实现了demo的地图最近设施点路径分析，本篇新增台风轨迹，截图如下： 下面简单介绍相关知识点：警戒线警戒线坐标集合：varlineArr24=[[127,34],[127,21],[110,15]];//24小时警戒线坐标集合varlineArr48=[[132,34],[132,15],[105,0]];//48小... 查看详情

echarts之bootstrap选项卡不能显示其他标签echarts图表

在echarts跟bootstrap选项卡整合的时候，默认第一个选中选项卡可以正常加载echarts图表，但是切换其他选项的时候不能渲染出其他选项卡echarts图表。 解决方法：在js中添加代码：varmyChart=echarts.init(document.getElementById(‘graph‘));$(... 查看详情

百度开源项目插件-echarts图表

<!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>ECharts</title><scriptsrc=" 查看详情

echarts之类型pie

ECharts之类型pie原博客主链接：http://www.cnblogs.com/carsonwuu/p/8267002.html效果：先上可运行源码及相应的注释：1<html>2<head>3<scriptsrc="https://cdn.bootcss.com/echarts/3.8.5/echarts.min.js"></script>4& 查看详情

arcgisapiforjs入门开发系列二不同地图服务展示(含源代码)

...sp; 上一篇介绍了arcgisapi离线部署，这篇开始正式介绍arcgisapiforjs开发；想要学习webgis开发，首先得熟悉了解前端技术，比如界面布局设计的html+css，核心的是javascript（js），arcgisapi就是js写的，就是说想要开发gis功能前提下，... 查看详情

开源库magicodes.echarts使用教程

 目录1    概要    22    Magicodes.ECharts工作原理    32.1    架构说明    32.1.1 &n 查看详情

echarts之类型bar

ECharts之类型bar原博客主链接：http://www.cnblogs.com/carsonwuu/p/8267457.html效果：可运行代码：1<!DOCTYPEhtml>2<html>3<head>4<metacharset="utf-8">5<title>条形图</title>6<!--引入echarts. 查看详情

arcgisapiforjs实现点击文字内容获取所对应的点高亮显示。

arcgisapiforjs中经常会遇到想要点击文本就能获取所对应的点并高亮显示。其原理与搜索框内搜索属性值并高亮显示在地图中的原理是一样的。其核心的观念就是将所点击的文本值获取并替换给搜索框所要传入的值。即可得到我们... 查看详情

vue项目之echarts的整理汇总（持续更新中）(代码片段)

vue项目之echarts的整理汇总（持续更新中）vue项目之echarts的整理汇总（持续更新中）echarts安装柱状图和折线图饼状图vue项目之echarts的整理汇总（持续更新中）echarts安装这里不多说，npm安装和按需加载... 查看详情

echarts作图之柏拉图

Echarts版本：2.2.7 <!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><scripttype="text/javascript"src="echarts/echarts.js"></script><sc 查看详情

如何在模板文件中添加echarts开源库?

...考技术A步骤如下：方式一：官网下载引用<scriptsrc="echarts.min.js"></script>方式二：npm安装npminstallecharts--saveimportechartsfrom'echarts'//echarts=require('echarts');方式三：CDN引入使用jsDelivr(https://www.jsdelivr.com/)<scrip... 查看详情