【vue3】echarts基础地图

1. 本文以临汾市地图举例，效果如下图：
2. 地理小工具网站：地理json小工具
3. 

1. html代码

<div class="comps_map" ref="mapRef"></div>

2. js代码

import {ref, onMounted, nextTick} from 'vue';
import * as echarts from 'echarts';
import linFenJson from '@/assets/mapJson/linFen.json'  // 临汾市地图json数据
import router from '@/router/index.js'

onMounted(()=>{
  nextTick(()=>{
    drawMap()
  })
})

const myChart = ref(null);
const mapData = ref([]);
const mapRef = ref(null);
const drawMap = ()=> {
    myChart.value = echarts.init(mapRef.value);
    console.log('myChart.value',myChart.value)
    echarts.registerMap("linfen", linFenJson); //
    let curDataList = [
      {
        name:'蒲县',
        value:-1
      },
      {
        name:'安泽县',
        value:-1
      },
      {
        name:'乡宁县',
        value:-1
      },
      {
        name:'霍州市',
        value:6
      },
      {
        name:'洪洞县',
        value:2
      },
      {
        name:'尧都区',
        value:3
      }
    ]
    mapData.value = linFenJson.features.map((item, index) => {
      let obj = curDataList.find(curItem=>curItem.name===item.properties.name);
      return {
        name: item.properties.name,
        value: obj?obj.value : 0,
        id: item.id,
        level: item.properties.level,
        cityCode: item.properties.adcode,
      };
    });
    myChart.value.setOption(
      {
        //数据映射
        visualMap: {
          type: "piecewise", //分段标签
          min: 50, //最小值
          max: 200, //最大值，不设置为无限大
          right: 20, //距离右侧位置
          top: 10, //距离底部位置
          orient: "horizontal", //组件竖直放置
          align: "left", //色块在左
          textGap: 3, //文字主体之间的距离
          // itemSymbol: "none", //右下角映射组件使用圆点形状
          itemSymbol: "circle", //右下角映射组件使用圆点形状
          show: true,
          seriesIndex: 0, //指定取哪个系列的数据(series.data)，若不设置则会影响图上标点颜色设置。
          //一以下是分段式视觉映射组件的每一段的范围
          //gt：大于、gte：大于等于、lt：小于、lte：小于等于。
          pieces: [
            {
              gt: 50,
              label: ">50个",
              color: "rgb(100, 16, 19)",
            },
            {
              gte: 10,
              lte: 50,
              label: "10-50",
              color: "rgb(149, 29, 29)",
            },
            {
              gte: 5,
              lte: 10,
              label: "5-10",
              color: "rgb(189, 49, 36)",
            },
            {
              gte: 0,
              lte: 5,
              label: "<5",
              color: "rgb(222, 134, 143)",
            },
            {
              lt:1,
              gte:0,
              label: "0",
              color: "rgb(227, 227, 255)",
            },
            {
              lt:0,
              gte:-1,
              label: "<0",
              color: "rgb(170, 170, 170)",
            },
          ],
        },
        // 提示浮窗样式
        tooltip:  {
          show: true,
          trigger: "item", // 设置该属性之后，会与series中data数据对应。注意data中对象的键名为name。如果单纯的展示数据可用此属性，不与formatter同用。
          alwaysShowContent: false,
          backgroundColor: "#427d7a",
          borderColor: "rgba(0, 0, 0, 0.16);",
          hideDelay: 100,
          triggerOn: "mousemove",
          enterable: true,
          textStyle: {
            color: "#DADADA",
            fontSize: "12",
            width: 20,
            height: 30,
            overflow: "break",
          },
          formatter(params) {
            return `${params.data.name + ":"}</br>xxx数量:${
              params.data.value
            }`;
          },
          showDelay: 100,
        },
        geo: {
          map: "linfen",
          type: "map",
          center: [104.114129, 37.550339], //当前视角的中心点
          zoom: 1, //当前视角的缩放比例
        },
        series: [
          {
            name: "linfen",
            type: "map",
            roam: false,
            mapType: "linfen",
            data: mapData.value,
            layoutCenter: ["50%", "50%"],
            layoutSize: "92%",
            itemStyle: {
              normal: {
                show: true,
                areaColor: "#59a3a0",
              },
            },
            emphasis: {
              itemStyle: {
                show: true,
                areaColor: "#2b6461", //鼠标滑过区域颜色
              },
              label: {
                show: true,
                textStyle: {
                  color: "#fff", //鼠标经过字体颜色
                },
              },
            },
            select: {
              // 地图选中区域样式
              label: {
                // 选中区域的label(文字)样式
                color: "#fff",
              },
              itemStyle: {
                // 选中区域的默认样式
                areaColor: "#2b6461",
              },
            },
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#000",
                },
              },
            },
          },
        ],
      },
      true
    );
    // 点击某个区域，跳转思极地图
    myChart.value.on("click", function (params) {
      let areaName = params.data.name;
      // 在此处做点击事件处理
    });
}

3. css代码

.comps_map{
  width: 800px;
  height: 500px;
  background-color: white;
}