一文告诉你如何使用echarts实现地图渲染

#开发心得#

<template>
  <div
    ref="echarts-map"
    :style="{ width: '100%', height: '100%', position: 'absolute', top: 0, left: 0, 'z-index': 999 }"
  ></div>
</template>
<script>
// import './china.js'
import * as echarts from 'echarts'
import { fontChart } from '@/utils/tool'
import shengfen from '@/utils/map/json/china.json' //地图包
export default {
  data() {
    return {
      charts: null,
      id: 'echarts-map',
      firstChart: null,
      mapIcon:
        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAADYUExURf///98gIOEgIOEgIOAgIOAgIOAgIOAgIOAhIdwjI98gIOAgIOAgIOAgIN4hIeEeHuAgIOAgIOIhId8gIOEiIugXF+AfH+AgIN8gIOEgIN8gIN8gIOEhIeAgIOAgIOEhIeMcHP8AAP8AAN8gIN8gIOAgIOAgIOAgIOAfH98gIOAhIeAgIOAgIN8gIOQbG+IdHeAhIeAgINskJN8gIOAfH+AgIOEeHuQkJOAgIOEgIOEeHuAgIOAgIOAgIOEgIOIiIuEeHt8gIOEgIOAfH+AfH9gnJ+AgIP///80lk5YAAABGdFJOUwA4hsnn+uW/dR1PyPmWFyK26k5pTAuK/oCgIAhm4aZWGwMBSJHo/MB7gZzY7HgTI4zxDhCS8jMcqqgqne74sDU7YHdrSw0k9q2wAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAOwwAADsMBx2+oZAAAAAd0SU1FB+cLBgkxC8twCuIAAAC/SURBVEjH7dTHEoIwFEDRZwF7R7Eriqio2Htv+f9PEhUHAgJZOk7ujuSdGZJFABzzeH1+hg0EQ0BUOIK0orG4+3giiQyl0timugIZzriSzTEIi7eAPF8ofr5L5QoyZwXqr1ZrdaERb4othIjAM4lB37MDtlFAwZ8BqS12unKPFPQHynt7OBqTAHmiD0xnkgVwc2ycxd8VWFgALFe8Pr9WwCntTJvt7jW9PxwBSACAcDpfrrc7uGW+NQoooOA3wAMnSuQvLjeLfQAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMy0xMS0wNlQwOTo0OToxMSswMDowMHV0QMIAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjMtMTEtMDZUMDk6NDk6MDcrMDA6MDCrU83aAAAAKHRFWHRkYXRlOnRpbWVzdGFtcAAyMDIzLTExLTA2VDA5OjQ5OjExKzAwOjAwUzzZoQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAASUVORK5CYII='
    }
  },
  props: {
    dataArr: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    dataArr: {
      handler: function (val) {
        if (val) {
          this.initCharts()
        }
      },
      // immediate: true,
      deep: true
    }
  },
  mounted() {
    this.initCharts()
  },
  methods: {
    initCharts() {
      let dataArr = this.dataArr
      let _this = this
      let chartContainer = this.$refs[this.id]
      const charts = echarts.init(chartContainer)

      const option = {
        // 背景颜色
        backgroundColor: '#fff',
        dataRange: {
          show: false,
          min: 0,
          max: 1000,
          text: ['High', 'Low'],
          realtime: true,
          calculable: true,
          color: ['orangered', 'yellow', 'lightskyblue']
        },
        // 提示浮窗样式
        tooltip: {
          show: true,
          trigger: 'item', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          alwaysShowContent: true,
          enterable: true, //鼠标是否可进入提示框浮层中
          backgroundColor: '#fff',
          borderColor: 'rgba(0, 0, 0, 0.16);',
          triggerOn: 'mousemove',
          textStyle: {
            fontSize: fontChart(15),
            overflow: 'break'
          },
          formatter: function (params) {
            // 这里是鼠标移入效果，显示当前点地详情信息
            if (params.data && params.data.companyList) {
              let companyList = params.data.companyList
              let str = `<div style="margin-bottom:10px"><img style="width:20px" src="${_this.mapIcon}"/> 店量 ${companyList.length}</div>`

              companyList.forEach(
                (item) =>
                  (str += `<div style="display:flex;justify-content: space-between;
  align-items: center;">
  <div style="width:180px;overflow: hidden;white-space: nowrap; text-overflow: ellipsis;margin-right:10px"
  title="${item.area}">${item.area}</div>
            <div style="width:200px;overflow: hidden;white-space: nowrap; text-overflow: ellipsis;margin-right:10px"
            title="${item.companyName}"
            >${item.companyName}</div>
  <div style="width:120px">${item.financingStartDate}</div>
  <div style="width:80px">${item.assetNum}台</div> </div>`)
              )
              return str
            } else {
              return `<div>${params.name}</div>`
            }
          }
        },
        visualMap: {
          //分段型视觉映射组件
          show: true,
          type: 'piecewise',
          left: 50,
          bottom: 50,
          showLabel: true,
          itemWidth: 10,
          itemHeight: 10,
          inverse: true
        },
        // 地图配置
        geo: {
          map: 'china',
          aspectScale: 0.8, //长宽比,0.75的含义为宽是高的0.75,假如高为100,宽就只有75;0.5的含义就是宽只有高的一半,假如高为100,宽就只有50
          zoom: 1, //视觉比例大小,1.2即为原有大小的1.2倍
          animationDurationUpdate: 0, // 实现缩放拖拽且不卡顿
          roam: true, //是否开启鼠标缩放和平移漫游。默认不开启。可以不用设置,如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。
          top: 0,
          label: {
            // 通常状态下的样式
            normal: {
              show: true,
              textStyle: {
                color: '#666'
              }
            },
            // 鼠标放上去的样式
            emphasis: {
              textStyle: {
                color: '#fff'
              }
            }
          },
          // 地图区域的样式设置
          itemStyle: {
            normal: {
              borderColor: 'rgba(147, 235, 248, 0.3)',
              borderWidth: 1,
              areaColor: 'rgba(19,54,162, .5)'
            },
            // 鼠标放上去高亮的样式
            emphasis: {
              borderWidth: 0
            }
          }
        },
        series: [
          {
            selectedMode: false, //取消地图区域点击事件
            geoIndex: 0, //将数据和第0个geo配置关联在一起
            type: 'map'
          },
          // 添加散点 标记点
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'image://' + this.mapIcon,
            legendHoverLink: true,
            symbolSize: [28, 28],
            symbolOffset: [10, -15],
            label: {
              show: true,
              offset: [0, 15], //偏移设置
              fontSize: fontChart(15),
              lineHeight: fontChart(13),
              backgroundColor: 'rgba(20, 43, 61, 0)',
              borderWidth: 0,
              borderColor: '#8f7136',
              borderRadius: 10,
              padding: fontChart(8),
              formatter(value) {
                return `{name|${value.data.name}}`
              },
              rich: {
                name: {
                  fontWeight: 'bold',
                  fontSize: fontChart(13),
                  color: 'rgba(147, 235, 248, 1)'
                }
              },
              color: '#fff'
            },
            itemStyle: {
              color: 'rgba(19,54,162, .5)', //标志颜色
              shadowBlur: 2,
              shadowColor: 'rgba(19,54,162, .5)'
            },
            data: dataArr,
            // 这块的数据是需要转化经纬度的，可以调取百度、高德等地图的api，但是企业调用不免费
            // [
            //   // 数据
            //   {
            //     name: '南京市',
            //     value: [121.645189, 29.750277]
            //   },
            //   {
            //     name: '山东省',
            //     value: [117.0, 36.4]
            //   }
            // ],
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            zlevel: 1
          }
        ]
      }
      // 地图注册，第一个参数的名字必须和option.geo.map一致
      echarts.registerMap('china', shengfen)
      charts.setOption(option)
      charts.on('mouseover', function () {
        //取消鼠标移入地图区域高亮
        charts.dispatchAction({
          type: 'legendUnSelect'
        })
      })
      // 监听 'mouseout' 事件，阻止 tooltip 隐藏
      // charts.on('mouseout', function (event) {
      //   console.log('鼠标移出', event)
      //   // 阻止事件冒泡
      //   // event.preventDefault()
      // })
      // charts.on('click', function (event) {
      //   // 隐藏tooltip
      //   charts.dispatchAction({
      //     type: 'hideTip'
      //   })
      // })
      this.charts = charts
      //窗口大小变动触发
      window.onresize = function () {
        _this.chartResize()
      }
    },
    chartResize() {
      if (this.charts) {
        this.charts.resize()
      }
    }
  },
  destroyed() {
    window.removeEventListener('resize', this.chartResize)
  }
}
</script>
<style lang="less" scoped>
* {
  -webkit-user-select: text !important;
  user-select: text !important;
}
</style>

最终实现地是一个可缩放的echarts地图，地图上渲染某一个地点的位置，这个涉及到经纬度的转换，由于调取地图api会收费，所以我选择的是离线的城市名和经纬度匹配，自己整理了几百个城市对应的经纬度，但是可能会有遗漏的城市，后续发现会在补充