一、地图

1、引入中国地图

1、准备china.json文件：https://www.123pan.com/s/QvTuVv-bMyw.html

2、引入china.json文件

import chinaJson from "@/assets/china.json"

const createEcharts=()=>{
    myEcharts.value = markRaw(echarts.init(echartsContainer.value))
    echarts.registerMap('china', chinaJson)
    
    //option
   
   	myEcharts.value.setOption(option)    
}

onMounted(()=>{
    createEcharts()
})

3、option

const option={
	geo: {
      show: true,
      map: "china",
      roam: true,
      label: {			//b标签
        show: true,
        color: "white",	//字体颜色
        align: "center"
      },
      emphasis: {        //悬浮后
        itemStyle: {	
          areaColor: '#519DBF',		//区块颜色
          color: "white",
        },
      },
      itemStyle: {		//默认样式
        areaColor: 'rgb(40,113,234)',	//区块颜色
        borderColor: '#111'			   //边框颜色
      }
    }
}

2、中国地图（地点之间用线条链接）

  const jingwei = {
    "芜湖港": [118.432941, 31.352859],
    "铜陵港": [117.815251, 30.929935],
    "镇江港": [119.425836, 32.187849],
    "马鞍山港": [118.506762, 31.670478],
    "苏州港": [120.585316, 31.298886],
    "南通港": [120.856394, 32.016212],
    "太仓港": [121.158434, 31.462349],
    "杭州港": [120.153576, 30.287459],
    "泰州港": [119.923116, 32.455778],
  }
    const transportData = data.value.map(item => [item.origin, item.destination, item.cargoWeight])
  // 根据坐标数据创建点的坐标数组
  const points = transportData.map(function (item) {
  return {
    fromName: item[0],
    toName: item[1],
    coords: [
      jingwei[item[0]],
      jingwei[item[1]]
    ],
    value: item[2]
  };
});
  
  const option = {
    geo: {
      show: true,
      map: "china",
      roam: true,
      label: {
        show: true,
        color: "white",
        align: "center"
      },

      emphasis: {
        itemStyle: {
          areaColor: '#519DBF',
          color: "white",
        },
      },
      itemStyle: {
        areaColor: 'rgb(40,113,234)',
        borderColor: '#111'
      }
    },
    title: {
      text: "城市订单分布",
      left: "center",
      textStyle: {
        color: "white"
      }
    },
    tooltip: {
      trigger: 'item',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'none'        // 默认为直线，可选为：'line' | 'shadow'
      },
      backgroundColor: '#11367a',
      textStyle: {
        color: '#6dd0e3',
        fontSize: 10,
      },
      formatter: (e) => {
        return `${e.seriesName}<br/>起始地：${e.data.fromName}<br/>目的地：${e.data.toName}<br/>货重：${e.value}吨`
      }
    },

    series: [{
      name: '货物流向分析',
      type: 'lines',
      coordinateSystem: 'geo',	//依赖坐标系为geo
      polyline: true,
      data: points,				//数据{fromName: 起始地名称,
        							//toName: 结束地名称,
									//coords: [[起始地经纬度]，[结束地经纬度]]
     								//value:值}
      lineStyle: {
        color: 'yellow',		//线条颜色
        opacity: 0.6,			//线条透明度
        width: 2				//线条宽度
      },
      emphasis: {				//选中后
        lineStyle: {			
          color: 'red',			
          width: 5
        }
      },
      zlevel: 1
    }]
  };