vue3+echarts+地图（上）

npm i echarts 安装echarts 插件

在mian.js中导入echarts插件并挂载

import { createApp } from "vue";
import App from "./App.vue";
import * as echarts from "echarts";
import china from "../public/china.json"; // 导入省份数据
const app = createApp(App); // 实例化app
echarts.registerMap("china", china); // 实例化地图
app.config.globalProperties.$echarts = echarts; // 在全局挂载echarts

app.use(store).use(router).use(vueSeamless).mount("#app");

使用echarts进行配置地图

<template>
  <div id="myChart" :style="{ height: '900px', width: '1500px' }"></div>
</template>

<script>
export default {
  name: "maps",
  data() {
    return {
      option: {
        // 鼠标悬浮显示省份名称
        tooltip: {
          formatter: function (params) {
            return params.name;
          },
        },
        visualMap: {
          min: 0,
          max: 1500,
          left: "left",
          top: "bottom",
          text: ["高", "低"],
          inRange: {
            color: ["#72ACFF", "#4180D9"],
          },
          show: false,
        },
        geo: {
          map: "china",
          roam: false,
          zoom: 1.1,
          label: {
            normal: {
              show: true,
              fontSize: "10",
              color: "#333", // 字体颜色
            },
            emphasis: {
              // 动态展示的样式
              color: "#010D39",
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.6)", // 边框颜色
              color: "#C3D08B", // 地图背景色
            },
            emphasis: {
              color: "#010D39",
              areaColor: "#5E97FF",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 1,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        series: [
          {
            name: "数量占比",
            type: "map",
            geoIndex: 0,
          },
        ],
      },
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      let charts = this.$echarts.init(document.querySelector(`#myChart`));
      let mapName = "china";
      let geoCoordMap = {};
      let mapFeatures = this.$echarts.getMap(mapName).geoJson.features;
      mapFeatures.forEach(function (v) {
        // 地区名称
        let name = v.properties.name;
        // 地区经纬度
        geoCoordMap[name] = v.properties.cp;
      });
      charts.setOption(this.option);
    },
  },
};
</script>

切记设置盒子的宽和高。如果要调整地图大小，首先设置盒子的宽高，在设置geo中zoom属性根据开发要求进行设置比例。

因为省份数据量太大，下一期单独出一个省份数据的json文件

vue3+echarts+地图（上）

猜你喜欢