Use echarts map custom icon in vue project

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:

echarts map custom icon

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

Guess you like

Origin blog.csdn.net/weixin_47160442/article/details/112534930