实现图例

在这里插入图片描述

首先我们需要引入echarts，现在echarts应该已经到5了，我们开发的时候建议看v5的版本

npm install echarts --save 或者
cnpm install echarts --save

现在echarts不给提供地图了，所以需要我们自己去寻找地图json。穿梭车里边包含2个json，一个是去掉了南海诸岛，一个是保留的，加上上边的代码可以完整实现。（但是如果你想去掉南海诸岛，还需要在代码中加入）
穿梭车

regions: [
          {
            name: "南海诸岛",
            value: 0,
            itemStyle: {
              normal: {
                opacity: 0,
                label: {
                  show: false,
                },
              },
            },
          },
        ],

当然如果你不需要去掉可以直接往下看
main.js

import * as echarts from 'echarts'
import china from '../public/china.json';
echarts.registerMap('china', china);
app.config.globalProperties.$echarts = echarts

页面显示完整代码

<template>
  <div class="NationView">
    <a-row class="NationViewBox">
      <a-col :span="24" class="viewbox"
        ><div id="NationView" ref="NationView"></div
      ></a-col>
    </a-row>
  </div>
</template>
<script>
import { defineComponent, onMounted, ref, getCurrentInstance } from "vue";
import CTable from "../../../commons/CTable";
import Photopng from "../../../img/mapImg.svg";
import panji from "../../../img/磐基.png";
export default defineComponent({
  components: {
    [CTable.name]: CTable,
  },
  setup() {
    let { proxy } = getCurrentInstance();
    const chart = ref(null);
    let geoCoordMap = {
      // 地图地点的经度纬度
      北京: [116.41989, 40.189913],
      天津: [117.351154, 39.28914],
      上海: [121.438732, 31.072508],
      重庆: [107.88398, 30.067321],
      河北: [114.502461, 38.045474],
      河南: [113.619918, 33.902738],
      云南: [101.485108, 25.008649],
      辽宁: [122.606135, 41.300702],
      黑龙江: [127.693002, 48.040469],
      湖南: [111.754313, 27.655081],
      安徽: [117.226894, 31.849585],
      山东: [118.186283, 36.374485],
      新疆: [85.294712, 41.371801],
      江苏: [119.48196, 32.985864],
      浙江: [120.109522, 29.181876],
      江西: [115.732937, 27.636129],
      湖北: [112.271042, 30.98802],
      广西: [108.794237, 23.833575],
      甘肃: [103.823557, 36.058039],
      山西: [112.305144, 37.619053],
      内蒙古: [114.059024, 44.315561],
      陕西: [108.887567, 35.263665],
      吉林: [126.171246, 43.703944],
      福建: [118.005928, 26.070282],
      贵州: [106.88108, 26.826362],
      广东: [113.429877, 23.334664],
      青海: [96.043531, 35.726402],
      西藏: [88.388277, 31.56375],
      四川: [102.693438, 30.674548],
      宁夏: [106.169867, 37.291331],
      海南: [109.754777, 19.189617],
      台湾: [120.971486, 23.749452],
      香港: [114.134394, 22.377371],
      澳门: [113.56642, 22.159262],
      吐鲁番: [104.059024, 50],
    };

    // 发射点数组 
    //吐鲁番是可以随便修改的数据，该数据含义是你从哪个点发射的射线，修改这个点的方法为修改geoCoordMap 中吐鲁番的坐标系
    let GZData = [
      [
        [{ name: "吐鲁番" }, { name: "北京" }],
        [{ name: "吐鲁番" }, { name: "天津" }],
        [{ name: "吐鲁番" }, { name: "上海" }],
        [{ name: "吐鲁番" }, { name: "重庆" }],
        [{ name: "吐鲁番" }, { name: "河北" }],
        [{ name: "吐鲁番" }, { name: "河南" }],
        [{ name: "吐鲁番" }, { name: "云南" }],
        [{ name: "吐鲁番" }, { name: "辽宁" }],
        [{ name: "吐鲁番" }, { name: "黑龙江" }],
        [{ name: "吐鲁番" }, { name: "湖南" }],
        [{ name: "吐鲁番" }, { name: "安徽" }],
        [{ name: "吐鲁番" }, { name: "山东" }],
        [{ name: "吐鲁番" }, { name: "新疆" }],
        [{ name: "吐鲁番" }, { name: "江苏" }],
        [{ name: "吐鲁番" }, { name: "浙江" }],
        [{ name: "吐鲁番" }, { name: "江西" }],
        [{ name: "吐鲁番" }, { name: "湖北" }],
        [{ name: "吐鲁番" }, { name: "广西" }],
        [{ name: "吐鲁番" }, { name: "甘肃" }],
        [{ name: "吐鲁番" }, { name: "山西" }],
        [{ name: "吐鲁番" }, { name: "内蒙古" }],
        [{ name: "吐鲁番" }, { name: "陕西" }],
        [{ name: "吐鲁番" }, { name: "吉林" }],
        [{ name: "吐鲁番" }, { name: "福建" }],
        [{ name: "吐鲁番" }, { name: "广东" }],
        [{ name: "吐鲁番" }, { name: "青海" }],
        [{ name: "吐鲁番" }, { name: "西藏" }],
        [{ name: "吐鲁番" }, { name: "四川" }],
        [{ name: "吐鲁番" }, { name: "宁夏" }],
        [{ name: "吐鲁番" }, { name: "海南" }],
        [{ name: "吐鲁番" }, { name: "香港" }],
        [{ name: "吐鲁番" }, { name: "澳门" }],
        [{ name: "吐鲁番" }, { name: "台湾" }],
      ],
    ];

    // 发射点数组下标
    let launchIndex = 0;

    // 按照数组顺序循环发射（如果是使用定时器销毁重建图形发射点那么这个就派上用场了）
    let len = GZData.length;
    let arrIndex = launchIndex;
    if (launchIndex < len - 1) {
      launchIndex = launchIndex + 1;
    } else {
      launchIndex = 0;
    }
    // 防止切换用户列表时，定时器延迟造成下标超出数组问题
    if (arrIndex > len - 1) {
      launchIndex = 0;
      arrIndex = 0;
    }

    // 数组遍历
    let lineDataArr = [];
    lineDataArr.push(GZData[arrIndex]);

    // // 自定义多个发射点（push多少个就会有多少个同时发射点）
    // lineDataArr.push(GZData[0])
    // lineDataArr.push(GZData[1])

    // 处理线路所需要的数据格式data
    let convertData = function(data) {
      // console.log(data)
      let res = [];
      for (let i = 0; i < data.length; i++) {
        let dataItem = data[i];
        let fromCoord = geoCoordMap[dataItem[0].name];
        let toCoord = geoCoordMap[dataItem[1].name];
        if (fromCoord && toCoord) {
          res.push({
            fromName: dataItem[0].name,
            toName: dataItem[1].name,
            coords: [fromCoord, toCoord],
          });
        }
      }
      return res;
    };
    const addImage = (params, api) => {
      if (api.value(0) == "101.059024") {
        return {
          type: "image",
          style: {
            image: panji,
            x: api.coord([api.value(0), api.value(1)])[0],
            y: api.coord([api.value(0), api.value(1)])[1],
            width: 80,
            height: 60,
          },
        };
      } else {
        return {
          type: "image",
          style: {
            image: Photopng,
            x: api.coord([api.value(0), api.value(1)])[0],
            y: api.coord([api.value(0), api.value(1)])[1],
            width: 20,
            height: 19,
          },
        };
      }
    };
    // 发射点和线路颜色
    let seriesData = [];
    lineDataArr.forEach(function(item) {
      seriesData.push(
        {
          // 线路效果
          // name: item[0] + ' Top10',
          name: "广州",
          type: "lines",
          zlevel: 2,
          effect: {
            // show: true,
            // period: 6,
            // trailLength: 0,
            // symbol: planePath,
            // symbolSize: 55
          },
          label: {
            show: true,
          },
          lineStyle: {
            normal: {
              color: "#46bee9",
              width: 1.5,
              opacity: 0.4,
            },
          },
          // data: convertData(item[1])
          data: convertData(item),
        },
        {
          type: "custom",
          roam: false,
          geoIndex: 0,
          coordinateSystem: "geo",
          label: {
            normal: {
              show: false, //省份名称,
            },
            emphasis: {
              show: false,
            },
          },
          renderItem: function(params, api) {
            return addImage(params, api);
          },
          data: [
            { name: "北京", value: [116.41989, 40.189913] },
            { name: "天津", value: [117.351154, 39.28914] },
            { name: "上海", value: [121.438732, 31.072508] },
            { name: "重庆", value: [107.88398, 30.067321] },
            { name: "河北", value: [114.502461, 38.045474] },
            { name: "河南", value: [113.619918, 33.902738] },
            { name: "云南", value: [101.485108, 25.008649] },
            { name: "辽宁", value: [122.606135, 41.300702] },
            { name: "黑龙江", value: [127.693002, 48.040469] },
            { name: "湖南", value: [111.754313, 27.655081] },
            { name: "安徽", value: [117.226894, 31.849585] },
            { name: "山东", value: [118.186283, 36.374485] },
            { name: "新疆", value: [85.294712, 41.371801] },
            { name: "江苏", value: [119.48196, 32.985864] },
            { name: "浙江", value: [120.109522, 29.181876] },
            { name: "江西", value: [115.732937, 27.636129] },
            { name: "湖北", value: [112.271042, 30.98802] },
            { name: "广西", value: [108.794237, 23.833575] },
            { name: "甘肃", value: [103.823557, 36.058039] },
            { name: "山西", value: [112.305144, 37.619053] },
            { name: "内蒙古", value: [114.059024, 44.315561] },
            { name: "陕西", value: [108.887567, 35.263665] },
            { name: "吉林", value: [126.171246, 43.703944] },
            { name: "福建", value: [118.005928, 26.070282] },
            { name: "贵州", value: [106.88108, 26.826362] },
            { name: "广东", value: [113.429877, 23.334664] },
            { name: "青海", value: [96.043531, 35.726402] },
            { name: "西藏", value: [88.388277, 31.56375] },
            { name: "四川", value: [102.693438, 30.674548] },
            { name: "宁夏", value: [106.169867, 37.291331] },
            { name: "海南", value: [109.754777, 19.189617] },
            { name: "台湾", value: [120.971486, 23.749452] },
            { name: "香港", value: [114.134394, 22.377371] },
            { name: "澳门", value: [113.56642, 22.159262] },
            { name: "吐鲁番", value: [101.059024, 53.5] },
          ], //数据
        }
      );
    });
    // 中国地图线路特效配置 end
    const option = ref({
      backgroundColor: "#0B1B40", // 图形容器背景色
      tooltip: {
        // 鼠标移到图里面的浮动提示框
        // formatter详细配置： https://echarts.baidu.com/option.html#tooltip.formatter
        formatter(params) {
          // console.log(params)
          let value = params.value;
          if (Array.isArray(value)) {
            // 鼠标移到涟漪点上不显示浮层
            return "";
          }
          if (value === undefined) {
            // 鼠标移到路线上不显示浮层
            return "";
          }
          if (isNaN(value)) {
            value = 0;
          }

          let htmlStr = `
          <div style='font-size:16px;'> ${params.name}</div>
          <p style='text-align:left;margin-top:4px;'>
            区域分布：${value}%<br/>
          </p>
        `;
          return htmlStr;
        },
        // backgroundColor:"#ff7f50",//提示标签背景颜色
        // textStyle:{color:"#fff"} //提示标签字体颜色
      },
      // geo配置详解： https://echarts.baidu.com/option.html#geo
      geo: {
        // 地理坐标系组件用于地图的绘制
        map: "china", // 表示中国地图
        // roam: true, // 是否开启鼠标缩放和平移漫游
        zoom: 1.2, // 当前视角的缩放比例（地图的放大比例）
        // top:20,
        label: {
          show: true,
          color: "#f2f2f2", // 文字颜色
        },
        // 去掉南海诸岛
        // regions: [
        //   {
        //     name: "南海诸岛",
        //     value: 0,
        //     itemStyle: {
        //       normal: {
        //         opacity: 0,
        //         label: {
        //           show: false,
        //         },
        //       },
        //     },
        //   },
        // ],
        itemStyle: {
          // 地图区域的多边形 图形样式。
          areaColor: "#113868", // 地区默认颜色
          // borderColor: '#678dd6', //片区边框颜色
          borderWidth: 1, // 边框描绘
          borderColor: "#65E6FB", //片区边框颜色
          emphasis: {
            // 高亮状态下的多边形和标签样式
            areaColor: "#24cbff", // 高亮区域背景颜色
            shadowBlur: 20,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
      series: [
        ...seriesData, // 中国地图线路特效配置
        {
          // name: '', // 浮动框的标题（上面的formatter自定义了提示框数据，所以这里可不写）
          type: "map",
          geoIndex: 0,
          label: {
            show: true,
          },
          // 这是需要配置地图上的某个地区的数据，根据后台的返回的数据进行拼接（下面是我定义的假数据）
          data: [
            {
              name: "北京",
              value: 2,
            },
            {
              name: "上海",
              value: 80,
            },
            {
              name: "黑龙江",
              value: 25,
            },
            {
              name: "新疆",
              value: 10,
            },
            {
              name: "深圳",
              value: 36,
            },
            {
              name: "湖北",
              value: 2,
            },
            {
              name: "四川",
              value: 60,
            },
          ],
        },
      ],
    });
    //页面跳转
    onMounted(() => {
      console.log(proxy, chart.value, option.value);
      chart.value = proxy.$echarts.init(
        document.getElementById("NationView"),
        "macarons"
      );
      chart.value.setOption(option.value);
      //鼠标移入地图不变黄色
      chart.value.on("mouseover", function() {
        chart.value.dispatchAction({
          type: "downplay",
        });
      });
    });
    return {};
  },
});
</script>
<style lang="scss" scoped>
.NationView {
  .NationViewBox {
    height: 600px;
    .viewbox {
      height: 100%;
      #NationView {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>