echart 中国地图

地图josn数据可以自行下载，支持异步地图tooltip，地图缩放

<template>
  <div class="content">
    <div ref="charts" class="charts" style="width: 100%; height: 600px"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import zhongguo from '@/assets/mapJson/chinaChange.json'
export default {
  data() {
    return {
      warehouseList: [],
      tipsData: []
    }
  },
  async created () {
    await this.getWarehouseList()
  },
  mounted() {
    window.toolTipClose = this.toolTipClose
    window.onresize = () => {
      const charts = echarts.init(document.querySelector('.charts'))
      charts.resize()
    }
  },
  methods: {
    toolTipClose(e) {
      e.parentNode.style.display = 'none'
    },
    getWarehouseList() {
      axios.then(({ data }) => {
        this.warehouseList = []
        const areaList = JSON.parse(JSON.stringify(zhongguo)).features
        data.forEach(e => {
          areaList.forEach(v => {
            if (e.provinceCode === String(v.properties.adcode)) {
              // 地图坐标点位
              this.warehouseList.push({
                ...e,
                value: v.properties.center,
                name: e.cityName

              })
            }
          })
        })
        setTimeout(() => {
          this.initCharts()
        }, 200)
      })
    },
    getWarehouseData(item) {
      return new Promise((resolve, reject) => {
        const params = {
          physicalStationIds: item.warehouseInfoVOList.map(v => v.id),
          oneOrgId: this.$store.getters.organizationInfo.oneOrganizationId
        }
        this.$service.report.queryManageSplitWarehouseData(params).then(({ data }) => {
          resolve(data)
        }).catch(err => {
          reject(err)
        })
      })
    },
    initCharts() {
      const charts = echarts.init(document.querySelector('.charts'))
      var that = this
      const option = {
        // 背景颜色
        backgroundColor: 'transparent',
        // 提示浮窗样式
        tooltip: {
          show: true,
          trigger: 'item',
          triggerOn: 'click',
          showContent: true,
          showDelay: 0, // 浮层显示的延迟
          transitionDuration: 1, // 提示框浮层的移动动画过渡时间
          enterable: true,
          className: 'iconMap',
          position: ['10%', '10%'],
          hideDelay: 10,
          alwaysShowContent: true,
          extraCssText: 'box-shadow: 0 0 3px transparent;background-color:transparent;',
          formatter: function(params, ticket, callback) {
            that.getWarehouseData(params?.data).then(res => {
              var arrStr = ''
              var arr = []
              if (res && res.length) {
                for (var i = 0; i < res.length; i++) {
                  arr.push(`
                    <div style="height:100%;min-width:280px;margin-right:6px;">
                      <div style="font-size: 18px;background: rgba(32,45,60,.8);font-size: 16px;
                        background: rgba(32,45,60,.5);
                        line-height: 36px;
                        padding-left: 8px;">${res[i].stationName}</div>
                      <div style="margin-top:2px;background:rgba(19,43,82,.4);padding-left:8px;border:1px solid #3D67FF;">
                        <div style="font-size: 18px;padding-top:6px;">本月累计发运金额</div>
                        <div style="font-size: 24px;color: #19FCDE;font-weight: bold;line-height:30px">${res[i].monthAddTotalAmount}<span style="font-size: 10px;color: #00FFDD;margin-left:8px;">万元</span></div>
                        <div style="font-size: 14px;line-height: 24px;">本月累计发运：${res[i].monthAddTotalWeight} 吨</div>
                        <div style="font-size: 14px;line-height: 24px;">本月累计未发运金额：${res[i].unshippedOrderTotalAmount} 万元</div>
                        <div style="font-size: 14px;line-height: 24px;">本月累计未发运：${res[i].unshippedOrderTotalWeight} 吨</div>
                        <div style="font-size: 14px;line-height: 24px;">今日发运率：${res[i].todayShippingRatio}%</div>
                        <div style="font-size: 14px;line-height: 24px;">今日发运进度：${res[i].todayShippingSpeed}%</div>
                        <div style="font-size: 15px;line-height: 24px;">在库商品：${res[i].inStockGoodsTotalAmount} 万元/${res[i].inStockGoodsTotalWeight} 吨</div>
                        <div style="font-size: 15px;line-height: 24px;margin-bottom: 8px">当前缺货：${res[i].accumulateOrderGapWeight} 吨</div>
                      </div>
                    </div>
                  `)
                }
                arrStr = arr.join('')
                const html = `
                    <div style="display:flex;" class="icon">
                      <div style="max-width:600px;height:360px;padding:10px;position: relative;overflow-x:auto;display:flex;background:transparent;">
                          ${arrStr}
                      </div>
                      <i onClick="toolTipClose(this)" style="font-size:20px;position: absolute;right: 10px;top:14px;">X</i>
                    </div>
                    `
                callback(ticket, html)
              } else {
                const html = `
                    <div style="display:flex;" class="icon">
                      <div style="width:300px;height:300px;padding:10px;position: relative;overflow-x:auto;display:flex;background:transparent;">
                          暂无数据
                      </div>
                      <i onClick="toolTipClose(this)" style="font-size:20px;position: absolute;right: 0px;top:14px;">X</i>
                    </div>
                    `
                callback(ticket, html)
              }
            })
            const str = `<div style="display:flex;" class="icon">
                <div style="width:200px;padding:10px;position: relative;background:transparent;top: 200px;left: 220px;">
                    数据加载中
                </div>
              </div>`
            return str
          }
        },
        // 地图配置
        geo: [{
          map: 'china',
          show: true,
          zlevel: 2,
          zoom: 1.2,
          label: {
            normal: {
              show: false,
              textStyle: {
                color: '#fff',
                fontSize: 14,
                fontFamily: 'Arial'
              }
            },
            emphasis: {
              color: '#fff'
            }
          },
          roam: false,
          // 地图区域的样式设置
          itemStyle: {
            normal: {
              borderColor: '#0D63B4',
              borderWidth: 2,
              areaColor: {
                type: 'linear',
                x: 0,
                y: 1,
                x2: 0.7,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(21, 50, 78, 0)'// 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(21, 50, 78, .7)' // 100% 处的颜色
                  }
                ],
                globalCoord: false // 缺省为 false
              }
              // shadowColor: 'rgba(128, 217, 248, 1)'
            },
            // 鼠标放上去高亮的样式
            emphasis: {
              areaColor: 'rgba(13, 99, 180, .4)',
              borderWidth: 0
            },
            animationDurationUpdate: 0
          }
        },
        {
          type: 'map',
          map: 'china',
          zoom: 1.2,
          label: {
            show: false
          },
          roam: false,
          itemStyle: {
            normal: {
              borderColor: 'rgba(21,50,78,.6)',
              borderWidth: 1,
              areaColor: {
                type: 'linear',
                x: 0,
                y: 1,
                x2: 0.7,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(21, 50, 78, 0)'// 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(21, 50, 78, .7)' // 100% 处的颜色
                  }
                ]
              }
            },
            // 鼠标放上去高亮的样式
            emphasis: {
              show: false,
              areaColor: 'rgba(13, 99, 180, .4)'
            },
            animationDurationUpdate: 0
          }
        }
        ],
        series: [
          {
            name: '散点',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'circle',
            symbolSize: 8, // 标记的大小
            // 图形的样式
            itemStyle: {
              color: '#FF730B'
            },
            data: this.warehouseList,
            emphasis: {
              show: false
            },
            zlevel: 6
          }
        ]
      }
      // 地图注册
      echarts.registerMap('china', zhongguo)
      charts.setOption(option)
      // 地图缩放
      // charts.on('georoam', function(params) {
      //   var option = charts.getOption()// 获得option对象
      //   if (params.zoom !== null && params.zoom !== undefined) { // 捕捉到缩放时
      //     option.geo[1].zoom = option.geo[0].zoom + 0.01// 下层geo的缩放等级跟着上层的geo一起改变
      //     option.geo[1].center = option.geo[0].center // 下层的geo的中心位置随着上层geo一起改变
      //   } else { // 捕捉到拖曳时
      //     option.geo[1].center = option.geo[0].center // 下层的geo的中心位置随着上层geo一起改变
      //   }
      //   charts.setOption(option)// 设置option
      // })
    }

  }
}
</script>
<style lang="scss" scoped>
.content{
  width: 100%;
}
</style>