vue3可视化项目——二维地图的引入

由于项目涉及到地图的引入，需要导入地图组件。

这里使用的是echarts开发的地图组件。

先来看看样子：

 在echarts官网上找不到类似这样好看一点的，只有一些常规的案例。这里先推荐一个网站，建议可以在这上面找，毕竟这里的案例比较全面。

首页 - ECharts图表集,ECharts demo集,echarts gallery社区,Make A Pie,分享你的可视化作品isqqw.com

随便打开一个都可以看到配置源码（以这个地图为例）

 ok！怎么导入呢？

1.引入echarts

毕竟这个图表集也是基于echarts进行开发的，所以核心库还是要导入echarts

快速上手 - 使用手册 - Apache ECharts

如果你使用script标签的形式导入，先去下载

在 echarts CDN by jsDelivr - A CDN for npm and GitHub 选择 dist/echarts.js，点击并保存为 echarts.js 文件。

echarts CDN by jsDelivr - A CDN for npm and GitHub

如果使用的是npm的方式引入

npm install echarts

然后在main.js全局引入或者在单独页面引入也行

import * as echarts from 'echarts';

2.准备一个容器用来装图表，并且给这个容器一个id属性进行标识

类似这样：

<template>
  <div>
    <div id="liner"></div>
  </div>
</template>

还要给这个容器设置大小，也就是图标的大小

#liner {
  width: 1980px;
  height: 1100px;
}

 不然显示不出来，里面的canvas画布也会继承这个宽和高！

3.将配置复制粘贴过来，以本次使用的地图为例

