echarts + vue 实现人口热力图显示,包含数据结构
<!-- 热力图 -->
<template>
<div id="myChart" style="width:1500px;height:700px"></div>
</template>
<script>
import echarts from 'echarts'
import 'echarts/map/js/china'
import mapJson from '@/store/json/xuzhou.json'
export default {
props: {
cityConfig: {
type: Object,
default () {
return {
name: '徐州市',
dataJson: mapJson
}
}
}
},
data () {
return {
data: [
{name: '沛县', value: 150},
{name: '泉山区', value: 42},
{name: '铜山区', value: 102},
{name: '鼓楼区', value: 81}
],
toolTipData: [
{name: '沛县', value: [{name: '农村人口', value: 10}, {name: '城市人口', value: 10}]},
{name: '泉山区', value: [{name: '农村人口', value: 22}, {name: '城市人口', value: 20}]},
{name: '铜山区', value: [{name: '农村人口', value: 60}, {name: '城市人口', value: 42}]},
{name: '鼓楼区', value: [{name: '农村人口', value: 40}, {name: '城市人口', value: 41}]}
]
}
},
components: {},
created () {
},
mounted () {
this.init()
},
computed: {},
methods: {
loadMap (mapName, data) {
if (data) {
echarts.registerMap(mapName, data)
}
},
init () {
var myChart = echarts.init(document.getElementById('myChart'))
if (this.cityConfig.dataJson) {
this.loadMap(this.cityConfig.name, this.cityConfig.dataJson)
}
var mapName = '徐州'
var geoCoordMap = {}
/* 获取地图数据 */
myChart.showLoading()
var mapFeatures = this.cityConfig.dataJson.features
myChart.hideLoading()``
mapFeatures.forEach(function (v) {
// 地区名称
var name = v.properties.name
// 地区经纬度
geoCoordMap[name] = v.properties.center
})
var max = 480,
min = 9 // todo
var maxSize4Pin = 100,
minSize4Pin = 20
var convertData = function (data) {
var res = []
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name]
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
})
}
}
return res
}
var option = {
tooltip: {
trigger: 'item',
formatter: (params) => {
if (typeof (params.value)[2] === 'undefined') {
var toolTiphtml = ''
for (var i = 0; i < this.toolTipData.length; i++) {
if (params.name == this.toolTipData[i].name) {
toolTiphtml += this.toolTipData[i].name + ':<br>'
for (var j = 0; j < this.toolTipData[i].value.length; j++) {
toolTiphtml += this.toolTipData[i].value[j].name + ':' + this.toolTipData[i].value[j].value + '<br>'
}
}
}
return toolTiphtml
} else {
var toolTiphtml = ''
for (var i = 0; i < this.toolTipData.length; i++) {
if (params.name == this.toolTipData[i].name) {
toolTiphtml += this.toolTipData[i].name + ':<br>'
for (var j = 0; j < this.toolTipData[i].value.length; j++) {
toolTiphtml += this.toolTipData[i].value[j].name + ':' + this.toolTipData[i].value[j].value + '<br>'
}
}
}
return toolTiphtml
}
}
},
// legend: {
// orient: 'vertical',
// y: 'bottom',
// x: 'right',
// data: ['credit_pm2.5'],
// textStyle: {
// color: '#fff'
// }
// },
visualMap: {
show: true,
min: 0,
max: 200,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 文本,默认为数值文本
calculable: true,
seriesIndex: [1],
inRange: {
color: ['#00467F', '#A5CC82'] // 蓝绿
}
},
geo: {
show: true,
map: mapName,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
roam: true,
itemStyle: { // 设置地图块的相关显示信息
normal: {
areaColor: '#d1def3',
borderColor: '#b4caef',
borderWidth: 1
},
emphasis: {
areaColor: '#9abfff' // hover效果
}
}
},
series: [{
name: '散点',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(this.data),
symbolSize: function (val) {
return val[2] / 10
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#05C3F9'
}
}
},
{
type: 'map',
map: mapName,
geoIndex: 0,
aspectScale: 0.75, // 长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: true
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077'
},
emphasis: {
areaColor: '#2B91B7'
}
},
animation: false,
data: this.data
},
{
name: '点',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin', // 气泡
symbolSize: function (val) {
var a = (maxSize4Pin - minSize4Pin) / (max - min)
var b = minSize4Pin - a * min
b = maxSize4Pin - a * max
return a * val[2] + b
},
label: {
normal: {
show: true,
textStyle: {
color: '#fff',
fontSize: 9
},
formatter: '{@[2]}'
}
},
itemStyle: {
normal: {
color: '#F62157' // 标志颜色
}
},
zlevel: 6,
data: convertData(this.data)
},
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(this.data.sort(function (a, b) {
return b.value - a.value
}).slice(0, 5)),
symbolSize: function (val) {
return val[2] / 10
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: 'yellow',
shadowBlur: 10,
shadowColor: 'yellow'
}
},
zlevel: 1
}
]
}
myChart.setOption(option)
window.addEventListener('resize', () => {
myChart.resize()
})
}
}
}
</script>
<style scoped lang="scss">
</style>