adopt echarts-gl Visual display 2020GDP data
effect ：
3d Maps are more popular than two-dimensional because they can rotate at will ,echarts All kinds of documents are complete , Although the configuration is a little cumbersome , But it also shows that people have rich functions , It's good to study hard
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)
// Get the longitude and latitude center of each province
const proviceCenter = new Map()
china.features.forEach((provice) => {
proviceCenter.set(provice.properties.name, provice.properties.center)
})
// Merge data
const barData = gdp.map((item) => {
return {
name: item.name,
value: [...proviceCenter.get(item.name), item.value]
}
})
// Registration map
echarts.registerMap('china', china)
const map = echarts.init(document.getElementById('chart'))
const option = {
title: {
text: '2020 Provinces in GDP',
left: 'center',
top: 45
},
visualMap: {
show: false,
min: 2000,
max: 120000,
inRange: {
color: ['#666', 'red']
}
},
geo3D: {
map: 'china',
// Area boundary height
regionHeight: 5,
// Realistic rendering
shading: 'realistic',
// Set up a platform for the map
groundPlane: {
show: true,
color: '#666'
},
// realisticMaterial: {
// detailTexture: './earth.jpg'
// },
// Perspective control
viewControl: {
projection: 'perspective',
// distance
distance: 80,
// angle
alpha: 30,
beta: 1,
animationDurationUpdate: 10,
autoRotate: false,
minBeta: -360,
maxBeta: 360
},
// The light
light: {
main: {
// color: '#687',
intensity: 1.2, // Light intensity
shadowQuality: 'high', // Shadow brightness
shadow: true, // Show shadows
alpha: 45,
beta: -25
},
ambientCubemap: {
diffuseIntensity: 1.2,
// Light source material
texture: './light.png'
}
},
// Block color and border setting
itemStyle: {
borderColor: '#489',
borderWidth: .5,
color: '#888'
},
// hover Time style
emphasis: {
label: {
show: false
},
itemStyle: {
// color: 'transparent',
color: '#888'
}
}
},
series: {
type: 'bar3D',
coordinateSystem: 'geo3D',
// Chamfer size
bevelSize: 0.5,
bevelSmoothness: 20,
data: barData,
minHeight: 0.2,
barSize: .5,
emphasis: {
label: {
show: true,
formatter: (param) => {
return param.name + ' : ' + param.value[2] + ' Trillion yuan '
},
distance: 1,
textStyle: {
fontWeight: 'bold',
fontSize: 18,
}
},
},
animation: true,
animationDurationUpdate: 2000
}
}
map.setOption(option)
}
}
Complete code github