vue3 可视化数据大屏 舆情实时监测数据可视化

id

276

运行环境

nodejs 23

开发框架

vue3 vite js

分辨率

1920 * 1080

演示地址

演示demo:舆情实时监测数据可视化 可视化数据大屏 vue3

动态效果

效果截图

舆情数据概览

通过数字卡片形式展示核心舆情指标：
今日舆情总量
正面舆情数量
负面舆情数量
预警信息统计

媒体来源分布

使用立体柱状图展示各类媒体平台的舆情分布情况：
微信平台
视频平台
新闻网站
微博平台
论坛社区

传播影响力分析

采用横向柱状图分析不同主体的传播影响力：
企业官方账号
普通用户
政府官方
头部KOL
媒体机构

舆情情感分布

通过饼状图和折线图双重展示舆情情感倾向：
正面情感
中性情感
负面情感

热门关键词

使用词云技术展示当前热门关键词，直观反映舆情热点话题。

舆情情感分布

折线图展示舆情情感分布

舆情地域分布

通过热力图展示不同地区的舆情分布密度，帮助识别舆情地域特征。

舆情预警信息

滚动表格实时展示预警信息，包含：
事件标题
热度指数
情感倾向
发布时间

大屏数据可视化模板

数据可视化大屏模板

更多背景图资源

数据可视化大屏背景图

项目文件目录

部分代码

<template>
  <div class="home">
    <top title="舆情实时监测数据可视化" class="wow fadeInDown" data-wow-delay="0.2s"></top>
    <div class="homeMain">
      <div class="homeMainLeft">
        <div class="homeMainLeftInner">
          <div class="item1">
            <item name="舆情数据概览" :duration="0.5" :delay="0">
              <item1></item1>
            </item>
          </div>
          <div class="item1">
            <item name="媒体来源分布" :duration="0.5" :delay="0.5">
              <item2></item2>
            </item>
          </div>
          <div class="item1">
            <item name="传播影响力分析" :duration="0.5" :delay="1">
              <item3></item3>
            </item>
          </div>
        </div>
      </div>
      <div class="homeMainCenter">
        <div class="item1" ref="item6Ref">
          <item7></item7>
        </div>
        <div class="item2">
          <item type="1" name="舆情预警信息" :duration="0.5" :delay="1">
            <item8></item8>
          </item>
        </div>
      </div>
      <div class="homeMainRight">
          <div class="homeMainRightInner">
            <div class="item1">
              <item name="舆情情感分布" :duration="0.5" :delay="0">
                <item4></item4>
              </item>
            </div>
            <div class="item1">
              <item name="热门关键词" :duration="0.5" :delay="0.5">
                <item5></item5>
              </item>
            </div>
            <div class="item1">
              <item name="舆情情感分布" :duration="0.5" :delay="1">
                <item6></item6>
              </item>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import gsap from 'gsap';
import top from "@/components/top/index.vue";
import item from "@/components/item/index.vue";
import item1 from "./components/item1/index.vue";
import item2 from "./components/item2/index.vue";
import item3 from "./components/item3/index.vue";
import item4 from "./components/item4/index.vue";
import item5 from "./components/item5/index.vue";
import item6 from "./components/item6/index.vue";
import item7 from "./components/item7/index.vue";
import item8 from "./components/item8/index.vue";
import WOW from "wow.js";
const item6Ref = ref(null);

onMounted(() => {
  const wow = new WOW();
  wow.init();
  gsap.fromTo(
      item6Ref.value,
      { scale: 0.2, opacity: 0 },
      { scale: 1, opacity: 1, duration: 0.8 }
  );
});
</script>

项目依赖

{
  "name": "yuqingjiance",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "build-qiniu": "vite build && node ./qiniu.js",
    "preview": "vite preview"
  },
  "dependencies": {
    "@meruem117/vue-seamless-scroll": "^0.1.8",
    "@tsparticles/slim": "^3.8.1",
    "@tsparticles/vue3": "^3.0.1",
    "@turf/turf": "^7.2.0",
    "@vue/shared": "^3.2.47",
    "amfe-flexible": "^2.2.1",
    "autoprefixer": "^10.4.13",
    "axios": "1.8.2",
    "dayjs": "^1.11.9",
    "disable-devtool": "^0.3.7",
    "echarts": "^5.2.0",
    "echarts-liquidfill": "^3.1.0",
    "element-plus": "^2.9.5",
    "fs": "0.0.1-security",
    "gsap": "^3.11.4",
    "pinia": "^3.0.2",
    "postcss": "^8.4.21",
    "postcss-loader": "^7.0.2",
    "postcss-pxtorem": "^6.0.0",
    "qiniu": "7.8.0",
    "sass": "1.57.1",
    "sass-loader": "13.2.0",
    "style-loader": "3.3.1",
    "vite-plugin-compression": "^0.5.1",
    "vue": "^3.2.45",
    "vue-data-ui": "^2.7.1",
    "vue-router": "^4.1.6",
    "wow.js": "^1.2.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "vite": "^4.0.0"
  }
}

源码下载

项目基于vue3+vite+js开发 nodejs 23

购买代码前请确保具备相关开发基础

本项目为纯前端大屏，无后端支持

默认数据为模拟数据，实际使用时需接入真实数据源

虚拟产品一经售出 概不退款请谅解