地图
作者：互联网
<template>
<div class="map" ref="chart"></div>
</template>
<script>
//引入中国地图的数据
import 'echarts/map/js/china'
//经纬度
import geoCoordMap from '../china'
export default {
props: {
mapData: Array
},
data() {
return {
}
},
watch: {
mapData: {
handler(data) {
this.setData(data)
},
deep: true
}
},
mounted() {
this.init()
},
methods: {
init() {
this.$nextTick(() => {
this.myEcharts = this.$echarts.init(this.$refs.chart)
this.setData()
})
},
convertData(data) {
const res = []
if (data) {
const geoCoordMapData = geoCoordMap.geoCoordMap
for (let i = 0; i < data.length; i++) {
const geoCoord = geoCoordMapData[data[i].name]
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
value1: data[i].value
})
}
}
}
return res
},
// 配置
setData(data) {
this.myEcharts.setOption({
title: {
text: '线索分布统计',
left: 'center',
textStyle: {
color: '#000'
}
},
tooltip: {
trigger: 'item'
},
geo: {
map: 'china',
center: [104.114129, 37.550339],
zoom: 1.1,
roam: false,
itemStyle: {
areaColor: '#004883cc',
borderColor: '#009ed6',
borderWidth: 1
},
emphasis: {
itemStyle: {
areaColor: '#ff9238'
}
}
},
series: [
{
name: '线索量',
type: 'effectScatter',
coordinateSystem: 'geo',
data: this.convertData(data),
symbolSize: 20,
showEffectOn: 'emphasis',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
formatter: '{b}',
position: 'right',
show: true
},
itemStyle: {
color: '#ffc89f',
shadowBlur: 10,
shadowColor: '#ffe9d9'
},
zlevel: 1,
tooltip: {
formatter (params) {
return `<div style="windth:200px"><span>${params.seriesName}:</span><br/><span>${params.name}: ${params.value[2]}</span></div>`
}
}
}
]
})
}
}
}
</script>
<style lang="less" scoped>
.map{
width: 100%;
height: 420px;
}
</style>
标签：const,mapData,地图,init,params,geoCoordMap,data 来源： https://www.cnblogs.com/xiaoxiaocheng/p/12195964.html