vue3使用echarts绘制地图

最新推荐文章于 2024-07-23 11:13:06 发布

Ly_info

最新推荐文章于 2024-07-23 11:13:06 发布

阅读量1.5k

点赞数 21

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/Liuyiaixuexi/article/details/134693979

版权

<template>
  <div>
    <div id="map"></div>
  </div>
</template>
<style scoped>
#map {
  width: 100%;
  height: 400px;
  background-color: #171e2b;
}
</style>

下面是关于地图的绘制的配置项，需要先下载echarts或者导入echarts

<script setup>
import { onMounted } from "vue";
import * as echarts from "echarts";

onMounted(() => {
  let myEchart = echarts.init(document.querySelector("#map"), null, {
    renderer: "canvas",
    useDirtyRect: false,
  });
  let index = 0;
  let timmerID = 0;
  let dataIndex = ref(0);

  // 加载地图数据
  fetch("../../../geojson.json")
    .then((response) => response.json())
    .then((chinaJson) => {
      echarts.registerMap("chinaMap", chinaJson);
      let option = {
        tooltip: {
          backgroundColor: "rgba(0,0,0,0)",
          trigger: "item",
        },
        geo: [
          {
            map: "chinaMap",
            roam: true,
            zoom: 10,
            show: false, //
            emphasis: {
              itemStyle: {
                show: true, // 在高亮状态下显示标签
              },
              label: {
                show: false,
              },
            },
          },
        ],
        series: [
          {
            name: "chinaMapPopEstimates",
            type: "map",
            roam: false,
            map: "chinaMap",
            emphasis: {
              //高亮状态下
              label: {
                show: true,
              },
              itemStyle: {
                show: false,
                disabled: true,
              },
            },
            label: {
              show: false,
              color: "#00BFFF",
              fontSize: 20,
              // formatter(e){
              //     console.log(e)
              // }
            },
            select: {
              //禁用点击选中效果。
              disabled: true,
            },
            zoom: 1.2, //放大倍数
            itemStyle: {
              //地图区域的多边形 图形样式。
              borderColor: "rgba(147, 235, 248, 1)",
              color: "#fff",
              borderWidth: 1,
              areaColor: {
                //地图区域的颜色。
                type: "radial", //径向渐变.
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(255, 235, 248, 0)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(255, 235, 248, .2)", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
              shadowColor: "rgba(128, 217, 248, 1)",
            },
            emphasis: {
              // 高亮状态下的多边形和标签样式。鼠标移入动态的时候显示的默认样式
              itemStyle: {
                //地图区域的颜色。
                areaColor: "#4adcf0",
                borderColor: "#404a59",
                borderWidth: 1,
              },
              label: {
                // 文字
                show: true,
                color: "#fff",
                fontSize: 10,
              },
            },
            tooltip: {
              // 鼠标移动上去的时候的提示窗口
              trigger: "item",
              formatter: function (item) {
                // console.log("item===>",item);
                var tipHtml = "";
                tipHtml = `<div style="padding: .6rem .8rem;font-size: .625rem;color:#fff;border-radius:10%;background: linear-gradient(#cccecf, #cccecf) left top,
linear-gradient(#cccecf, #cccecf) left top,
linear-gradient(#cccecf, #cccecf) right top,
linear-gradient(#cccecf, #cccecf) right top,
linear-gradient(#cccecf, #cccecf) left bottom,
linear-gradient(#cccecf, #cccecf) left bottom,
linear-gradient(#cccecf, #cccecf) right bottom,
linear-gradient(#cccecf, #cccecf) right bottom;
background-repeat: no-repeat;
background-size: .08rem .3rem, .3rem .08rem;background-color:rgba(6, 79, 111,.6);">${item.name}<span style="color:#f9eb59;font-size:.625rem">5家</span> </div>`;
                return tipHtml;
              },
              borderWidth: 0,
            },
            data: [
              { name: "广东省", value: 4822023 },
              { name: "北京市", value: 731449 },
              { name: "新疆维吾尔自治区", value: 6553255 },
              { name: "海南省", value: 6553255 },
            ],
          },
          {
            name: "Route",

            coordinateSystem: "geo",
            geoIndex: 0,
            emphasis: {
              label: {
                show: false,
              },
            },
            polyline: true,
            itemStyle: {
              show: false,
            },
            lineStyle: {
              color: "rgba(255, 0, 0, 1)",
              width: 2,
              opacity: 0.1,
              type: "solid",
            },
            effect: {
              //动效配置
              show: true,
              period: 8,
              color: "#ff0000",
              constantSpeed: 80,
              trailLength: 0.2,
              symbolSize: [20, 12],
              symbol:
                "path://M35.5 40.5c0-22.16 17.84-40 40-40s40 17.84 40 40c0 1.6939-.1042 3.3626-.3067 5H35.8067c-.2025-1.6374-.3067-3.3061-.3067-5zm90.9621-2.6663c-.62-1.4856-.9621-3.1182-.9621-4.8337 0-6.925 5.575-12.5 12.5-12.5s12.5 5.575 12.5 12.5a12.685 12.685 0 0 1-.1529 1.9691l.9537.5506-15.6454 27.0986-.1554-.0897V65.5h-28.7285c-7.318 9.1548-18.587 15-31.2715 15s-23.9535-5.8452-31.2715-15H15.5v-2.8059l-.0937.0437-8.8727-19.0274C2.912 41.5258.5 37.5549.5 33c0-6.925 5.575-12.5 12.5-12.5S25.5 26.075 25.5 33c0 .9035-.0949 1.784-.2753 2.6321L29.8262 45.5h92.2098z",
            },
            data: [
              {
                coords: [
                  [116.405285, 39.904989],
                  [106.504962, 29.533155],
                  [113.429915, 22.334652],
                  [116.629915, 23.334652],
                  [116.405285, 39.904989],
                ],
              },
            ],
          },
        ],
      };
      myEchart.setOption(option);
    });
  myEchart.on("mouseover", (e) => {
    clearInterval(timmerID);
  });

  document.querySelector("#map").addEventListener("mouseover", () => {
    clearInterval(timmerID);
  });

  timmerID = setInterval(() => {
    myEchart.dispatchAction({
      type: "downplay",
      seriesIndex: 0,
      dataIndex: dataIndex.value,
    });

    dataIndex.value = Math.floor(Math.random() * 34);
    if (dataIndex.value > 34) {
      dataIndex.value = 0;
    }

    myEchart.dispatchAction({
      type: "highlight",
      seriesIndex: 0,
      dataIndex: dataIndex.value,
    });

    myEchart.dispatchAction({
      type: "showTip",
      seriesIndex: 0,
      dataIndex: dataIndex.value,
    });
  }, 200);
});
</script>

这边主要介绍一下地图配置项，大家可以按照自己的想法来修改配置项

geo 配置项定义了地图的基本设置：

map: “chinaMap”：指定使用的地图类型为 “chinaMap”，即中国地图。
roam: true：启用地图的鼠标缩放和平移功能。
zoom: 10：设置地图的初始缩放级别为 10。
show: false：设置地图不显示，即隐藏地图。
series 配置项定义了地图系列的样式和数据：

name: “chinaMapPopEstimates”：地图系列的名称。
type: “map”：指定系列类型为地图。
roam: false：禁用地图的鼠标缩放和平移功能。
map: “chinaMap”：指定使用的地图类型为 “chinaMap”，与上述 geo 配置项中的地图类型相同。
emphasis：定义地图区域的高亮状态下的样式。
label.show: false：高亮状态下不显示标签。
itemStyle.show: false：高亮状态下不显示区域样式。
label：定义地图区域的标签样式。
show: true：显示标签。
color: “#fff”：标签的颜色为白色。
fontSize: 10：标签的字体大小为 10 像素。
select.disabled: true：禁用点击选中效果。
zoom: 1.2：设置地图的放大倍数为 1.2。
itemStyle：定义地图区域的多边形样式。
borderColor: “rgba(147, 235, 248, 1)”：设置边框颜色。
color: “#fff”：设置区域颜色为白色。
borderWidth: 1：设置边框宽度为 1 像素。
areaColor：设置区域的颜色为径向渐变。
type: “radial”：设置渐变类型为径向渐变。
x: 0.5, y: 0.5：设置渐变的中心点坐标。
r: 0.8：设置渐变的半径。
colorStops：设置渐变的颜色变化。
shadowColor: “rgba(128, 217, 248, 1)”：设置阴影颜色。
tooltip：定义鼠标移动上去时的提示窗口样式和内容。
trigger: “item”：设置触发类型为 “item”，即当鼠标移动到图形上时显示提示窗口。
formatter：定义提示窗口的内容格式化函数。
在函数中，根据传入的 item 参数生成自定义的 HTML 内容，包括区域名称和一个小的文本标记。
borderWidth: 0：设置提示窗口的边框宽度为 0。
data：定义地图区域的数据，包括名称和对应的值。
第二个系列是用于绘制路径的：

name: “Route”：路径系列的名称。
coordinateSystem: “geo”：指定使用地理坐标系。
geoIndex: 0：指定使用索引为 0 的地图。
emphasis.label.show: false：高亮状态下不显示标签。
polyline: true：绘制折线图。
itemStyle.show: false：不显示折线图的图形样式。
lineStyle：定义这段代码是使用 Echarts 绘制地图的配置代码。主要包括地图的样式、数据以及提示窗口的配置。让我们逐个分析：
geo 配置项定义了地图的基本设置：