<div ref="mapchart" style="width:100%;height:100%">
import echarts from 'echarts'
import '地点.js'
option: {
tooltip: {
trigger: 'item',
textAlign: 'center',
padding: 15,
borderColor: '#FFFFCC',
text: 'center',
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: 'z-index:100',
formatter(params, ticket, callback) {
//根据业务自己拓展要显示的内容
res = `<p style="text-align:center;font-size:18px">${name}</p>`
return res
}
},
// 地图
geo: {
map: '地点',
zoom: 1.2,
label: {
emphasis: {
show: false
}
},
roam: false, //是否允许缩放
itemStyle: {
normal: {
color: '#00004d',
borderColor: '#0057e7', //省市边界线00fcff 516a89
borderWidth: 2
},
emphasis: {
color: '#032587' //悬浮背景rgba(11, 13, 61, 1) rgba(37, 43, 61, .5)
}
}
},
series: {
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
//涟漪特效
period: 3, //动画时间,值越小速度越快
scale: 3 //波纹圆环最大限制,值越大波纹越大
},
// 坐标名称
label: {
normal: {
show: true,
position: 'right', //显示位置
offset: [5, 0], //偏移设置
formatter(params) {
//圆环显示文字
// console.log(params.data, "name");
return params.data.name
},
fontSize: 13
},
emphasis: {
show: true
}
},
// 标点颜色
itemStyle: {
normal: {
show: false,
color: '#25CEF3'
}
},
// 标点坐标
自己的坐标点
}
}
methods: {
handleSearch() {
this.dataInit()
},
dataInit() {
let mapChart = echarts.init(this.$refs.mapchart)
mapChart.setOption(this.option)
}
},
mounted() {
this.handleSearch()
}