3D地图柱形图

╰+哭是因爲堅強的太久メ 2022-05-10 14:24 356阅读 0赞

3D地图柱形图  
以地图为根本，结合柱形图展现3D地图上的柱形图，其中数据格式是包括地区名称，地区经纬度和值。  
具体代码如下`：`const option = \{  
tooltip: \{  
formatter: ‘\{b\}:\{c\}’  
\},  
visualMap: \{  
type: ‘continuous’,  
seriesIndex: 0,  
text: \[‘bar3D’\],  
calculable: true,  
max: 50,  
inRange: \{  
color: \[’\#87aa66’, ‘\#eba438’, ‘\#d94d4c’, ‘\#ff0000’\]  
\},  
textStyle: \{  
color: ‘\#fff’  
\}  
\},  
geo3D: \{  
map: ‘china’,  
roam: false,  
label: \{  
show: true,  
\},  
itemStyle: \{  
color: ‘\#C4C4C4’,  
\},  
emphasis: \{  
label: \{  
show: true,  
distance: 2,  
\}  
\},  
regions: \[  
\{  
name: ‘中国’,  
label: \{  
show: true  
\},  
itemStyle: \{  
borderWidth: 5,  
borderColor: ‘\#7FFFD4’,  
\}  
\}  
\],  
light: \{  
main: \{  
color: ‘\#fff’,  
intensity: 1.2,  
shadow: true,  
alpha: 55,  
beta: 10,  
\}  
\}  
\},  
series: \[  
\{  
type: ‘bar3D’,  
coordinateSystem: ‘geo3D’,  
symbolSize: 15,  
data: data  
\}  
\]  
\};  
其中3D地图是在geo3D中设置的，map：‘china’，3D柱形图是在series中设置的，配置项可以参照官网，[Echarts4官网链接][Echarts4]  
data数据的格式\[\{name:‘北京’,value:\[‘精度’,‘纬度’,‘柱子值’\]\},\{…\}\]，如果想给柱子设置颜色，可以加一个VisualMap，根据数值大小改变柱子颜色。

[Echarts4]: http://www.echartsjs.com/option-gl.html#globe

发表评论取消回复

表情：

评论列表（有 0 条评论，356人围观）

还没有评论，来说两句吧...

相关阅读

相关 Echarts-柱形图

var clyyqst =\{ initAction:function()\{ /\$('.menuItem').removeClass('menuSelected')

灰太狼/ 2023年10月17日 17:57/ 0 赞/ 26 阅读

相关柱形图和盒图

1. 读取数据 import pandas as pd import matplotlib.pyplot as plt

电玩女神/ 2023年06月20日 06:05/ 0 赞/ 32 阅读

相关绘制3D Echarts地图饼图堆叠柱状图

绘制3D Echarts 目前在项目中遇到过的3D echarts为： 1.3D饼图(圆环图) 2.3D区域地图 3.3D堆叠柱状图。 ![先上效果-地图

冷不防/ 2022年12月27日 14:14/ 0 赞/ 474 阅读

相关 Echart 基于maptalks3D地图实现3D柱状图

例子来源[ECharts Gallery - 上海居民活动点分布可视化 (makeapie.com)][ECharts Gallery - _ _makeapie.com]

深藏阁楼爱情的钟/ 2022年12月25日 00:54/ 0 赞/ 290 阅读

相关 D3.js-柱形图

柱形图，是使用柱形的长短来表示数据变化的图表，也是最简单的图表之一。一般情况下，柱形图包括：矩形、坐标轴和文字。一、矩形和文字定义一个数组，每个数据项表示矩形

梦里梦外;/ 2022年07月16日 10:57/ 0 赞/ 274 阅读

相关 JFreeChart 柱形图

在这里简单的讲解一下Java中JFreeChart报表查询用的比较多用：[JFreeChart 3D饼图][JFreeChart 3D] [JFreeChart 折线

小鱼儿/ 2022年07月16日 09:55/ 0 赞/ 250 阅读

相关 Amchart 3D柱形图一柱多值

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style>

叁歲伎倆/ 2022年05月31日 08:22/ 0 赞/ 296 阅读

相关 Amchart 3D横向柱形图

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

阳光穿透心脏的1/2处/ 2022年05月31日 08:21/ 0 赞/ 253 阅读

相关 3D地图柱形图

3D地图柱形图以地图为根本，结合柱形图展现3D地图上的柱形图，其中数据格式是包括地区名称，地区经纬度和值。具体代码如下`：`const option = \{

╰+哭是因爲堅強的太久メ/ 2022年05月10日 14:24/ 0 赞/ 357 阅读

相关 Echarts之柱形图

需要引入 <script src="js/jquery.js"></script> <script src="js/echarts.js"></script>

冷不防/ 2021年09月17日 05:28/ 0 赞/ 445 阅读