Vue3 Tools Armoury

Appearance

地图 MAP ​

1. 获取地图 JSON 数据 ​

去 http://datav.aliyun.com/portal/school/atlas/area_selector 下载对应的数据

图片

左侧是地图，右侧是 JSON 数据路径，点击你想要生成的地图省市、地级（以广西省为例）；

图片

注意

  1. 点进去是一级，再点进去是二级，直到你想要的省市地区（点击旁边的空白可以返回上一级）；

  2. 然后其右侧有 JSON 数据的链接地址，可以选择下载下来（放在 json 文件夹中），也可以使用在线地址！（json API 与 geoJSON 数据地址均可用）

2. 配置 API ​

使用 axios 获取数据（使用在线链接）：

图片

3. 开始绘制 ​

1. 引入地图数据 ​

js
import * as echarts from "echarts";

import { ref, onMounted, onBeforeUnmount, markRaw } from "vue";

import mapresult from "@/assets/json/area2.json"; // 我这里是下载下来了 你也可以自己加载

2. 准备容器 ​

js
<div style="width:800px;height:600px" ref="chartsDOM" id="main"></div>

3. 绘制地图 ​

html
<template>
  <div class="page">
    <div class="title">电压瞬时波峰图</div>
    <div id="main"></div>
  </div>
</template>

<script setup>
  import * as echarts from "echarts";

  import { ref, onMounted, onBeforeUnmount, markRaw } from "vue";

  import mapresult from "@/assets/json/area2.json";

  const myChart = ref(null);

  onMounted(() => {
    echartinit();
  });

  onBeforeUnmount(() => {
    window.removeEventListener("resize", function () {
      myChart.value.resize();
    });
  });

  const echartinit = () => {
    // 找到Echart元素
    const chartDom = document.getElementById("main");

    // 默认的时候支持light或者dark两种样式 必须引入markRaw 取消数据响应
    myChart.value = markRaw(echarts.init(chartDom, "light"));

    // 加载地图

    echarts.registerMap("GX", mapresult); //加载地图

    // 指定图表的配置项和数据
    // 指定图表的配置项和数据

    let options = {
      series: [
        {
          name: "广西地图",
          type: "map",
          map: "GX", // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
          label: {
            show: true,
          },
        },
      ],
    };

    myChart.value.setOption(options);
    // 监听改变大小
    window.addEventListener("resize", function () {
      myChart.value.resize();
    });
  };
</script>

<style lang="scss" scoped>
  .page {
    overflow: hidden;
    .title {
      font-size: 16px;
      color: black;
      margin: 0 auto;
      text-align: center;
      font-size: 36px;
    }
    #main {
      width: 100%;
      height: 100vh;
      border: 1px solid #ccc;
      margin: 0 auto;
      margin-top: 20px;
    }
  }
</style>

map

4. 配置项 ​

js
let options = {
  series: [
    {
      name: "广西地图",
      type: "map",
      map: "GX", // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
      label: {
        show: true,
      },
      data: [
        { name: "南宁市", value: 12001 },
        { name: "崇左市", value: 12001 },
        { name: "柳州市", value: 12001 },
        { name: "来宾市", value: 12001 },
        { name: "桂林市", value: 12001 },
        { name: "梧州市", value: 12001 },
        { name: "贺州市", value: 12001 },
        { name: "玉林市", value: 12001 },
        { name: "贵港市", value: 12001 },
        { name: "百色市", value: 12001 },
        { name: "钦州市", value: 12001 },
        { name: "河池市", value: 12001 },
        { name: "北海市", value: 12001 },
        { name: "防城港市", value: 12001 },
      ],
    },
  ],
};

5. 配置提示框 ​

js
let options = {
  tooltip: {}, // 配置提示框，有这个配置项即可
  series: [
    {
      name: "广西地图",
      type: "map",
      map: "GX", // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
      label: {
        show: true,
      },
      data: [
        { name: "南宁市", value: 12001 },
        { name: "崇左市", value: 12001 },
        { name: "柳州市", value: 12001 },
        { name: "来宾市", value: 12001 },
        { name: "桂林市", value: 12001 },
        { name: "梧州市", value: 12001 },
        { name: "贺州市", value: 12001 },
        { name: "玉林市", value: 12001 },
        { name: "贵港市", value: 12001 },
        { name: "百色市", value: 12001 },
        { name: "钦州市", value: 12001 },
        { name: "河池市", value: 12001 },
        { name: "北海市", value: 12001 },
        { name: "防城港市", value: 12001 },
      ],
    },
  ],
};

