精华内容
下载资源
问答
  • 通过几天的研究终于可以用arcgis for flex 在地图上显示柱状图 饼状图和折线图
  • echarts中国地图上显示柱状图,并且柱状图可点击

    万次阅读 多人点赞 2018-01-02 16:59:46
    先放效果~~点击之后~~(数据和标题可动态变化)话不多说,直接代码<link rel="shortcut icon" href="${ctx}/static/img/favicon.ico"> <link rel="stylesheet&...

    先放效果图~~




    点击之后~~(数据和标题可动态变化)




    话不多说,直接上代码


    <link rel="shortcut icon" href="${ctx}/static/img/favicon.ico">
    <link rel="stylesheet" href="${ctx}/static/layui_v2/css/layui.css">
    
    <link rel="stylesheet" href="${ctx}/static/css/global.css">
    <link rel="stylesheet" type="text/css"
    	href="${ctx}/static/css/common.css" media="all">
    <link rel="stylesheet" type="text/css"
    	href="${ctx}/static/css/personal.css" media="all">
    <link rel="stylesheet" href="${ctx}/static/css/main.css">
    
    <link rel="stylesheet" type="text/css"
    	href="http://at.alicdn.com/t/font_9h680jcse4620529.css">
    
    <script src="${ctx}/static/layui_v2/layui.js"></script>
    
    <script src="${ctx}/static/js/jquery-1.8.3.js"></script>
    <script src="${ctx}/static/js/jquery.leoweather.min.js"></script>
    
    <script type="text/javascript" src="${ctx}/static/echarts/echarts.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="${ctx}/static/echarts/china.js" charset="utf-8"></script>
    <script type="text/javascript" src="${ctx}/static/echarts/javascript.js" charset="utf-8"></script>
    
    
    </head>
    <body>
    <div></div>
    	<div class="wrap" style="position: relative;">
    		<div id="map" style="width: 100%; height: 800px;"></div>
    	</div>
    
    	<script>
    	layui.use('layer', function(){ //独立版的layer无需执行这一句
      	var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
      
    	
    		var myChart = echarts.init(document.getElementById('map'));
    		// 省坐标,因为全国34个省固定不变,写死即可
    		var geoCoordMap = {
    			'西藏' : [ 91.11, 30.97 ],
    			'上海' : [ 121.48, 31.22 ],
    			'福建' : [ 118.1, 27.46 ],
    			'浙江' : [ 119.96, 29.86 ],
    			'广东' : [ 113.23, 24.16 ],
    			'山西' : [ 112.53, 38.87 ],
    			'云南' : [ 101.73, 25.04 ],
    			'辽宁' : [ 123.38, 42.8 ],
    			'吉林' : [ 125.35, 44.88 ],
    			'江西' : [ 115.89, 28.68 ],
    			'海南' : [ 109.51, 20.25 ],
    			'广西' : [ 108.74, 24.16 ],
    			'内蒙古' : [ 111.65, 42.42 ],
    			'四川' : [ 104.06, 31.67 ],
    			'陕西' : [ 108.95, 35.27 ],
    			'江苏' : [ 119.78, 33.04 ],
    			'贵州' : [ 106.71, 27.57 ],
    			'北京' : [ 116.46, 41.92 ],
    			'新疆' : [ 86.68, 41.77 ],
    			'山东' : [ 118, 36.65 ],
    			'甘肃' : [ 103.73, 37.03 ],
    			'天津' : [ 117.2, 40.13 ],
    			'河南' : [ 113.65, 34.76 ],
    			'黑龙江' : [ 127.63, 47.75 ],
    			'河北' : [ 115.48, 40.03 ],
    			'湖南' : [ 112, 28.21 ],
    			'安徽' : [ 117.27, 32.86 ],
    			'湖北' : [ 112.31, 31.52 ],
    			'青海' : [ 97.31, 37.03 ],
    			'重庆' : [ 107.31, 30.52 ],
    			'宁夏' : [ 106.31, 38.52 ],
    			'香港' : [ 114.31, 23.02 ],
    			'澳门' : [ 114.01, 22.52 ],
    			'台湾' : [ 120.81, 25.02 ]
    		};
    	
    	
    	
    		var rawData = [];
    		var max1 = 0;
    		//后台获取早中晚登录的人数
    		$.post("${ctx}/main/ajax_echarts_login_info_detail.do", function(data) {
    			//console.info(data.loginAfternoon[0]);
    			//alert(data.province[i]);
    			for (i = 0; i < data.loginAfternoon.length; i++) {
    				var row = [];
    				row.push(data.province[i]);
    				row.push(data.loginMorning[i]);
    				row.push(data.loginAfternoon[i]);
    				row.push(data.loginEvening[i]);
    				rawData.push(row);
    			}
    			;
    			//console.info(rawData);
    	
    			//找出数组中的最大值,用来设置柱状图Y轴的最大值
    			//新建一个数组,将各个数据都放进去,然后查找最大值
    			var arr = [];
    			for (i = 0; i < 34; i++) {
    				arr.push(rawData[i][1]);
    				arr.push(rawData[i][2]);
    				arr.push(rawData[i][3]);
    			}
    			;
    			//查找数组中最大值
    	
    			for (i = 0; i < arr.length; i++) {
    				if (max1 < arr[i]) {
    					max1 = arr[i];
    				}
    			}
    			;
    	
    		
    		//alert(rawData);
    	
    		/* ['西藏',91,11,29],
    		    ['上海',91,11,29],
    		    ]; */
    	
    	
    		//产生地图数据
    		function makeMapData(rawData) {
    			var mapData = [];
    			for (var i = 0; i < rawData.length; i++) {
    				var geoCoord = geoCoordMap[rawData[i][0]];
    				if (geoCoord) {
    					mapData.push({
    						name : rawData[i][0],
    						value : geoCoord.concat(rawData[i].slice(1))
    					});
    				}
    			}
    			return mapData;
    		}
    		;
    	
    		option = {
    			animation : false,
    			tooltip : {
    				trigger : 'axis'
    			},
    			geo : {
    				map : 'china',
    				roam : true,
    				zoom : 0.7, // 地图初始大小
    				center : [ 110.366794, 23.400309 ], // 初始中心位置
    				label : {
    					emphasis : {
    						show : false,
    						areaColor : '#eee'
    					}
    				},
    				// 地区块儿颜色
    				itemStyle : {
    					normal : {
    						areaColor : '#55C3FC',
    						borderColor : '#fff'
    					},
    					emphasis : {
    						areaColor : '#21AEF8'
    					}
    				}
    			},
    			series : []
    		};
    	
    		function renderEachCity() {
    			var option = {
    				xAxis : [],
    				yAxis : [],
    				grid : [],
    				series : [],
    				tooltip : {
    					trigger: 'item',
    					axisPointer: {
    				    	type: 'none'
    				    }
    				}
    			};
    			
    	
    			echarts.util.each(rawData, function(dataItem, idx) {
    				//console.info(idx);
    				var geoCoord = geoCoordMap[dataItem[0]];
    				var coord = myChart.convertToPixel('geo', geoCoord);
    				idx += '';
    	
    				inflationData = [];
    				for (var k = 1; k < 4; k++) {
    					inflationData.push(dataItem[k])
    				}
    				;
    	
    				option.xAxis.push({
    					id : idx,
    					gridId : idx,
    					type : 'category',
    					name : dataItem[0],
    					nameLocation : 'middle',
    					nameGap : 3,
    					splitLine : {
    						show : false
    					},
    					axisTick : {
    						show : false
    					},
    					axisLabel : {
    						show : false
    					},
    					axisLine : {
    						onZero : false,
    						lineStyle : {
    							color : '#666'
    						}
    					},
    					// data: xAxisCategory,
    					data : [ '早', '中', '晚' ],
    					z : 100
    				});
    				option.yAxis.push({
    					id : idx,
    					gridId : idx,
    					splitLine : {
    						show : false
    					},
    					axisTick : {
    						show : false
    					},
    					axisLabel : {
    						show : false
    					},
    					axisLine : {
    						show : false,
    						lineStyle : {
    							color : '#1C70B6'
    						}
    					},
    					splitLine : {
    						show : false
    					},
    					min : 0,
    					max : max1,
    					z : 100
    				});
    				option.grid.push({
    					id : idx,
    					width : 30,
    					height : 40,
    					left : coord[0] - 15,
    					top : coord[1] - 15,
    					z : 100
    				});
    				option.series.push({
    					id : idx,
    					type : 'bar',
    					xAxisId : idx,
    					yAxisId : idx,
    					barGap : 0,
    					barCategoryGap : 0,
    					// data: inflationData,
    					data : inflationData,
    					z : 100,
    					itemStyle : {
    						normal : {
    							color : function(params) {
    								// 柱状图每根柱子颜色
    								var colorList = [ 'red', 'green', 'yellow' ];
    								return colorList[params.dataIndex];
    							}
    						},
    						emphasis : {
    							label : {
    								show : false
    							}
    						}
    					}
    				});
    				 
    				
    			});
    			//console.time('a');
    			myChart.setOption(option);
    		//console.timeEnd('a');
    		}
    	
    		setTimeout(renderEachCity, 0);
    		// 缩放和拖拽
    		function throttle(fn, delay, debounce) {
    			var currCall;
    			var lastCall = 0;
    			var lastExec = 0;
    			var timer = null;
    			var diff;
    			var scope;
    			var args;
    	
    			delay = delay || 0;
    	
    			function exec() {
    				lastExec = (new Date()).getTime();
    				timer = null;
    				fn.apply(scope, args || []);
    			}
    	
    			var cb = function() {
    				currCall = (new Date()).getTime();
    				scope = this;
    				args = arguments;
    				diff = currCall - (debounce ? lastCall : lastExec) - delay;
    	
    				clearTimeout(timer);
    				if (debounce) {
    					timer = setTimeout(exec, delay);
    				}
    				else {
    					if (diff >= 0) {
    						exec();
    					}
    					else {
    						timer = setTimeout(exec, -diff);
    					}
    				}
    	
    				lastCall = currCall;
    			};
    	
    			return cb;
    		}
    	
    		var throttledRenderEachCity = throttle(renderEachCity, 0);
    		myChart.on('geoRoam', throttledRenderEachCity);
    		myChart.setOption(option);
    	
    		var divObj;
    		
    		// 点击显示柱状图
    		var index;
    		myChart.on('click', function(e) {
    			if (e.componentSubType == "bar") {//如果选中柱状图,再弹出
    			//多窗口模式,层叠置顶	
    			if(!divObj){
    				divObj = document.createElement('div');
    				divObj.id = 'zhuzhuang';
    				$(divObj).css({
    					'width' : 250,
    					'height' : 180
    				}).appendTo('.wrap');
    			}
    				
    			    zhuZhuangTu(e);
    			    
    			    var tanchuTitle;
    			    //看弹出的是哪个省,获取这个省份名
    			    for (i = 0; i < 34; i++) {
    					if (e.seriesIndex == i) {
    						tanchuTitle = rawData[i][0];
    					}
    				};
    			  
    			  //判断index是否存在,如果存在就不用open一个新的,直接更改原有的内容和标题就行
    			  if(!index){
    				  	index = layer.open({
    			        type: 1, 
    			        title: tanchuTitle,
    			        id:'lid1',
    			        anim: 1,
    			        //area: ['250px', '180px'],
    			        shade: 0,//遮罩
    			        content:$('#zhuzhuang'),
    			        //右上角关闭事件
    			        cancel: function(){ 
    	    			
    	    				$('#zhuzhuang').remove();
    	    				$('.layui-layer').remove();
    	    				divObj=null;
    	    				index=null;
    	  				}
    			      });
    			  }
    		      
    		      
    		      layer.title(tanchuTitle, index);//更改标题
    		      
    		      	//设置背景透明
    		        layer.style(index, {
    				   backgroundColor: 'rgba(255, 255, 255, 0.5)'
    				});
    			}
    		});
    		 /* if (e.componentSubType == "bar") {
    				// 先清除所有柱状图
    				$('.tongJiTu').remove();
    	
    				
    				// 创建遮挡层
    				//creatWrap();
    				// 创建柱状图容器
    				var divObj = document.createElement('div');
    				$(divObj).addClass('tongJiTu');
    				divObj.id = 'zhuzhuang';
    				var divX = getMousePos()['x'];
    				var divY = getMousePos()['y'];
    				$(divObj).css({
    					'width' : 250,
    					'height' : 180,
    					'border' : '1px solid #ccc',
    					'position' : 'absolute',
    					'top' : divY,
    					'left' : divX
    				}).appendTo('.wrap');
    				// 创建柱状图
    				zhuZhuangTu(e);
    				
    			
    				// 点击遮挡层消失
    				//clearWrap('.zhuzhuang');
    			} */ 
    		// 获取横纵坐标
    		function getMousePos(e) {
    			var e = event || window.event;
    			var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
    			var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    			var x = e.pageX || e.clientX + scrollX;
    			var y = e.pageY || e.clientY + scrollY;
    			// console.log(x,y)
    			return {
    				'x' : x,
    				'y' : y
    			};
    		}
    		// 点击弹出生成柱状图
    		function zhuZhuangTu(e) {
    			var zhuzhuang = echarts.init(document.getElementById('zhuzhuang'));
    			var option = {
    				backgroundColor : 'rgba(255,255,255,.5)',
    				legend : {
    					data : [ '早', '中', '晚' ]
    				},
    				xAxis : [
    					{
    						type : 'category',
    						data : [ '早', '中', '晚' ]
    					}
    				],
    				yAxis : [
    					{
    						splitLine : {
    							show : false
    						},
    						//type: 'value',
    						min : 0,
    						max : max1 + 20
    					}
    				],
    				series : [
    					{
    						type : 'bar',
    						itemStyle : {
    							normal : {
    								color : function(params) {
    									var colorList = [ '#F75D5D', '#59ED4F', 'yellow' ];
    									return colorList[params.dataIndex];
    								},
    								label : {
    									show : true,
    									position : 'top',
    									textStyle : {
    										color : '#000'
    									}
    								}
    							}
    						},
    						data : []
    					}
    				]
    			};
    			zhuzhuang.setOption(option);
    	
    			//实时获取后台数据,使每个省点击弹出的都是该省的数据
    			var op = zhuzhuang.getOption(); //getOption: 返回内部持有的当前显示option克隆
    			for (i = 0; i < 34; i++) {
    				if (e.seriesIndex == i) {
    					//alert(e.seriesIndex);
    					op.series[0].data.push(rawData[i][1]);
    					op.series[0].data.push(rawData[i][2]);
    					op.series[0].data.push(rawData[i][3]);
    				}
    				zhuzhuang.setOption(op, true);
    			};
    	
    		}
    		// 生成遮挡层
    		function creatWrap() {
    			var zheDang = document.createElement('div');
    			$(zheDang).addClass('zhedang').css({
    				width : '100%',
    				height : '100%',
    				position : 'absolute',
    				top : 0,
    				left : 0,
    				close : true,
    				backgroundColor : 'rgba(0,0,0,.2)'
    			}).appendTo('.wrap');
    		}
    		// 去掉遮挡层
    		function clearWrap(id) {
    			$(id).click(function(e) {
    				// console.log(this);
    				this.remove();
    				$('.zhuzhuang').remove();
    				return false;
    			});
    		}
    	});	
    		
    });
    	</script>
    </body>





    展开全文
  • 说到使用Python进行地理坐标可视化那就一定少不了Pyecharts的身影,本文就对Pyecharts可以制作的四种地图进行简单的评析。Pyecharts—Map首先介绍的是Pyecharts中使用最多的Map(),核心代码仅四行即可生成全国地图,...

    说到使用Python进行地理坐标可视化那就一定少不了Pyecharts的身影,本文就对Pyecharts可以制作的四种地图进行简单的评析。

    Pyecharts—Map

    首先介绍的是Pyecharts中使用最多的Map(),核心代码仅四行即可生成全国地图,来看下官方Demo

    from pyecharts import options as optsfrom pyecharts.charts import Mapfrom pyecharts.faker import Fakerc = (    Map()    .add("商家A", [list(z) for z in zip(Faker.provinces, Faker.values())], "china")    .set_global_opts(title_opts=opts.TitleOpts())    .render("map_base.html"))

    我们看下中间四行代码究竟做了什么:

    • .Map()创建了一个地图实例
    • .add()添加了数据,实际上zip()中就是两个list,一个是省份名称另一个是对应的数据
    • .set_global_opts()添加了标题
    • .render()将生成的地图以html格式保存

    所以这个最简单的地图长这样

    6e85fae8c9521fe4a108fc241c5c079a.png

    告诉我你对这张地图的第一感觉,除了丑就是不协调,主要就是因为下面三点:

    • 顶部的图例,怎么看怎么不爽
    • 有数据省份的红点,怎么看怎么不爽
    • 就在地图上给有数据的省份打了几个点,怎么看怎么不爽

    所以我在使用Map()的时候一般会对上面三点进行调整,还是一样的数据,代码可以这么写

    c = (    Map()    .add("", [list(z) for z in zip(Faker.provinces, Faker.values())], "china",is_map_symbol_show=False,)    .set_global_opts(title_opts=opts.TitleOpts(), visualmap_opts=opts.VisualMapOpts())    .render_notebook())
    baeeb430cfe683a1487906b26064c811.png

    这样看已经比刚开始的样子好了很多,虽然可以看出不同省份之间的差异,但是还是有一点让人不爽的就是大部分省份是没有值的,要是全国都有值就更好了

    798f2e896645f375cfd90b9a2b0a64f1.png

    所以Pyecharts中的Map更应该适合能将地图填满的数据,这样才能让图看上去更丰富,如果只有地图中小部分省市的数据还是来个柱状图更直观!

    Pyecharts—Geo

    我们先来看看Geo绘制出来的地图长啥样,还是刚刚的数据,代码也并不复杂

    from pyecharts import options as optsfrom pyecharts.charts import Geofrom pyecharts.faker import Fakerfrom pyecharts.globals import ChartTypec = (    Geo()    .add_schema(maptype="china")    .add(        "",        [list(z) for z in zip(Faker.provinces, Faker.values())],        type_=ChartType.HEATMAP,    )    .set_series_opts(label_opts=opts.LabelOpts(is_show=False))    .set_global_opts(        visualmap_opts=opts.VisualMapOpts(),        title_opts=opts.TitleOpts(),    ))c.render_notebook()
    b2b22e1ba7f69c283ccb6121c19395fc.png

    可以看到,Geo绘制出来的地图不会显示省份/城市的名字,并且用热力图的方式让数据差异更直观,而这恰好解决了Map不适用与小部分数据的短板。所以当数据量不是很多的时候又想绘制地图就可以考虑使用Geo并通过热力图的方法来展示。当然Geo还支持不同样式动态的流向地图(制作可以查阅相关文档)

    6160b594366c4ef9a87683108bb5a3fc.gif
    4f8a38411beda94f9e224d845d98f743.gif

    Pyecharts—Bmap

    Bmap就是百度地图,也是我经常用的一种。Pyecharts可以调用百度地图的接口来让地图更加丰富,比如还是之前的数据,我们使用Bmap来制作

    779e37bfcaaf3941615eb5cb2e9ebd6d.png

    正如上图展示的,使用Bmap绘制出来的地图更接近我们平时使用的地图,并支持缩放来查看更多细节而更加真实,不过使用Bmap之前需要去百度地图开放平台申请一个API KEY才能使用。

    5ff06383fc5020164a5acf34b50b423c.gif

    Pyecharts—Map3D

    上面三种地图都是2D的图形,Pyecharts也支持创建3d地图,比如下面的代码就能在3D地图上以柱状图来展示数据

    518efef821da9b7ab3b3d5b3c8ca792a.gif

    可以看到,3D地图会让数据更加立体的展示出来,不过虽然炫酷,但是要整理经纬度数据等需要消耗太多的时间,而且代码调整起来也比之前几种地图更加复杂,所以我并不是经常使用,偶尔花点时间用来点缀PPT也是可以的!

    结束语

    以上就是对Pyecharts可以制作四种地理图表的一个简单总结,我想你应该明白它们的区别并能在制作地图时选择合适的那一个,不过制作可视化地图并不只有Pyecharts,还需要根据自己的数据与环境选择合适的工具!

    展开全文
  • arcgis for flex 在地图上显示柱状图

    千次阅读 2014-05-13 18:15:56
    这一小节让我们去看一下如何使用专题图在地图上表现丰富的业务数据。 专题图主要通过InfoSymbol来实现,它可以显示和InfoWindow类似的符号。在InfoSymbol中放置比如饼图、柱状图等组件后,其对应的Graphic就可以被...

    这一小节让我们去看一下如何使用专题图在地图上表现丰富的业务数据。

    专题图主要通过InfoSymbol来实现,它可以显示和InfoWindow类似的符号。在InfoSymbol中放置比如饼图、柱状图等组件后,其对应的Graphic就可以被绘制成一个信息非常丰富的符号,同时,符号内的数据和Graphic的attributes是相关联的。

    下面首先看一下使用饼图的专题图效果:

    33        InfoSymbol实现的专题图效果

    以下是对应的源代码:

    <mx:Script>

    <![CDATA[     

            privatefunction init():void

            {     

                   var mp:MapPoint = new MapPoint( x, y );

                   var g:Graphic = new Graphic(mp);

                   g.attributes = new Object();

                  

                   var thematic:ArrayCollection = new ArrayCollection( [

                  { Country: "美国", Gold: goldA },

                  { Country: "中国", Gold: goldC },

                  { Country: "俄罗斯", Gold: goldR } ]);

     

                   g.attributes.thematic = thematic;

                   this.thematicLayer.add(g);

            }

    ]]>

    </mx:Script>

     

    <esri:InfoSymbol id="infoSymbol" infoPlacement="center">

    <esri:infoRenderer>

            <mx:Component>

                   <mx:PieChart id="chart"

    showDataTips="true" width="150" height="150"

    dataProvider="{data.thematic}">

                    <mx:series>

                        <mx:PieSeries field="Gold" displayName="资源占有率"

    nameField="Country"/>

                    </mx:series>

                   </mx:PieChart>

            </mx:Component>

    </esri:infoRenderer>

    </esri:InfoSymbol>

     

    <esri:Map>

        <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer"/>

        <esri:GraphicsLayer id="thematicLayer" symbol="{infoSymbol}" />

    </esri:Map>

    在这个例子里,我们在程序初始化的时候生成了一些带有统计信息的Graphic添加到地图上,这些Graphic对象的attributes属性中都带有一个thematic集合来保存各个统计的对象,每个统计的对象包含两个字段:Country表示国家,Gold表示资源占有率,下面我们会在InfoSymbol的定义中再次看到这两个字段。

    当定义好这些Graphic对象以后,我们就可以把它们添加到设置了InfoSymbol符号的GraphicLayer上了。在InfoSymbol的定义中,我们可以看到,在这个InfoSymbol中添加了一个饼图组件PieChart,这个饼图的dataProvider属性绑定的是{data.thematic},它代表的其实就是Graphic对象的attributes属性的thematic对象。你可以简单地这样认为:InfoSymbol中的data代表的就是其对应的Graphic对象的attributes属性。

    既然在InfoSymbol中可以获得Graphic的属性信息,那么根据Graphic的属性信息来绘制不同的专题图就是水到渠成的事情了,上面的代码就可以做出 33的效果来。

    展开全文
  • 正文共:783字12预计阅读时间:2分钟Excel数据可视化的工具比较多,之前介绍过函数、条件格式、...要实现数字地图显示数据必须有一个位置属性,这个属性可以是省份、城市、地址或经纬度坐标等。案例数据表数据说...

    正文共:783 字 12 图

    预计阅读时间: 2 分钟

    Excel数据可视化的工具比较多,之前介绍过函数、条件格式、数据图表和动态透视图。今天给大家分享如何用Excel三维地图做销售数据可视化,而且是动态展示呈现。本功能适合Excel 2016版本,其他版本需下载Power Map插件。

    要实现数字地图的显示数据必须有一个位置属性,这个属性可以是省份、城市、地址或经纬度坐标等。

    案例数据表

    c2d38799ef24cc11b6fcf2eea1be5674.png

    数据说明

    销售日期范围:2018-1-1到2018-8-31

    区域范围:涉及7个区域,13个省份,18个城市

    共746行销售记录

    1. 创建三维地图

    插入选项卡->三维地图->打开三维地图

    ac90cb96fb519096af5404afa0fa48a4.png

    全选数据,打开三维地图

    c71c407e95efd16eace1d286cca1e5d2.gif

    2. 设置地理数据字段

    把省份或城市字段添加到位置选项,销售金额添加到高度选项,销售日期添加到日期选项。

    505aa1060a4951eedd9ea32a3ea160ff.gif

    3. 更改图表显示状态

    默认不同地区的是柱状图显示,你也可以手动更改其他显示方式。比如热力图、扇形图等。

    8203ea6f10c1b5050c45b8849ba9dd76.gif

    4.设置分类

    可以添加不同类别字段,可以是产品或区域,从而图表会以不同颜色显示。

    区域作为分类,不同区域显示不同颜色,方便按位置查看。

    产品作为分类,每个省份会显示三种产品的图表,方便查看各产品占比情况。

    3f4e0b41f2453f0d8b593b28b374113e.gif

    5.平面地图与三维地图转换

    点击顶部的平面地图标签就可以实现平面地图与三维地图之间的转换了。

    ae28edeb11b11f7f0805f7d7afeea849.gif

    6.按时间动态显示

    三维地图可以按销售时间动态显示各区域销售金额增长情况。

    cddae5d5d1549456d769ddd78c846b2f.gif

    7. 创建视频

    如果动态效果要在其他软件平台中应用,可以创建视频

    caf513bf90be55b50780cc06f53be07e.png

    e51887d5f127a3e0a664a3720dcecaf0.png

    可以添加原声带配音说明的。

    三维地图还可以显示不同的场景页面,像PPT一样播放展示,如有兴趣可以进一步研究探索。

    精彩推荐

    ▼▼▼

    用Excel制作世界杯“德国VS墨西哥”技术指标对比图

    用Excel这两个工具,可以实现数据多维度动态透视

    Office 2016新增 6 种商务图表

    Excel数据可视化的六大工具

    87b4de48d0aa5435e7c47b991f77d293.png

    展开全文
  • 正文共:736 字 13 预计阅读时间:2 分钟Excel数据可视化的工具比较多,之前介绍过函数、条件格式、数据图表和...要实现数字地图显示数据必须有一个位置属性,这个属性可以是省份、城市、地址或经纬度坐标等。...
  • 最近有朋友有需求需要用echarts,在地图上显示柱状图,并添加点击事件,网上有demo,但是比较老,用原生html+js写的,并且是非组件性质,使用起来并不友好,故而,写了这个echarts组件 Git地址 配置文档: 在git地址...
  • 在各种各样的数据分析方法中,表格是我们最常见到且使用到的数据展现方式之一,当然,还有另外一种以全国地域维度展开的数据分析大部分都会倾向于选择用地图来展示,然后通过层层下钻的方式将各个省级市的数据映入...
  • 要实现数字地图显示数据必须有一个位置属性,这个属性可以是省份、城市、地址或经纬度坐标等。案例数据表1. 创建三维地图插入选项卡->三维地图->打开三维地图全选数据,打开三维地图2. 设置地理数据字段把...
  • Excel作为一款强大的数据处理办公应用...今天小雨给大家分享一个Excel的进阶技巧:用Excel制作三维立体地图效果,超详细制作过程,1分钟学会!先来看看效果演示:一个3D动态地球在慢慢旋转的过程中,各个城市对应...
  • 之前我们讲过极坐标散点图,不知道大家还有...极坐标柱状图则是将柱形条显示在极坐标中,其不仅保留了直角坐标系中数据变化趋势的优点,而且图形表达形式也更加美观。N=20theta=np.linspace(0.0,2*np.pi,N,endpoint...
  • 环境介绍 Openlayers ol.js v5.3.0 Highcharts highcharts.js v7.0.1 ...显示效果 ...地图放大缩小对统计的大小无影响 以饼状为例 1、添加地图,并渲染统计所在的点位, vect...
  • 环境介绍Openlayersol.jsv5.3.0Highchartshighcharts.jsv7.0.1jqueryjquery-3.3.1.jsv3.3.1显示效果地图放大缩小对统计的大小无影响以饼状为例1、添加地图,并渲染统计所在的点位,vector是渲染feature需要用...
  • 在网上百度了很多相关文章,最终都无疾而终,只能硬着头皮自己摸索,好在功夫不负有心人,最终还是实现了在地图上,鼠标放上点位,显示对应的柱状图信息 HTML <div id="map" ref="mapRef"></div> ...
  • name: item0,//地图上图表X轴的名字是否显示 nameTextStyle: { color: '#FFFFFF' }, nameLocation: 'middle', nameGap: 3, splitLine: { show: false }, axisTick: { show: false }, axisLabel: { ...
  • 1、echarts地图上绘制堆叠柱状图 1、js import echarts from 'echarts' function initMap(myChart, region, geoCoordMap, rawData) { myChart.showLoading() // 市区坐标 let option = { tooltip: { ...
  • 最近要用ECharts做一个图,要求是右边用柱状图根据数量排名展示,左边是地图,不同省份区域根据数量不同,颜色深浅不同,数量越多颜色越深。排名前五的省份需要带涟漪动画的散点图,用气泡散点图显示各个省份数量,...
  • 几个项目都快做完了才想起来要总结,可惜了之前遇到的问题,总结积累下经验 1.Echarts实现隐藏x轴,y轴,刻度线,网格 2.Echarts 柱状图 固定柱宽和最大宽度的设置 3.echarts中如何在柱状图上方显示文字 ...
  • 最近要用ECharts做一个图,要求是右边用柱状图根据数量排名展示,左边是地图,不同省份区域根据数量不同,颜色深浅不同,数量越多颜色越深。排名前五的省份需要带涟漪动画的散点图,用气泡散点图显示各个省份数量,...
  • 地图上显示报表我认为目前一般有几种方法(这个见仁见智),下面介绍三种(最后一种是绝对原创)。第一种是Esri公司的韩源萌提供的一个库,百度文库地址是http://wenku.baidu.com/view/674671cca1c7aa00b52acb39.html...
  •  显示效果:下方时间轴,左边柱状图,右边雷达图进行联动。右图例与柱状图和雷达图进行联动,时间轴自动循环播放,有暂停启动按钮。  实现的核心代码已经上传至Echarts Gallery,地址:...
  • 地图上显示图表 1. 制作图表 加载甘肃行政区划数据。 打开数据的属性表,可以看到有面积、人口、GDP、土地利用等字段。 点击【表选项】下拉菜单,点击【创建图表】。 在创建图表向导中进行如下设置,完成后...
  • 在实现可视化显示数据分布的时候,使用了Echarts和百度地图结合的方式,在百度地图上利用了Echarts的散点图显示在百度地图上,然后想将一些其他数据的分析放在地图的左下角进行显示。 在这里,我设定了几个div,...
  • 最近公司给我一个任务,就是利用arcgis api for flex实现在地图上点(业务数据)直接显示饼状图以及柱状图的专题图制作,而不是通过点击点显示气泡窗口的形式来实现,这个公司已经实现了。 经过一段时间的摸索,...
  • 前言本来想写echarts初始化函数的,但最近因为要写一个地图与柱状图的混合方式,也就是每个省的地图上要有柱状图显示。于是仔细使用了一下地图。1、地图的一些基本属性就不介绍了,还是那些style2、地图数据的获取...
  • *** 前言:在做项目中需要制作一个场景是左边是柱状图,右边是地图,地图上悬浮一个按钮可以切换echarts地图和百度地图。*** 功能: 在点击左边柱状图其中的一条的时候再右边地图显示一些标记的点 echarts地图在...
  • 前言本来想写echarts初始化函数的,但最近因为要写一个地图与柱状图的混合方式,也就是每个省的地图上要有柱状图显示。于是仔细使用了一下地图。1、地图的一些基本属性就不介绍了,还是那些style2、地图数据的获取...

空空如也

空空如也

1 2 3 4 5
收藏数 89
精华内容 35
关键字:

地图上显示柱状图