可视化例子(3)——geo3D-bar3D(3D地图柱状图)

一、效果图

二、数据格式

数据以“[[经度，纬度，柱子高度],[经度，纬度，柱子高度],[经度，纬度，柱子高度]...]”这样的形式存储在Json文件中，通过Filter函数存储到 data 里面：

$.getJSON('./data/population.json', function (data) {data = data.filter(function (dataItem) {return dataItem[2] > 0;}).map(function (dataItem) {return [dataItem[0], dataItem[1], dataItem[2]];});
});

三、完整代码

<!doctype html>
<html><head><meta charset="utf-8"><title>geo3D-地图柱状图(漂亮)</title><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><meta name="apple-mobile-web-app-capable" content="yes"> <!-- Fullscreen Landscape on iOS --><link rel="stylesheet" href="./common.css"></head><body><div id="main"></div><script src="../node_modules/echarts/dist/echarts.js"></script><script src="../node_modules/echarts/map/js/world.js"></script><script src="../dist/echarts-gl.js"></script><script src="lib/jquery.min.js"></script><script src="js/commonUI.js"></script><script>var chart = echarts.init(document.getElementById('main'));$.getJSON('./data/population.json', function (data) {data = data.filter(function (dataItem) {return dataItem[2] > 0;}).map(function (dataItem) {return [dataItem[0], dataItem[1], Math.sqrt(dataItem[2])];});chart.setOption({backgroundColor: '#cdcfd5',toolbox: {feature: {saveAsImage: {}}},geo3D: {map: 'world',shading: 'lambert',light: {main: {intensity: 3,shadow: true,shadowQuality: 'high',alpha: 30},ambient: {intensity: 0},ambientCubemap: {texture: 'asset/canyon.hdr',exposure: 2,diffuseIntensity: 1}},viewControl: {distance: 50},groundPlane: {show: true,color: '#999'},postEffect: {enable: true,screenSpaceAmbientOcclusion: {radius: 1,intensity: 1,enable: true,quality: 'high'},depthOfField: {enable: false,focalRange: 10,blurRadius: 10,fstop: 1}},temporalSuperSampling: {enable: true},itemStyle: {}},visualMap: {max: 40,calculable: true,realtime: false,inRange: {color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']},outOfRange: {colorAlpha: 0}},series: [{type: 'bar3D',coordinateSystem: 'geo3D',shading: 'lambert',data: data,barSize: 0.1,minHeight: 0.2,silent: true,itemStyle: {color: 'orange'}}]});});window.addEventListener('resize', function () {chart.resize();});</script></body>
</html>

可视化例子(3)——geo3D-bar3D(3D地图柱状图)相关推荐

Pandas+Pyecharts 数据分析与可视化 3D地图+柱状图
数据格式手机信令数据,可依据sid判断用户,lon和lat对应位置的经纬度信息,还有时间和地区街道等信息数据预处理首先读取数据,按列选取需要用到的数据,并清洗数据. data = pd.read ...
你的可视化项目需要一张3D地图吗？这里有多种风格的炫酷三维地图一键下载即可开始使用
如果你需要一张3D地图作为可视化项目的素材,那么本文强烈推荐这款数据可视化大屏软件--山海鲸可视化. 接下来让我们看看山海鲸可视化有何独到之处. 丰富的大屏模板即使你是一个彻头彻尾的新手,使用山海鲸 ...
【threejs】可视化大屏酷炫3D地图附源码
目录效果如下: 1. 前言: 2. 使用: 1.修改整体的背景图可以使用颜色或用贴图改材质编辑方法: 2. 取消地图上柱状图显示 3.更换地图.更换省份.市 4.修改相机的视角,页面展示的远近角 ...
html Antv L7 + mapbox 实现3D地图 3D中国地图不限于中国地图
echarts的3D地图实在太丑了,还一堆bug 使用阿里的Antv可视化库L7,实现3D地图,底图是mapbox 参考示例:https://l7.antv.antgroup.com/zh/examp ...
【3d地图】vue3.0中使用echarts geo3D
文章目录前言一.echarts是什么? 二.使用步骤 1.引入echarts库,3d地图必须安装echarts-gl依赖 2.制作地图JSON文件 3.引入到vue组件中总结前言之前我们已经 ...
【3d地图】vue中使用echarts geo3D
文章目录前言一.echarts是什么? 二.使用步骤 1.引入echarts库,3d地图必须安装echarts-gl依赖 2.制作地图JSON文件 2.1 制作自己的json 3.引入到vue组件 ...
echarts——实现3D地图+3D柱状图效果——粗糙代码记录——技能提升
最近看到同事在弄下面的这个图,这个图是从网上看到的,是某个网站的收费项目: 收费模板:￥29.9元购买,且必须是高级版+尊享版才能够购买这个... 死贵!!! 所以,最后的决定是通过echarts中的 ...
echarts + echarts-gl - 使用geo3d + map3d + scatter3D做3d地图
echarts + echarts-gl - 使用geo3D + map3D + scatter3D做3d地图一.使用插件 echarts@5.2.2.echarts-gl@2.0.8.jquery ...
可视化 | Python制作最炫3D可视化地图
文章目录 1. 环境安装 1.1 安装 pyecharts 1.2 安装地图扩展包 2. 广东省3D地图 3. 北京市3D地图 4. 中国3D地图-行政区 5. 中国3D地图-数据可视化大家好,我是 ...

可视化例子(3)——geo3D-bar3D(3D地图柱状图)

可视化例子(3)——geo3D-bar3D(3D地图柱状图)相关推荐

最新文章

热门文章