先看一下效果，多的不能展示了。
直接上代码，有注释！！！
// 初始化地图
initMap_echarts(){
let idcDataInfo = [
{
name: "地名",
value: [
经度，维度，值
],
//还可以拓展自己想要的属性
},
];
// 基于准备好的dom，初始化地图实例
const myChart = echarts.init(
document.getElementById("map_echarts")
)
// 指定地图的配置项
let option = {
geo: {
zlevel: 1,
map: "",
roam: false,
zoom: 1.15,
aspectScale: 0.8,
left: "center",
top: "middle",
bottom: "auto",
right: "auto",
label: {
show: true,
color: "rgba(255, 255, 255, 1)",
fontSize: 14,
fontWeight: "normal",
fontStyle: "normal",
},
tooltip:{
trigger: 'item',
},
toolbox: {
show: true
},
itemStyle: {
areaColor: "#06666A",
borderColor: "#00F7F6",
borderWidth: 3,
borderType: "solid",
shadowBlur: 5,
shadowColor: "#004E53",
shadowOffsetX: 4,
shadowOffsetY: 8,
opacity: 1,
},
emphasis: {
label: {
show: true,
color: "#ffffff",
fontSize: 14,
fontWeight: "normal",
fontStyle: "normal",
fontFamily: "Source Han Sans CN, Source Han Sans CN-Medium"
},
itemStyle: {
areaColor: "rgba(253,196,31,1)",
borderColor: "rgba(0, 249, 248, 1)",
borderWidth: 1,
borderType: "solid",
shadowBlur: 1,
shadowColor: "rgba(0, 249, 248, 1)",
shadowOffsetX: 2,
shadowOffsetY: 2,
opacity: 1,
},
},
},
series: [
{
type: 'scatter',
coordinateSystem: 'geo',
geoIndex: 0,
zlevel: 4,
symbol: "require('@/assets/hb/public/zc.png')",
// 就是柱子的图片位置，也可以自定义
},
symbolRotate:"6",
// params 是数据中的value，
symbolSize: function (params) {
// [上边symbol图片的宽，上边symbol图片的高]
return [16, params[2]];
},
itemStyle: {
color: '#b02a02',
},
encode: {
tooltip: 2
},
data: idcDataInfo
},
],
}
let source = []
// 获取地图geo 你的地图数据文件位置
const gismap = require("../../../assets/gismap/adCode/" +
henan+
".json")
echarts.registerMap(option.geo.map, gismap)
// 获取不同数据源的数据
const handleData = (source) => {
if (source.length > 0) {
source.forEach((item) => {
if (item.source.type == "static") {
handleFilterMapping(item, item.source.static)
}
})
setOption()
} else {
setOption()
}
}
// 数据处理 -- 过滤器与映射
const handleFilterMapping = (i1, source) => {
const mp = i1.source.mapping
const fs = option.series.find((i) => i.name == i1.name)
const fsI = option.series.findIndex((i) => i.name == i1.name)
if (i1.source.filter.isFilter) {
const filterFn = (data, callbackArgs) => {
const filterFunction = {
init: eval(
`(function filterFn(data, callbackArgs) { ${i1.source.filter.data.code} })`
),
}
return filterFunction.init()
}
source = filterFn(source)
}
if (fs.type == "lines") {
const mapping1 = mp.find((i) => i.name == "fromName").mapping
const mapping2 = mp.find((i) => i.name == "toName").mapping
const mapping3 = mp.find((i) => i.name == "coords").mapping
fs.data = source.map((i2) => {
return {
fromName: i2[mapping1],
toName: i2[mapping2],
coords: i2[mapping3],
}
})
} else if (fs.type == "effectScatter") {
const mapping1 = mp.find((i) => i.name == "name").mapping
const mapping2 = mp.find((i) => i.name == "value").mapping
fs.data = source.map((i2) => {
return { name: i2[mapping1], value: i2[mapping2] }
})
fs.symbolSize = (data) => {
return data[2] / fs.scalRatio
}
} else if (fs.type == "map" && fs.map.indexOf("-border") == -1) {
const mapping1 = mp.find((i) => i.name == "name").mapping
const mapping2 = mp.find((i) => i.name == "value").mapping
fs.data = source.map((i2) => {
return { name: i2[mapping1], value: i2[mapping2] }
})
}
setOption()
}
// 初始化地图
const setOption = () => {
echarts.registerMap(option.geo.map, gismap)
option.series.find(
(item) => item.type == "map" && item.map.indexOf("-border") != -1
) !== undefined
? echarts.registerMap(option.geo.map + "-border", gismapBorder)
: ""
myChart.setOption(option)
}
var time = null;
// 解绑click 事件
myChart.off("click");
// 解绑dblclick 事件
myChart.off("dblclick");
// 给地图添加监听事件
myChart.on('click', params => {
//取消上次延时未执行的方法
clearTimeout(time);
time = setTimeout(function(){
// 延时300 毫秒执行，单击事件的方法体
}, 300)
})
// 给地图添加监听事件
myChart.on('click', params => {
// 双击事件的方法体
clearTimeout(time);
})
// 定时器
const initAutoUpdateTimer = (source) => {
source.forEach((i1) => {
if (i1.source.isAutoUpdate)
setInterval(() => handleData([i1]), i1.source.autoUpdateTime * 1000)
})
}
// 初始化
const init = (source) => {
handleData(source)
initAutoUpdateTimer(source)
}
// 入口
init(source)
},
可以私聊解决你的问题！
