Use echarts map custom icon in vue project
In the development process, a large-screen display of data visualization needs to be made, in which a module uses the map of echarts, and a custom icon displays related content.
The approximate renderings are as follows:
Proceed as follows:
1. Download and import echarts
npm install echarts --save
Introduce in the required files using echarts
import echarts from 'echarts'
import 'echarts/extension/bmap/bmap'
import imgUrl from '@/assets/images/qiye.png' //引入自定义图标的图片，后面会用到
2. Get the dom element and create an option
let res_data=[{
name1: "张三丰让那个公司",
coordinates: [120.571526,31.350885],
value: {
yanglao: {
count: 384,
base: 4324,
Should: 738.98,
already: 738.98
},
yiliao: {
count: 384,
base: 4324,
Should: 738.98,
already: 738.98
}
}
},{
name1: "李四的公司",
coordinates: [120.587049,31.34299],
value: {
yanglao: {
count: 384,
base: 4324,
Should: 738.98,
already: 738.98
},
yiliao: {
count: 384,
base: 4324,
Should: 738.98,
already: 738.98
}
}
},{
name1: "王五的公司",
coordinates: [120.63721,31.366796],
value: {
yanglao: {
count: 384,
base: 4324,
Should: 738.98,
already: 738.98
},
yiliao: {
count: 384,
base: 4324,
Should: 738.98,
already: 738.98
}
}
}, {
name1: "钱老的公司",
coordinates: [120.64799,31.428812],
value: {
yanglao: {
count: 324,
base: 4624,
Should: 738.98,
already: 738.98
},
yiliao: {
count: 384,
base: 4324,
Should: 738.98,
already: 738.98
}
}
}, {
name1: "hei 责任公司",
coordinates: [120.667825,31.319547],
value: {
yanglao: {
count: 324,
base: 4624,
Should: 738.98,
already: 738.98
},
yiliao: {
count: 384,
base: 4324,
Should: 738.98,
already: 738.98
}
}
}]
let ginsengMap = echarts.init(document.getElementById('ginsengMap'))
let option = {
title: {
text: '标题的文字内容',
left: 'center',
top: '0',
textStyle: {
fontSize: 14,
fontWeight: 400,
color: "rgb(37,234,255)"
}
},
tooltip: {
transitionDuration: 0,
trigger: 'item',
formatter: function (val) {
//返回tooltip的内容及布局样式
let obj = val.data.value
return `
<div style="padding:0 20px">
<h5 style="color:#D4A41D;font-size:18px">${
val.data.name1}</h5>
<h6 style="color:#9FD7FC;font-size:16px;margin:5px 0;">缴费数目</h6>
<ul >
<li>人数：${
obj.yanglao.count}位</li>
<li>缴费基数：${
obj.yanglao.base}元</li>
<li>本期应缴：${
obj.yanglao.Should}万元</li>
<li>本期已缴：${
obj.yanglao.already}万元</li>
</ul>
<h6 style="color:#9FD7FC;font-size:16px;margin:5px 0;">保险</h6>
<ul>
<li>人数：${
obj.yiliao.count}位</li>
<li>缴费基数：${
obj.yanglao.base}元</li>
<li>本期应缴：${
obj.yanglao.Should}万元</li>
<li>本期已缴：${
obj.yanglao.already}万元</li>
</ul>
</div>
`
},
},
bmap: {
center: [120.648278, 31.373826], //地图的中心点
zoom: 12, //地图的等级
roam: true,
mapStyle: {
//地图的样式，可根据需要配置
style: "midnight",
}
},
series: [{
name: '这些点的分布分布',
type: 'custom', //type的值为'custom'时，表示自定义图标
coordinateSystem: 'bmap',
data: res_data,
renderItem(params, api) {
let coordinates = res_data[params.dataIndex].coordinates //把坐标数据取出来
//具体实现自定义图标的方法
return {
type: 'image',
style: {
image: imgUrl, // 自定义的图片地址（上面引入，也可直接写图片的网络地址）
x: api.coord(coordinates)[0], // 图标的经度 必须使用 api.coord（）方法对坐标进行转化之后位置才正确
y: api.coord(coordinates)[1], //图标的纬度
width: 32, // 图标大小设置
height: 32,
},
};
},
}]
}
ginsengMap.setOption(option)
Welcome to the personal blog Song Zhang