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.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)

欢迎访问个人博客歌洞章