arcgis api for js之echarts开源js库实现地图统计图分析

前面写过一篇关于arcgis api for js实现地图统计图的，具体见：http://www.cnblogs.com/giserhome/p/6727593.html

那是基于dojo组件来实现图表统计的，实现的效果一般般；所以，本篇利用arcgis api for js结合echarts实现统计图效果，效果比之前好看，效果图如下：

实现的思路如下：

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

2.定义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);
}

3.构造模拟数据：

    //echarts统计图表模拟数据
    jsonBarData: [{ GDP1: 13414, GDP2: 32684, GDP3: 235687, GDP4: 236598, GDP5: 86549, UNIT: "万元", x: 121.988, y: 39.094 },{ GDP1: 34514, GDP2: 52684, GDP3: 135687, GDP4: 96598, GDP5: 106549, UNIT: "万元", x: 121.844, y: 39.481 },{ GDP1: 789014, GDP2: 42684, GDP3: 335687, GDP4: 86598, GDP5: 96549, UNIT: "万元", x: 122.191, y: 39.533 },{ GDP1: 56414, GDP2: 122684, GDP3: 435687, GDP4: 136598, GDP5: 116549, UNIT: "万元", x: 122.476, y: 39.445 },{ GDP1: 23414, GDP2: 92684, GDP3: 535687, GDP4: 436598, GDP5: 76549, UNIT: "万元", x: 122.651, y: 39.979 }],jsonPieData: [{ GDP1: 89414, GDP2: 82684, GDP3: 635687, GDP4: 536598, GDP5: 66549, UNIT: "万元", x: 121.639, y: 39.563 },{ GDP1: 111414, GDP2: 62684, GDP3: 735687, GDP4: 636598, GDP5: 126549, UNIT: "万元", x: 121.891, y: 39.229 },{ GDP1: 23614, GDP2: 72684, GDP3: 835687, GDP4: 736598, GDP5: 136549, UNIT: "万元", x: 122.211, y: 39.813 },{ GDP1: 93414, GDP2: 132684, GDP3: 935687, GDP4: 126598, GDP5: 146549, UNIT: "万元", x: 122.614, y: 39.652 },{ GDP1: 63414, GDP2: 222684, GDP3: 145687, GDP4: 116598, GDP5: 156549, UNIT: "万元", x: 123.144, y: 39.865 }],

4.创建柱状图以及饼状图部分代码：

    loadChartBarOnMap: function (map, width, height) {require(["esri/geometry/Point",//添加自定义类型的引用"CustomModules/ChartInfoWindow","dojo/_base/array","dojo/dom-construct","dojo/_base/window","dojo/domReady!"], function (Point, ChartInfoWindow, array, domConstruct, win) {for (var i = 0; i < DCI.chart.jsonBarData.length; i++) {var chartData = null;chartData = [];var nodeChart = null;nodeChart = domConstruct.create("div", { id: "nodeTestBar" + i, style: "width:" + width + "px;height:" + height + "px;" }, win.body());var myChart = echarts.init(document.getElementById("nodeTestBar" + i));//柱状图var option = {tooltip: {show: true},grid: {*/x: '40%',x2: '1%',y: '10%',y2: '1%',borderWidth: '0'//网格边框
},xAxis: [{type: 'category',splitLine: { show: false, },//网格线data: ["13年", "14年", "15年", "16年", "17年"],axisLabel: {//颜色字体show: true,//rotate:30,
                                textStyle: {color: 'rgba(0,0,0,0.6)'}},axisTick: {//x轴刻度show: false}}],yAxis: [{type: 'value',splitLine: { show: false, },//网格线name: '(万元)',axisLabel: {//颜色字体show: true,textStyle: {color: 'rgba(0,0,0,0.6)'}}}],series: [{"name": "生产总值","type": "bar","barWidth": 8,//itemStyle: {normal: {color: '#2466c9'}},//设置颜色"data": [DCI.chart.jsonBarData[i].GDP1,DCI.chart.jsonBarData[i].GDP2,DCI.chart.jsonBarData[i].GDP3,DCI.chart.jsonBarData[i].GDP4,DCI.chart.jsonBarData[i].GDP5]}]};// 为echarts对象加载数据
                myChart.setOption(option);var chartPoint = null;chartPoint = new Point(DCI.chart.jsonBarData[i].x, DCI.chart.jsonBarData[i].y, MapConfig.mapInitParams.spatialReference);var chartInfo = new ChartInfoWindow({map: map,chart: nodeChart,chartPoint: chartPoint,width: width+30,height: height+25});}});},loadChartPieOnMap: function (map, width, height) {require(["esri/geometry/Point",//添加自定义类型的引用"CustomModules/ChartInfoWindow","dojo/_base/array","dojo/dom-construct","dojo/_base/window","dojo/domReady!"], function (Point, ChartInfoWindow, array, domConstruct, win) {for (var i = 0; i < DCI.chart.jsonPieData.length; i++) {var chartData = null;chartData = [];var nodeChart = null;nodeChart = domConstruct.create("div", { id: "nodeTestPie" + i, style: "width:" + width + "px;height:" + height + "px;" }, win.body());var myChart = echarts.init(document.getElementById("nodeTestPie" + i));//饼状图option = {tooltip: {trigger: 'item',z: 999,formatter: "{a}(万元) <br/>{b} : {c} ({d}%)"},calculable: false,series: [{name: "生产总值",type: "pie",radius: "30%",center: ["50%", "60%"],data: [{ value: DCI.chart.jsonBarData[i].GDP1, name: "13年" },{ value: DCI.chart.jsonBarData[i].GDP2, name: "14年" },{ value: DCI.chart.jsonBarData[i].GDP3, name: "15年" },{ value: DCI.chart.jsonBarData[i].GDP4, name: "16年" },{ value: DCI.chart.jsonBarData[i].GDP5, name: "17年" }]}]};// 为echarts对象加载数据
                myChart.setOption(option);var chartPoint = null;chartPoint = new Point(DCI.chart.jsonPieData[i].x, DCI.chart.jsonPieData[i].y, MapConfig.mapInitParams.spatialReference);var chartInfo = new ChartInfoWindow({map: map,chart: nodeChart,chartPoint: chartPoint,width: width+5,height: height+25});}});},