var uploadedDataURL = "/asset/get/s/data-1576821068997-HGlupX6J.json";
myChart.showLoading();
var data = [];
$.getJSON(uploadedDataURL, function(geoJson) { 
    echarts.registerMap('广东', geoJson);
    data = geoJson.features.map((item) => { // 显示窗口的数据转换
        return {
            value: (Math.random() * 1000).toFixed(2),
            name: item.properties.name
        }
    });
    myChart.hideLoading();
    option = {
        backgroundColor: '#404a59', // 背景
        tooltip: { // 窗口外框
            backgroundColor: 'rgba(0,0,0,0)',
            trigger: 'item',
        },
        legend: {
            show: false,
        },
        series: [{
            tooltip: { // 显示的窗口
                trigger: 'item',
                formatter: function(item) {
                    var tipHtml = '';
                    tipHtml = '<div style="background:#fff;border-radius:10px;padding-top:10px;box-shadow:0 0 10px #666">' +
                        '<div style="color:#fff;height:20px;border-radius:6px;font-size:12px;line-height:20px;background-color:#5861a2;text-align:center;margin:0 2px;">' + item.data.name + '</div>' +
                        '<div style="text-align:center;color:#494949;padding:8px 6px">' +
                        '<span style="font-size:18px;font-weight:bold;">' + '测试设备：' + item.data.value + ' ' + '</span>' +
                        '</div>' + '</div>';
                    return tipHtml;
                }
            },
            name: '广东省数据',
            type: 'map',
            map: '广东', // 自定义扩展图表类型
            zoom: 0.65, //缩放
            showLegendSymbol: true,
            label: { // 文字
                show: true,
                color: '#fff',
                fontSize: 10
            },
            itemStyle: {  //地图样式
                normal: {
                    borderColor: 'rgba(147, 235, 248, 1)',
                    borderWidth: 1,
                    areaColor: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.8,
                        colorStops: [{
                            offset: 0, 
                            color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                        }, {
                            offset: 1, 
                            color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    },
                    shadowColor: 'rgba(128, 217, 248, 1)',
                    // shadowColor: 'rgba(255, 255, 255, 1)',
                    shadowOffsetX: -2,
                    shadowOffsetY: 2,
                    shadowBlur: 10
                }
            },
            emphasis: { //鼠标移入动态的时候显示的默认样式
                itemStyle: {
                    areaColor: '#FFD181',
                    borderColor: '#404a59',
                    borderWidth: 1
                }
            },
            layoutCenter: ['50%', '50%'],
            layoutSize: '160%',
            markPoint: {
                symbol: 'none'
            },
            data: data,
        }],
    }
    myChart.setOption(option);
    showTips('广州市');
})

这里如果只是简单的复制粘贴过来，必定会报错，因为还需要引入相关的依赖。

 比如这一处，要引入一个json文件，而这个文件你不好找得到，而且这个网站也没有给出链接。那怎么办？玩不了？

那就只能顺腾摸瓜，直接到该页面的网络请求中找到对应的文件，然后双击进行下载。

 

除了这个问题，还可能会有这个报错：

 这个$符，老熟客了，是jq里面的那个$符，所以还要导入jquery。

<script src="/src/assets/static/js/jquery.min.js"></script>

我有源文件，所以我直接在index.html下使用script标签进行导入，当然使用npm导入也行。

还可能有这个报错：

 这是因为option配置不生效

因为这里的配置代码少了个var，定义一下就好了。也与源官网的保持一致。

 好了，以上几个问题注意一下就好了，给出我的源码：

<template>
  <div>
    <div id="liner"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
onMounted(() => {
  initChart();
});

function initChart() {
  var myEcharts = echarts.init(
    document.getElementById("liner"),
    "purple-passion"
  );
  var uploadedDataURL = "/src/assets/static/data-1576821068997-HGlupX6J.json";
  myEcharts.showLoading();
  var data = [];
  $.getJSON(uploadedDataURL, function (geoJson) {
    echarts.registerMap("广东", geoJson);
    data = geoJson.features.map((item) => {
      // 显示窗口的数据转换
      return {
        value: (Math.random() * 1000).toFixed(2),
        name: item.properties.name,
      };
    });
    myEcharts.hideLoading();
    var option = {
      backgroundColor: "#404a59", // 背景颜色
      // 提示框背景颜色
      tooltip: {
        backgroundColor: "rgba(0,0,0,0)",
        trigger: "item",
      },
      legend: {
        show: false,
      },
      series: [
        {
          tooltip: {
            // 显示的窗口
            trigger: "item",
            formatter: function (item) {
              var tipHtml = "";
              tipHtml =
                '<div style="background:#fff;border-radius:10px;padding-top:10px;box-shadow:0 0 10px #666">' +
                '<div style="color:#fff;height:20px;border-radius:6px;font-size:12px;line-height:20px;background-color:#5861a2;text-align:center;margin:0 2px;">' +
                item.data.name +
                "</div>" +
                '<div style="text-align:center;color:#494949;padding:8px 6px">' +
                '<span style="font-size:18px;font-weight:bold;">' +
                "测试设备：" +
                item.data.value +
                " " +
                "</span>" +
                "</div>" +
                "</div>";
              return tipHtml;
            },
          },
          name: "广东省数据",
          type: "map",
          map: "广东", // 自定义扩展图表类型
          zoom: 0.65, //缩放
          showLegendSymbol: true,
          label: {
            // 文字
            show: true,
            color: "#fff",
            fontSize: 10,
          },
          itemStyle: {
            //地图样式
            normal: {
              borderColor: "rgba(147, 235, 248, 1)",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
              shadowColor: "rgba(128, 217, 248, 1)",
              // shadowColor: 'rgba(255, 255, 255, 1)',
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10,
            },
          },
          emphasis: {
            //鼠标移入动态的时候显示的默认样式
            itemStyle: {
              areaColor: "#FFD181",
              borderColor: "#404a59",
              borderWidth: 1,
            },
          },
          // 地图位置
          layoutCenter: ["50%", "50%"],
          layoutSize: "160%",
          markPoint: {
            symbol: "none",
          },
          data: data,
        },
      ],
    };
    myEcharts.setOption(option);
    showTips("广州市");
  });
}
</script>

<style scoped>
#liner {
  width: 1980px;
  height: 1100px;
}
</style>

onMounted我这里配置了自动导入这些生命周期函数，所以页面上没有写出，使用时记得导入一下就可以了！

下一篇是拓展篇，3D地图的使用：

vue3项目——3D地图的使用-CSDN博客