vue项目中使用echarts 地图 自定义图标
在开发过程中，需要做一个数据可视化的大屏展示，其中有一个模块用到了echarts的地图，自定义图标展示相关内容。
大概效果图如下：
步骤如下：
1.下载并引入echarts
npm install echarts --save
在需要的使用echarts的文件中引入
import echarts from 'echarts'import 'echarts/extension/bmap/bmap'import imgUrl from '@/assets/images/qiye.png' //引入自定义图标的图片，后面会用到
2.获取dom元素，创建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.valuereturn `<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)
欢迎访问个人博客歌洞章
