vue里面引用echarts制作攻击防御地图可视化视图

最新推荐文章于 2026-03-25 01:05:36 发布

原创

最新推荐文章于 2026-03-25 01:05:36 发布 · 1.5k 阅读

本文通过详细步骤教你如何在Vue项目中利用Echarts创建一个攻击防御地图的可视化视图。首先通过vue ui创建项目，接着安装Echarts并配置相关数据，包括城市坐标数据、地图样式和城市数据关系。在BMap组件中实现地图展示，并在main.js中全局引入Echarts。最后，提供GitHub源码链接供参考。

在这里插入图片描述废话少说先上一张效果图，全网最详细的教程。从下边开始
第一步创建一个新项目 cd到对应的文件夹下面，键入vue ui
进入创建项目界面。
点击在此处创建新项目

项目名称自己取，其他的设置看自己了。
在这里插入图片描述
点击创建项目

稍等片刻之后项目就创建好了
到达这个页面后可也去插件页面安装路由和vueX（如果有需求的话）

用自己常用的编辑器（我用的vscode）打开刚刚创建好的项目，npm run serve现在已经跑起来了，没有问题（运行在8080端口上）
在这里插入图片描述
为了结构清晰我把没用的组件都删掉，只留下一个Home页面，然后在components中新建一个BMap组件并引入到Home里，然后在src下边新建了一个data文件夹，下边有三个一会儿需要用到的数据 geoCoordData 是需要用到的城市的坐标数据，MapStyle 是地图样式，BDData是各个城市和保定的数据关系，到时候会在地图上以涟漪效果展示出来，目录结构如下：在这里插入图片描述接下来打开控制台安装echarts并在main.js文件中引入并挂在到原型上
安装命令：npm install echarts -S
网速跟不上的话建议用cnpm（淘宝镜像）
main.js文件如下：
还有最重要的一步在index.html里面引入百度地图秘钥 XXXXX：代表秘钥没有的话可以自己去百度地图平台申请一个
在这里插入图片描述 下边是BMap.vue 组件的源码：

<template>
  <div id="ddos">
    <div id="map"></div>
  </div>
</template>

<script>
// 引入每个地址的坐标
import geoCoordData from "../data/geoCoordData.json";
// 引入保定和其他城市相关联的数据
import BDData from "../data/BDData.json";
// 引入地图样式
import MapStyle from "../data/MapStyle.json";
export default {
  name: "Ddos",
  data() {
    return {};
  },
  mounted() {
    this.options();
  },
  methods: {
    options() {
      // console.log(geoCoordData);
      // console.log(BDData);
      let geoCoorddata = geoCoordData;
      let citys = [];
      for (let prop in geoCoorddata) {
        citys.push({ name: prop, coord: geoCoorddata[prop] });
      }

      var datas = [];
      // 注意：foreach只能遍历数组，三个参数位置不能颠倒
      // city：citys里面的单条数据
      // index：下标
      // citys：整个数组
      citys.forEach((city, idnex, citys) => {
        // Math.floor() 向下取整
        // Math.random() 函数返回一个浮点,  伪随机数在范围[0，1)
        // let temp = Math.floor(Math.random() * citys.length);
        datas.push({
          name: city.name,
          // citys[0]代表to保定
          toname: citys[0].name,
          coords: [city.coord, citys[0].coord]
        });
      });
      let series = []; //在地图上显示的数据
      [["保定", BDData]].forEach((item) => {
        series.push(
          {
            type: "lines",
            map: "china",
            coordinateSystem: "bmap",
            //所有图形的 zlevel 值。zlevel用于 Canvas 分层，
            // 不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。
            // 需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。
            zlevel: 1,
            // 线数据集。  从哪个城市to哪个城市
            data: datas,
            //线上面的动态特效
            effect: {
              show: true, //是否显示特效。
              period: 3, //特效动画的时间，单位为 s。
              trailLength: 0.5, //特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长。
              color: "#fff", //射线颜色
              symbolSize: 2 //特效标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示高和宽，例如 [20, 10] 表示标记宽为20，高为10。
            },
            lineStyle: {
              //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式。
              normal: {
                type: "dotted",
                width: "", //线宽。
                color: "#a6c84c", //线的颜色。 默认从option.color 调色盘 获取颜色
                curveness: 0.2 //边的曲度，支持从 0 到 1 的值，值越大曲度越大。
              }
            }
          },
          {
            // effectScatter：带有涟漪特效动画的散点（气泡）
            type: "effectScatter",
            mapType: "china",
            name: "BaoDing",
            coordinateSystem: "bmap",
            zlevel: 3,
            data: [
              {
                name: "",
                value: geoCo