Verwenden Sie das benutzerdefinierte Symbol für Echartkarten im Vue-Projekt
Während des Entwicklungsprozesses muss eine Großbildanzeige der Datenvisualisierung erstellt werden, in der ein Modul die Karte der Echarts verwendet und ein benutzerdefiniertes Symbol verwandte Inhalte anzeigt.
Die ungefähren Renderings lauten wie folgt:
Gehen Sie wie folgt vor:
1. Laden Sie Echarts herunter und importieren Sie sie
npm install echarts --save
Führen Sie in die Dateien ein, die Echarts verwenden müssen
import echarts from 'echarts'
import 'echarts/extension/bmap/bmap'
import imgUrl from '@/assets/images/qiye.png' //引入自定义图标的图片，后面会用到
2. Holen Sie sich das dom-Element und erstellen Sie eine 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)
Willkommen im persönlichen Blog Song Zhang