Vue3 + TS + Vite 项目实战 —— 大屏可视化

前期回顾  

目录

适合谁

资料在哪

技术栈有哪些 

  效果图例

⏰ 配置缩放 【重要】

自动轮播地图

⌚ 时间

定位、天气

地址：数据安全大屏 -- 项目: 该系统会从多个数据源（如日志、网络设备、云服务等）中采集、整合、处理数据，并将其转化为易于理解和分析的可视化图表、地图等形式，以帮助用户快速识别、监测和预警潜在的安全风险和威胁。通过数据安全大屏，用户可以深入了解各种系统和网络设备的运行状态、流量情况、攻击来源等信息，及时发现并应对异常行为、漏洞、恶意攻击等问题，提高数据安全保障能力。https://gitee.com/zhang-kun8888/data-security-big-screen

   谢谢观看 ：

---

适合谁

1 、大学即将毕业 或者 自学前端 缺乏项目经验的
2 、入职以后需要做 Vue 系统的、需要跨过Vue2的直接学习Vue3的
3 、后端开发 没有前端经验 要做 vue + ts + java 项目的 
4、 缺乏vue实战项目经验 基础不是很好的 本教程非常的详细 每一步都总结在md文档里面
 

资料在哪

文章最末，所有博文相关代码全部都在仓库中 ，注意所有数据均为假数据模拟，如有雷同纯属巧合，除学术研究以外不做任何适用范围，分享的是技术路径、排名无先后

技术栈有哪些 

今天会从零开始搭建一个 Vue3 + Ts + Vite + pnpm 的大屏可视化项目，项目中集成 —— eslint 、prettier、stylelint、husky、commitizen，采用组件化封装思想、hooks工具、更好的符合企业级项目。

  效果图例

⏰ 配置缩放 【重要】

自动轮播地图

使用封装：

新建autoEchartsTooltip.ts

interface Option {
  time: number;
  isLoop: boolean;
}

class TooltipAuto {
  // 功能相关的配置项
  option: Option = {
    time: 3000,
    isLoop: true,
  };
  // 数据索引，要显示那条数据的tooltip
  dataIndex = 0;
  // 保存时间函数的指针，方便清除
  timeTicket: ReturnType | undefined;
  // 实例化出来的echart
  chart = {};
  // echarts的相关配置
  chartOptions = {};
  dataLength = 0;
  seriesIndex = 0;

  constructor(chart: any, chartOptions: any, option: Option) {
    this.option = option;
    this.chart = chart;
    this.chartOptions = chartOptions;
  }

  init() {
    this.showTooltipLoop();
    this.addMouseEvent();
  }

  // 展示tooltip
  showTooltip() {
    const series = this.chartOptions.series;
    // 这里简单只处理地图的情况，series中的第一个为地图的配置项
    this.dataLength = series[this.seriesIndex].data.length;

    // 取消之前高亮的地图
    this.downplay();

    // 高亮当前图形
    this.highlight();

    this.showTip();
  }

  // 显示tooltip
  showTip() {
    this.chart.dispatchAction({
      type: "showTip",
      seriesIndex: this.seriesIndex,
      dataIndex: this.dataIndex,
    });
  }

  // 隐藏tooltip
  hideTip() {
    this.chart.dispatchAction({
      type: "hideTip",
    });
  }

  // 高亮图形
  highlight() {
    this.chart.dispatchAction({
      type: "highlight",
      seriesIndex: this.seriesIndex,
      dataIndex: this.dataIndex,
    });
  }

  // 取消高亮
  downplay() {
    this.chart.dispatchAction({
      type: "downplay",
      seriesIndex: this.seriesIndex,
      dataIndex:
        this.dataIndex === 0 ? this.dataLength - 1 : this.dataIndex - 1,
    });
  }

  // 循环展示tooltip
  showTooltipLoop() {
    this.timeTicket && clearInterval(this.timeTicket);
    if (this.option.isLoop) {
      this.showTooltip();
      this.timeTicket = setInterval(() => {
        if (this.dataIndex < this.dataLength - 1) {
          this.dataIndex++;
        } else {
          this.dataIndex = 0;
        }
        this.showTooltip();
      }, this.option.time);
    }
  }

  // 关闭循环展示
  closeTooltipLoop() {
    if (this.timeTicket) {
      clearInterval(this.timeTicket);
      this.timeTicket = null;
      this.hideTip();
      this.chart.dispatchAction({
        type: "downplay",
        seriesIndex: this.seriesIndex,
        dataIndex: this.dataIndex,
      });
    }
  }

  // 为地图添加鼠标事件，当鼠标移动时，停止轮播
  addMouseEvent() {
    this.chart.on("mousemove", this.mouseEventCallback.bind(this));
    // 鼠标离开时继续轮播
    this.chart.on("globalout", () => {
      this.showTooltipLoop();
    });
  }

  mouseEventCallback(param: any) {
    if (param.event) {
      // 阻止canvas上的鼠标移动事件冒泡
      param.event.cancelBubble = true;
    }
    this.closeTooltipLoop();
  }
}

export function initTooltip(chart: any, chartOptions: any, option: Option) {
  const tooltip = new TooltipAuto(chart, chartOptions, option);
  tooltip.init();
}

使用：

initTooltip(myChart, option, {
    time: 3000,
    isLoop: true,
  });

⌚ 时间

定位、天气

可参考vue项目中嵌入「天气预报」功能 - 掘金

地址：数据安全大屏 -- 项目: 该系统会从多个数据源（如日志、网络设备、云服务等）中采集、整合、处理数据，并将其转化为易于理解和分析的可视化图表、地图等形式，以帮助用户快速识别、监测和预警潜在的安全风险和威胁。通过数据安全大屏，用户可以深入了解各种系统和网络设备的运行状态、流量情况、攻击来源等信息，及时发现并应对异常行为、漏洞、恶意攻击等问题，提高数据安全保障能力。https://gitee.com/zhang-kun8888/data-security-big-screen

   谢谢观看 ：

从零配置完整企业级Vue3 + Ts + Vite 项目，集成（路由、pinia、组件、hooks、全局钩子、全局规约、等......）Vue3 + Ts + Vite + pnpm 项目中集成 —— eslint 、prettier、stylelint、husky、commitizen_彩色之外的博客-CSDN博客搭建VIte + Ts + Vue3项目并集成eslint 、prettier、stylelint、huskyhttps://blog.csdn.net/m0_57904695/article/details/129950163?spm=1001.2014.3001.5502

 _______________________________  期待再见  _______________________________