<template>
<div id="map" ref="map" style="width: 100%;height: 780px;"></div>
</template>
<script>
import echarts from 'echarts'
export default {
methods:{
mapmooudel(num=1) {
let mydata=[{
name: "39284\n杭州市",
value: [119.468907, 29.9003106, 39284, "1~4名"],
city: '杭州市',
num: '39284'
},
{
name: "2445\n台州市",
value: [121.008, 28.90222, 2445, "1~4名"],
city: '台州市',
num: '2445'
},
{
name: "22142\n温州市",
value: [120.4444, 27.9, 22142, "1~4名"],
city: '温州市',
num: '22142'
},
{
name: "2445\n舟山市",
value: [122.1377, 30.05805, 2445, "1~4名"],
city: '舟山市',
num: '2445'
},
{
name: "11916\n嘉兴市",
value: [120.7561, 30.63832, 11916, "5~8名"],
city: '嘉兴市',
num: '11916'
},
{
name: "13325\n湖州市",
value: [119.8678, 30.74452, 13325, "5~8名"],
city: '湖州市',
num: '13325'
},
{
name: "17081\n绍兴市",
value: [120.6354, 29.73544, 17081, "5~8名"],
city: '绍兴市',
num: '17081'
},
{
name: "28034\n金华市",
value: [119.9509, 29.1183, 28034, "5~8名"],
city: '金华市',
num: '28034'
},
{
name: "12876\n丽水市",
value: [119.5106, 28.19943, 12876, "9~11名"],
city: '丽水市',
num: '12876'
},
{
name: "13189\n衢州市",
value: [118.57263, 28.93455, 13189, "9~11名"],
city: '衢州市',
num: '13189'
},
{
name: "18906\n宁波市",
value: [121.4619, 29.73276, 18906, "9~11名"],
city: '宁波市',
num: '18906'
}
]
let color = num === 0?'#08f0e7':'#ffc700'
let map = echarts.init(this.$refs.map)
let option = {
timeline: {
show: false
},
baseOption: {
geo: {
map: '浙江',
aspectScale: 1,
zoom: 1.5,
left: '21%',
right: '19%',
z: 15,
label: {
emphasis: {
show: false
}
},
type: 'map',
mapType: '浙江',
itemStyle: {
normal: {
borderColor: 'rgba(25, 148, 255, 0.9)',
borderWidth: 1,
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: 'rgba(25, 148, 255, 0)'
},
{
offset: 1,
color: 'rgba(25, 148, 255, 0.6)'
}
],
globalCoord: false
},
shadowColor: 'rgba(5, 27, 74, 0.9)',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 6
},
emphasis: {
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: 'rgba(56, 155, 183, 0)'
},
{
offset: 1,
color: 'rgba(56, 155, 183,1)'
}
],
globalCoord: false
},
borderWidth: 0
}
}
}
},
options: [
{
backgroundColor: '',
title: [
{
show: false
}
],
xAxis: {
show: false
},
yAxis: {
show: false
},
series: [
{
name: 'light',
type: 'scatter',
coordinateSystem: 'geo',
data: mydata,
zlevel: 3,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true,
fontSize: '20',
distance:20,
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color:color,
fontWeight: 'bold'
}
},
symbolSize: function() {
return 20
}
},
{
type: 'map',
map: '浙江',
geoIndex: 0,
aspectScale: 1,
showLegendSymbol: false,
label: {
normal: {
show: false
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#FFFFFF'
},
emphasis: {
areaColor: '#2B91B7'
}
},
animation: false,
data: [mydata]
},
{
type: 'effectScatter',
coordinateSystem: 'geo',
data: mydata
.sort(function(a, b) {
return b.num - a.num
})
.slice(0, 4),
symbolSize: 40,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {},
itemStyle: {
normal: {
color:color,
shadowBlur: 0,
shadowColor: color
}
},
zlevel: 1
}
]
}
]
}
map.setOption(option)
},
},
mounted() {
this.mapmooudel(0)
},
}
</script>
echarts map地图
最新推荐文章于 2024-07-31 11:13:21 发布