通过 echarts-gl 可视化展现 2020GDP 数据
成果:
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
演示页面