vue 用echart绘制地图

最近的项目有个需求 就是绘制地图，本来想贴个图算了（懒的加班） 但是想了想还是算了  贴个图也不太好.......

最后在一位大佬的博客里面找到了使用方法  大佬的原文（点击进入）

先看效果

 然后直接上代码

1.先引入  

import * as echarts from 'echarts'
import china from "@/assets/map/china.json" // 引入中国地图数据

这个json文件就直接下载就好了（大佬的博客里有介绍） 阿里云数据可视化平台

2.开始撸代码

// 地图开始
const mapData: any = china;
const mapDatanew = ref([])
function initCharts(charts: any) {
  // 重新渲染前要清除注册的地图实例
  if (echarts.getMap('china')) {
    chartsbody.value.dispose()
  }
  let initmapData = JSON.parse(JSON.stringify(mapData))
  initmapData.features.forEach(item => {
    allArea.value.forEach(citem => {
      if (item.properties.name.includes(citem.areaStr)) {
        item.properties.purchaseCount = citem.purchaseCount
        item.properties.purchaseTotal = citem.purchaseTotal
      }
    })
  })
  const option = {
    backgroundColor: "#ffffff", // 背景颜色
    tooltip: {
      trigger: "item"
    },
    geo: {
      // 地图配置
      map: "china",
      regions: initmapData.features.map((area) => {
        return {
          name: area.properties.name,
          itemStyle: {
            areaColor: getAreaColorByValue(area.properties.purchaseCount || '0'),
          },
        }
      }),
      tooltip: {
        trigger: "item",
        formatter: (params) => {
          let num = getpurchaseCount(params.name) || 0
          let purchaseTotal = getpurchaseTotal(params.name) || 0
          return `${params.name}采购量：${num}家<br/>${params.name}采购金额：${purchaseTotal}万元`;
        },
      },
      label: {
        normal: {
          show: true,
          textStyle: {
            color: "#475070",
          },
        },
        emphasis: {
          show: true,
          textStyle: {
            color: "#475070",
          }
        }
      },
      itemStyle: {
        normal: {
          borderColor: "#DADEEA",
          borderWidth: 1,
          areaColor: {
            //地图区域的颜色
            type: "radial", // 径向渐变
            x: 0.5, // 圆心
            y: 0.5, // 圆心
            r: 0.8, // 半径
            colorStops: [
              {
                // 0% 处的颜色
                offset: 0,
                color: "#D6F1E5",
              },
              {
                // 100% 处的颜色
                offset: 1,
                color: "#85D6B2",
              },
            ],
          },
        },
        // 鼠标放上去高亮的样式
        emphasis: {
          areaColor: "#92AAF5",
          borderWidth: 0,
        },
      },
    },
    series: [
    ],
  };
  // 地图注册，第一个参数的名字必须和option.geo.map一致
  if (!echarts.getMap('china')) {
    echarts.registerMap("china", /**/ initmapData);
    charts.setOption(option);
  } else {
    var myChart = echarts.init(document.getElementById('scmapbox'));
    myChart.setOption(option);
  }
}
根据每个地区的值给地图上色
function getAreaColorByValue(purchaseCount) {
  let purchaseCountInt = parseInt(purchaseCount)
  if (purchaseCountInt > 20) {
    return '#5DC998'
  } else if (purchaseCountInt > 10) {
    return '#85D6B2'
  } else if (purchaseCountInt > 0) {
    return '#99DDBE'
  } else {
    return '#D6F1E5'
  }
}
鼠标放上去 拿值的业务逻辑代码  具体根据业务去写
function getpurchaseCount(name) {
  for (let i = 0; i < allArea.value.length; i++) {
    if (name.includes(allArea.value[i].areaStr)) {
      return allArea.value[i].purchaseCount
    }
  }
}
function getpurchaseTotal(name) {
  for (let i = 0; i < allArea.value.length; i++) {
    if (name.includes(allArea.value[i].areaStr)) {
      return allArea.value[i].purchaseTotal
    }
  }
}
// 地图代码结束

<div v-if="showmap" ref="charts" class="scmapbox" id="scmapbox"></div>

const initmarketMap = async () => {
   ...省略调接口的代码
   allArea.value = data.data.allArea
    
   const refCharts = Instance.value.refs.charts
   chartsbody.value = echarts.init(refCharts)
   initCharts(chartsbody.value)
}


import { getCurrentInstance } from 'vue'
const Instance = ref('')
const chartsbody = ref('')
const allArea = ref([]) 每个省份的值 往地图插数据
const showmap = ref(true)  用来重新渲染地图 dome的
onMounted(() => {
  Instance.value = getCurrentInstance() 这句代码是先用一个值获取 当前组件的实例对象 （vue3没有this就是麻烦）
  initmarketMap()
})

总结一下 

echart可以绘制地图  type为 geo

geo: {}里面的参数  样式 itemStyle  文字 label  鼠标悬浮上去 tooltip 的内容 就自定义就行  根据需求去写   regions这一项我理解是根据数据 渲染地图上面显示的内容  

要注意的是 其他柱状图  饼图 直接charts.setOption就行  但是地图这个我试了 charts.setOption不生效 会提示地图已经存在   所以我才在dome上面加v-if  和dispose()去销毁 再重新渲染