图片

加标题 ​

js
var options = {
  title: {
    text: "广西GDP统计图(/万元)",
  },
  tooltip: {}, // 配置提示框，有这个配置项即可
  series: [
    {
      name: "广西地图",
      type: "map",
      map: "GX", // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
      label: {
        show: true,
      },
      data: [
        { name: "南宁市", value: 12001 },
        { name: "崇左市", value: 12001 },
        { name: "柳州市", value: 12001 },
        { name: "来宾市", value: 12001 },
        { name: "桂林市", value: 12001 },
        { name: "梧州市", value: 12001 },
        { name: "贺州市", value: 12001 },
        { name: "玉林市", value: 12001 },
        { name: "贵港市", value: 12001 },
        { name: "百色市", value: 12001 },
        { name: "钦州市", value: 12001 },
        { name: "河池市", value: 12001 },
        { name: "北海市", value: 12001 },
        { name: "防城港市", value: 12001 },
      ],
    },
  ],
};

依据配置不同显示不同的颜色 ​

图片

  • 完整代码
html
<!--
 * @Author: jsopy
 * @Date: 2025-05-07 14:22:57
 * @LastEditTime: 2025-05-08 14:58:22
 * @FilePath: /demo1/src/pages/index2.vue
 * @Description: 
 * 
-->
<template>
  <div class="page">
    <div class="title">电压瞬时波峰图</div>
    <div id="main"></div>
  </div>
</template>

<script setup>
  import * as echarts from "echarts";

  import { ref, onMounted, onBeforeUnmount, markRaw } from "vue";

  import mapresult from "@/assets/json/area2.json";

  const myChart = ref(null);

  onMounted(() => {
    echartinit();
  });

  onBeforeUnmount(() => {
    window.removeEventListener("resize", function () {
      myChart.value.resize();
    });
  });

  const echartinit = () => {
    // 找到Echart元素
    const chartDom = document.getElementById("main");

    // 默认的时候支持light或者dark两种样式 必须引入markRaw 取消数据响应
    myChart.value = markRaw(echarts.init(chartDom, "light"));

    // 加载地图

    echarts.registerMap("GXMap", mapresult); //加载地图

    // 指定图表的配置项和数据
    // 指定图表的配置项和数据

    let options = {
      visualMap: {
        min: 1111,
        max: 333332,
        realtime: false,
        calculable: true,
        inRange: {
          color: ["lightskyblue", "yellow", "orangered"],
        },
      },
      tooltip: {}, // 配置提示框，有这个配置项即可
      series: [
        {
          name: "广西地图",
          type: "map",
          map: "GXMap", // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
          label: {
            show: true,
          },
          data: [
            { name: "南宁市", value: 12001 },
            { name: "崇左市", value: 12001 },
            { name: "柳州市", value: 12001 },
            { name: "来宾市", value: 12001 },
            { name: "桂林市", value: 233332 },
            { name: "梧州市", value: 12001 },
            { name: "贺州市", value: 12001 },
            { name: "玉林市", value: 333330 },
            { name: "贵港市", value: 12001 },
            { name: "百色市", value: 12001 },
            { name: "钦州市", value: 135332 },
            { name: "河池市", value: 12001 },
            { name: "北海市", value: 12001 },
            { name: "防城港市", value: 313332 },
          ],
        },
      ],
    };

    myChart.value.setOption(options);
    // 监听改变大小
    window.addEventListener("resize", function () {
      myChart.value.resize();
    });
  };
</script>

<style lang="scss" scoped>
  .page {
    overflow: hidden;
    .title {
      font-size: 16px;
      color: black;
      margin: 0 auto;
      text-align: center;
      font-size: 36px;
    }
    #main {
      width: 1000px;
      height: 800px;
      border: 1px solid #ccc;
      margin: 0 auto;
      margin-top: 20px;
    }
  }
</style>

网站备案号:津ICP备15001525号-2