echarts-gl 3D 地图柱状图可视化GDP

思吾谓何思 2021-02-23 17:03:59
地图 Echarts 柱状图 gl echarts-gl


通过echarts-gl 可视化展示2020GDP 数据

效果:

b809832cad97e70c7ff748c99ba1efe.png

3d地图和二维比起来可以随心所欲的旋转自然更受欢迎,echarts 各类文档齐全,虽然配置略显繁琐,但这也说明人家功能丰富啊,精研一下不亏

import { gdp } from './data.js'
const xhr = new XMLHttpRequest()
xhr.open('GET', './china.json', true)
xhr.send()
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
const china = JSON.parse(xhr.responseText)
// 获取各省经纬度中心点
const proviceCenter = new Map()
china.features.forEach((provice) => {
proviceCenter.set(provice.properties.name, provice.properties.center)
})
// 合并数据
const barData = gdp.map((item) => {
return {
name: item.name,
value: [...proviceCenter.get(item.name), item.value]
}
})
// 注册地图
echarts.registerMap('china', china)
const map = echarts.init(document.getElementById('chart'))
const option = {
title: {
text: '2020年各省GDP',
left: 'center',
top: 45
},
visualMap: {
show: false,
min: 2000,
max: 120000,
inRange: {
color: ['#666', 'red']
}
},
geo3D: {
map: 'china',
// 区域边界高度
regionHeight: 5,
// 真实感渲染
shading: 'realistic',
// 将地图设置一个摆放平台
groundPlane: {
show: true,
color: '#666'
},
// realisticMaterial: {
// detailTexture: './earth.jpg'
// },
// 视角控制
viewControl: {
projection: 'perspective',
// 距离
distance: 80,
// 角度
alpha: 30,
beta: 1,
animationDurationUpdate: 10,
autoRotate: false,
minBeta: -360,
maxBeta: 360
},
// 灯光
light: {
main: {
// color: '#687',
intensity: 1.2, // 光照强度
shadowQuality: 'high', // 阴影亮度
shadow: true, // 是否显示阴影
alpha: 45,
beta: -25
},
ambientCubemap: {
diffuseIntensity: 1.2,
// 光源材质
texture: './light.png'
}
},
// 区块颜色及边线设置
itemStyle: {
borderColor: '#489',
borderWidth: .5,
color: '#888'
},
// hover时样式
emphasis: {
label: {
show: false
},
itemStyle: {
// color: 'transparent',
color: '#888'
}
}
},
series: {
type: 'bar3D',
coordinateSystem: 'geo3D',
// 倒角尺寸
bevelSize: 0.5,
bevelSmoothness: 20,
data: barData,
minHeight: 0.2,
barSize: .5,
emphasis: {
label: {
show: true,
formatter: (param) => {
return param.name + ' : ' + param.value[2] + '万亿元'
},
distance: 1,
textStyle: {
fontWeight: 'bold',
fontSize: 18,
}
},
},
animation: true,
animationDurationUpdate: 2000
}
}
map.setOption(option)
}
}

完整代码 github

演示页面

版权声明
本文为[思吾谓何思]所创,转载请带上原文链接,感谢
https://segmentfault.com/a/1190000039263649

  1. k8s-prometheus
  2. Linux Disk Command
  3. Linux FS
  4. 使用docker-compose &WordPress建站
  5. Linux Command
  6. This time, thoroughly grasp the depth of JavaScript copy
  7. Linux Disk Command
  8. Linux FS
  9. Using docker compose & WordPress to build a website
  10. Linux Command
  11. 摊牌了,我 HTTP 功底贼好!
  12. shiro 报 Submitted credentials for token
  13. It's a showdown. I'm good at it!
  14. Shiro submitted credentials for token
  15. Linux Stress test
  16. Linux Root Disk Extension
  17. Linux Stress test
  18. Linux Root Disk Extension
  19. Redis高级客户端Lettuce详解
  20. springboot学习-综合运用(一)
  21. 忘记云服务器上MySQL数据库的root密码时如何重置密码?
  22. Detailed explanation of lettuce, an advanced client of redis
  23. Springboot learning integrated application (1)
  24. Linux File Recover
  25. Linux-Security
  26. How to reset the password when you forget the root password of MySQL database on the cloud server?
  27. Linux File Recover
  28. Linux-Security
  29. LiteOS:盘点那些重要的数据结构
  30. Linux Memory
  31. Liteos: inventory those important data structures
  32. Linux Memory
  33. 手把手教你使用IDEA2020创建SpringBoot项目
  34. Hand in hand to teach you how to create a springboot project with idea2020
  35. spring boot 整合swagger2生成API文档
  36. Spring boot integrates swagger2 to generate API documents
  37. linux操作系统重启后 解决nginx的pid消失问题
  38. Solve the problem of nginx PID disappearing after Linux operating system restart
  39. JAVA版本号含义
  40. The meaning of java version number
  41. 开源办公开发平台丨Mysql5.7两套四节点主从结构环境搭建教程(二)
  42. 开源办公开发平台丨Mysql5.7两套四节点主从结构环境搭建教程(一)
  43. Open source office development platform mysql5.7 two sets of four node master-slave structure environment building tutorial (2)
  44. HTTP的“无状态”和REST的“状态转换”
  45. Open source office development platform mysql5.7 two sets of four node master-slave structure environment building tutorial (1)
  46. 【大数据哔哔集20210128】使用Hive计算环比和同比
  47. 【大数据哔哔集20210125】Kafka将逐步弃用对zookeeper的依赖
  48. 【大数据哔哔集20210124】有人问我Kafka Leader选举?我真没慌
  49. 【大数据哔哔集20210123】别问,问就是Kafka高可靠
  50. Spring 事务、异步和循环依赖有什么关系?
  51. Spring 动态代理时是如何解决循环依赖的?为什么要使用三级缓存?
  52. "Stateless" of HTTP and "state transition" of rest
  53. [big data bibiji 20210128] use hive to calculate month on month and year on year
  54. [big data bibiji 20210125] Kafka will gradually abandon its dependence on zookeeper
  55. [big data beeps 20210124] someone asked me about Kafka leader election? I'm not in a panic
  56. [big data bibiji 20210123] don't ask, ask is Kafka highly reliable
  57. jQuery Gantt Package 在Visual Studio中创建一个新的ASP.NET项目
  58. What is the relationship between spring transactions, asynchrony, and circular dependencies?
  59. How to solve circular dependency in spring dynamic proxy? Why use level 3 caching?
  60. Unicode码的二进制转换(Java)