最近碰到的新需求驹尼，搞了老半天，主要還是對(duì)api的不了解晚顷。
效果圖.png
js代碼峰伙，主要是series這一塊的配置，自定義的時(shí)候一定要設(shè)置type: "custom"该默，以下是關(guān)于renderItem函數(shù)的一些介紹瞳氓，介紹鏈接 - https://echarts.apache.org/zh/option.html#%2Fsearch%2FrenderItem
renderItem函數(shù)介紹.png
// options的局部配置文件
series: [
{
name: "設(shè)備分布",
type: "effectScatter",
coordinateSystem: "geo",
type: "custom",
renderItem: function(params, api) {
const data = convertData(data); // 處理數(shù)據(jù)
let index = params.dataIndex;
let deviceType = + data[index].deviceType;
let array = [imgIcon1,imgIcon2,imgIcon3]; // 此處為引進(jìn)的三張圖片路徑import imgIcon1 from '../路徑'
return that.addImage(array[deviceType-1], params, api, data);
},
data: convertData(data),
symbolSize: function(val) {
return val[2] / 10;
},
showEffectOn: "render",
rippleEffect: {
brushType: "stroke"
},
hoverAnimation: true,
label: {
normal: {
formatter: "",
position: "right",
show: true
}
},
zlevel: 1
}
]
// 添加圖片的方法
addImage(url, params, api, realData) {
// console.log(url,params,api,realData,'2222')
return {
type: "image",
style: {
image: url,
x: api.coord([
realData[params.dataIndex].value[0],
realData[params.dataIndex].value[1]
])[0],
y: api.coord([
realData[params.dataIndex].value[0],
realData[params.dataIndex].value[1]
])[1],
width: 40,
height: 40
}
};
},