arcgis api for js之echarts开源js库实现地图统计图分析相关推荐

ArcGIS API for Silverlight 当DataGrid选中项时，地图聚焦弹出窗口，并可以播放音频文件...
原文:ArcGIS API for Silverlight 当DataGrid选中项时,地图聚焦弹出窗口,并可以播放音频文件先看效果图,然后上代码: <UserControl x:Class= ...
ArcGIS API for Flex 调用天地图、e都市瓦片地图
众所周知,像天地图和e都市的地图都是以切片的形式存放在服务端的,系统根据用户选择的范围加载该范围的瓦片地图,这比传统的实时渲染地图的响应速度更快.google地图和baidu地图的原理也不外乎如此. ...
基于ArcGIS API for JavaScript加载百度各种类型切片地图
文章目录应用场景需求分析效果图实现代码原理解读应用场景部分项目基于ArcGIS平台,但是甲方只提供部分矢量数据,用作底图的地形图数据没有,表示可以使用百度地图作为底图.所以才会有使用Ar ...
Echarts开源可视化库学习(一) 介绍与快速上手
介绍 ECharts是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safar ...
ArcGIS API for JavaScript 4.4 版本加载谷歌地图
ArcGIS API for JavaScript 4.X 版本升级后,API发生了很大的变化. 其中就支持了WebEarth展示,主要是通过 esri/views/SceneView 实现的. 在新 ...
Echarts开源可视化库学习(三)主题的使用
主题的使用:默认自带的 echarts工具里面自带了两种主题: light 和 dark; 使用在初始化echarts实例对象的时候定义即可 var mCharts = echarts.init(d ...
Echarts开源可视化库学习(二)常用图表的实现与效果
一.柱状图一.Echarts最基本的代码结构 <!DOCTYPE html> <html lang="en"><head><meta c ...
arcgis api 3.x for js 入门开发系列六地图分屏对比（附源码下载）
前言关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
使用ArcGIS API和Three.js在三维场景中实现动态立体墙效果
使用ArcGIS API和Three.js在三维场景中实现动态立体墙效果废话不多说,直接先来看下最终实现的动态立体墙效果图. 如果图片还不够直观,那么点击链接查看在线示例. 首先我们需要用到ArcG ...

arcgis api for js之echarts开源js库实现地图统计图分析

arcgis api for js之echarts开源js库实现地图统计图分析相关推荐

最新文章

热门文章