简介一套基于Vue框架的舆情分析系统前端设计源码面向具备Vue基础的前端开发者和需快速搭建舆情监控界面的团队。项目以组件化开发为核心包含11个Vue组件和5个JavaScript脚本覆盖热度词云、情感趋势、地域分布等可视化模块并通过JSON配置统一管理路由与接口地址结构清晰、便于扩展。资源共25个文件体积约865KB除核心代码外还包含4个JSON配置、1个HTML入口、图标、PNG图片、readme文档及.gitignore等工程化文件适合作为完整前端工程参考。目前已有109人学习下载可用于学习舆情分析系统的界面设计也可直接作为基础进行二次开发。这份源码组件划分细致图表模块如HotTopicsCloud、SentimentTrendLine等独立封装配合vue.config.js、babel.config.js等展示工程化配置附有说明文档便于快速上手并与后端对接是构建舆情分析前端的高效起点。1. 舆情分析系统前端为什么选 Vue设计源码该把握什么做品牌舆情分析系统前端时真正难的不是把接口数据渲染出来而是当列表、趋势、热词、情感分析这些模块共享同一份筛选条件时状态不乱、图表不闪、列表不卡。我习惯用 Vue 框架来承担这件事模板语法贴近数据变化的表达响应式系统让组件不再手动操作 DOM全局状态交给 Pinia 统一管理无论新人还是老手拿到代码都能快速定位条件、接口和渲染逻辑。基于 Vue 框架的舆情分析系统前端设计源码核心要解决一条链路舆情数据从接口到页面再进入列表、图表、筛选联动。源码落地路径包括请求层封装、Pinia 状态设计、ECharts 大屏适配、目录划分以及最后的真机验证技巧。适合正在做品牌口碑监测、竞品讨论分析的开发者也适合准备前端面试题时想用真实业务场景练手的人。2. 舆情数据接入从接口定义到请求层封装2.1 舆情系统的接口结构与返回模型设计舆情分析系统的前端源码能不能长期改下去多半取决于数据模型稳不稳。不同后端团队返回的 JSON 格式差异很大但进入前端业务层之前我会先定义一套 TypeScript 模型把接口字段收敛到统一结构。这样后续接真实后端只需要改 api 目录里的映射函数不用把每一个页面都翻一遍。// src/types/opinion.ts export interface OpinionRecord { id: string; title: string; content: string; source: string; // 来源news / weibo / forum / video author: string; publishTime: string; score: number; // 情感分数 0-100 heat: number; // 热度值用于排序和气泡图 keywords: string[]; url: string; } export interface PageQuery { page: number; pageSize: number; keyword: string; source: string; dateRange: [string, string] | []; scoreRange: [number, number]; sortBy: heat | publishTime; }上述模型把筛选条件都放进PageQuery是因为舆情看板里列表、折线图、热词云共享同一组参数。如果每个组件各自维护 keyword、dateRange后续加一个“只看负面”开关就要同时改五六个地方。score和heat分开定义也重要score 给情感分析用heat 给热度排序用两者不能混。对应到常见后端接口可以归纳成四个舆情列表、热度趋势、情感占比、热词榜单。前端源码里的 api 目录也应保持这个划分页面组件只面向接口语义不关心后端聚合逻辑。2.2 用 Axios 封装请求层统一处理 token 和错误码有了模型下一步是请求层。直接在每个页面里fetch会很散舆情接口又经常要带 token、做超时与错误码处理所以我会用一个request.ts统一封装。这个文件是整个前端源码里最不该乱写的部分。// src/utils/request.ts import axios from axios; const service axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL as string, timeout: 15000, withCredentials: true }); service.interceptors.request.use((config) { const token localStorage.getItem(access_token); if (token) { config.headers.Authorization Bearer ${token}; } return config; }); service.interceptors.response.use( (response) { const res response.data; if (res.code ! 0) { if (res.code 401) { window.location.href /login; } return Promise.reject(new Error(res.message || Request Error)); } return res.data; }, (error) { const status error.response?.status; if (status 500) { window.$message?.error(服务端异常请稍后重试); } else if (status 401) { window.location.href /login; } return Promise.reject(error); } ); export function getT(url: string, params?: object): PromiseT { return service.get(url, { params }); } export function postT(url: string, data?: object): PromiseT { return service.post(url, data); }这里有几个参数值得注意baseURL放在环境变量里便于测试环境和生产环境自动切换timeout设 15 秒因为舆情搜索结果偶尔需要聚合统计比普通页面等待更久withCredentials只在需要 Cookie 登录时才打开。响应拦截器把外层{ code, message, data }拆掉页面里拿到的直接是业务数据不用每次.then(res res.data.data)。错误码需要跟后端约定一套规则我在项目中常用的是code含义前端处理0成功直接返回 data401登录过期清空登录态并跳转 /login403无权限提示“无访问权限”429接口限流等待后重试5xx服务端异常全局 message 提示舆情搜索接口很容易触发 429因为用户每次输入关键词都会请求一次。遇到 429 时简单的做法是在拦截器里做两次重试第二次仍失败就提示稍后再试。2.3 用 Pinia 管理舆情筛选条件的全局状态舆情分析系统里筛选条件不再属于某个页面而是全局共享的。点击热词云里的某个热词列表要过滤趋势图要圈定时间范围情感占比也要同步刷新。用 Pinia 管理这个 query 对象是少折腾的源码结构。// src/stores/opinion.ts import { defineStore } from pinia; import { get } from /utils/request; import type { OpinionRecord, PageQuery, PageResult } from /types/opinion; export const useOpinionStore defineStore(opinion, { state: () ({ query: { page: 1, pageSize: 20, keyword: , source: , dateRange: [] as [string, string] | [], scoreRange: [0, 100] as [number, number], sortBy: publishTime as heat | publishTime }, records: [] as OpinionRecord[], total: 0, loading: false }), actions: { async fetchOpinionList() { this.loading true; try { const result await getPageResultOpinionRecord(/opinions, this.query); this.records result.list; this.total result.total; } finally { this.loading false; } }, async applyQuery(partial: PartialPageQuery) { this.query { ...this.query, ...partial, page: 1 }; await this.fetchOpinionList(); } } });applyQuery是专门用来合并查询参数的方法它会把 page 重置为 1避免用户筛选后停在不存在的一页。在列表组件里调用applyQuery({ source: weibo })趋势图组件可以通过 watch 同一个 store 里的 query 来请求新数据不用父子组件传事件。这里有一个容易被忽略的点query里的dateRange是数组在 Pinia 中修改时一定要整体替换不能直接 push否则响应式追踪不到深层索引变化。配合 Vue Router 的 route.query 做 URL 同步后刷新页面也不会丢失当前筛选状态这个验证技巧在最后一章展开。3. 核心模块实现舆情列表、趋势图与情感分析组件设计3.1 舆情信息列表的虚拟滚动与关键词高亮舆情列表通常是整个页面最长的模块。一次搜索能拉回上千条内容直接v-for渲染会让首屏停顿还会让滚动条卡顿。我在做这类界面时用的是固定行高虚拟列表只渲染可视区域的 20 条滚动时用 translateY 移动整个渲染区。template div refviewport classopinion-list scrollonScroll div classphantom :style{ height: totalHeight px }/div div classvirtual-body :style{ transform: translateY(${offsetY}px) } div v-foritem in visibleRecords :keyitem.id classopinion-card h3{{ item.title }}/h3 p v-htmlhighlight(item.content, props.keyword)/p span{{ item.source }} · {{ item.publishTime }}/span /div /div /div /template script setup import { ref, computed } from vue; const props defineProps({ records: { type: Array, default: () [] }, keyword: { type: String, default: } }); const ROW_HEIGHT 120; const VISIBLE_COUNT 20; const viewport ref(null); const offsetY ref(0); const totalHeight computed(() props.records.length * ROW_HEIGHT); const startIdx computed(() Math.floor(offsetY.value / ROW_HEIGHT)); const endIdx computed(() startIdx.value VISIBLE_COUNT); const visibleRecords computed(() props.records.slice(startIdx.value, endIdx.value)); function onScroll() { offsetY.value viewport.value.scrollTop; } function escapeHtml(text) { const div document.createElement(div); div.textContent text; return div.innerHTML; } function highlight(text, keyword) { if (!keyword) return escapeHtml(text); const escaped escapeHtml(text); const safeKeyword escapeHtml(keyword).replace(/[.*?^${}()|[\]\\]/g, \\$); const re new RegExp((${safeKeyword}), gi); return escaped.replace(re, mark classhighlight$1/mark); } /script这段代码的核心参数是ROW_HEIGHT和VISIBLE_COUNT。舆情卡片一般由标题、摘要、来源三行组成120 像素足够可视区 20 条可以覆盖大多数屏幕高度再多会影响高亮渲染性能。highlight里先escapeHtml再拼正则是为了防止用户搜索script时把脚本注入到v-html。需要注意虚拟滚动要求每一条卡片高度一致。如果摘要超过两行就截断或加line-clamp否则滚动位置和底部留白会对不上。需要展开全文时把展开态改成独立行高并触发整体高度重算。3.2 ECharts 趋势图和舆论场大屏的适配方案趋势图是舆情分析系统前端的视觉核心。我很少直接全量引入 ECharts而是用echarts/core按需注册折线图、柱状图、饼图和渲染器否则打包后光图表库就多出几百 KB。官方按需引入的写法如下。// src/composables/useEChart.ts import * as echarts from echarts/core; import { LineChart, PieChart, BarChart } from echarts/charts; import { GridComponent, TooltipComponent, LegendComponent, DataZoomComponent } from echarts/components; import { CanvasRenderer } from echarts/renderers; import { onMounted, onBeforeUnmount, type Ref } from vue; echarts.use([ LineChart, PieChart, BarChart, GridComponent, TooltipComponent, LegendComponent, DataZoomComponent, CanvasRenderer ]); export function useEChart(el: RefHTMLElement | null) { let chart: echarts.ECharts | null null; let observer: ResizeObserver | null null; onMounted(() { if (!el.value) return; chart echarts.init(el.value); observer new ResizeObserver(() chart?.resize()); observer.observe(el.value); }); onBeforeUnmount(() { observer?.disconnect(); chart?.dispose(); chart null; }); return chart; }ResizeObserver比 window resize 更适合大屏左侧筛选面板折叠时图表容器宽度会变观察容器尺寸变化能自动调用chart.resize()。图表实例必须在onBeforeUnmount里dispose否则切路由后 canvas 不会释放连续操作十几分钟就能观察到页面越来越卡。趋势图的 option 我会把重点放在时间轴和缩放上const trendOption { grid: { left: 60, right: 24, top: 40, bottom: 60 }, tooltip: { trigger: axis }, dataZoom: [ { type: inside, start: 0, end: 30 }, { type: slider, bottom: 10, height: 18 } ], xAxis: { type: time }, yAxis: { type: value, name: 讨论热度 }, series: [{ name: 全网热度, type: line, smooth: true, areaStyle: { opacity: 0.15 }, data: heatTrendData }] };dataZoom的start: 0, end: 30表示默认只显示最近 30% 的数据因为舆情分析最关心的是近期变化而不是几个月前的毛刺。用户拖动缩放后要做节流再把 start、end 存到 store避免每次都触发网络请求。大屏适配还可以按需求拆分场景图表类型关键配置热度趋势折线图dataZoom、smooth来源分布柱状图只显示 TOP10情感占比玫瑰图正/中/负色系地域分布地图注册地图 JSON3.3 情感分析模块用接口分数映射图表色系舆情的情感分析由后端模型计算前端负责把数值翻译成可读的信息。我约定score在 0 到 100 之间大于 60 是正面小于 40 是负面中间是中性。阈值统一后接口调整模型只改数字前端不必改颜色映射。// src/utils/opinion.ts export function sentimentMeta(score: number) { if (score 40) { return { name: 负面, color: #d9384a }; } if (score 60) { return { name: 中性, color: #e8a33d }; } return { name: 正面, color: #18a058 }; } export function sentimentRatioList(list: OpinionRecord[]) { const counts { 正面: 0, 中性: 0, 负面: 0 }; list.forEach(item { const meta sentimentMeta(item.score); counts[meta.name] 1; }); return Object.entries(counts).map(([name, value]) ({ name, value, itemStyle: { color: sentimentMeta(name 正面 ? 100 : name 中性 ? 50 : 0).color } })); }sentimentRatioList可以直接作为 ECharts 玫瑰图的 data。注意情感占比不应该和列表用同一份 records 计算因为列表有分页占比应该是全量接口返回的统计值。正确的请求路径是/opinions/sentiment返回正面、中性、负面三条汇总前端只需要把它换成颜色数组。在界面设计上如果不单独开一个大屏页我会把情感占比做成一个悬浮在列表右上角的小圆环点击圆环只筛选对应情感例如只看负面内容。这时调用的还是applyQuery({ scoreRange: [0, 40] })而不是前端本地过滤。这样做的好处是后端在聚合趋势图和热词时也只计算负面内容整个页面始终处于同一口径。4. 从源码目录到工程化Vue 前端代码的可维护性设计4.1 目录结构与路由懒加载舆情分析系统不是只有一个页面还可能有总览大屏、实时舆情列表、报表中心、系统配置。源码如果全堆在 views 下几个月后就不好维护了。我常用的目录结构如下src ├── api # 按接口模块拆分的请求 ├── assets # 静态资源与全局样式变量 ├── components # 通用组件EChartPanel.vue、VirtualList.vue ├── composables # 图表初始化、虚拟滚动等组合式函数 ├── layouts # 大屏布局、后台布局 ├── router ├── stores # Pinia store ├── styles # reset.scss、variables.scss ├── types # 全局类型定义 └── views ├── dashboard # 舆情总览 └── opinions # 舆情列表和详情这个划分的核心是按业务模块聚合而不是按代码类型聚合。api 目录与后端接口一一对应前端在接手 Java 后端项目时也能快速从接口列表找到对应页面。路由这里要注意大屏页和后台页体积差异很大不要一起打包。Vue Router 的动态 import 按页面拆包是 Vite 构建时的常见做法import { createRouter, createWebHistory } from vue-router; const router createRouter({ history: createWebHistory(), routes: [ { path: /, component: () import(/layouts/DashboardLayout.vue), children: [ { path: trend, component: () import(/views/dashboard/trend.vue) }, { path: opinions, component: () import(/views/opinions/index.vue) } ] } ] });懒加载后dashboard和opinions会被打成两个独立 chunk。如果舆情总览页只需要 ECharts 和 WebSocket列表页需要虚拟列表组件两者不会在首屏互相拖累。4.2 环境变量与多环境部署舆情分析前端大多要同时部署到开发、测试和生产三套环境。我在源码里保留多份环境文件构建时用 Vite 的import.meta.env注入地址。下面是一份生产环境配置示例# .env.production VITE_API_BASE_URL/api VITE_WS_URLwss://opina.example.com/ws VITE_APP_TITLE品牌舆情监测在request.ts里读取VITE_API_BASE_URL在 WebSocket 实例里读取VITE_WS_URL。这样不同环境切换接口网关时前端代码一行都不用改只替换环境文件。注意改完.env后必须重启 dev server否则 Vite 不会重新注入环境变量。新同事拿到这份源码时完成的步骤只有三步先用pnpm install安装依赖再复制.env.development为本地配置最后执行pnpm dev。如果网络较慢或者依赖装不上优先检查 Node 版本和包管理器镜像源而不是反复删node_modules。环境变量表可以统一维护在src/types/env.d.ts里变量名用途开发示例VITE_API_BASE_URL请求接口的 baseURL/apiVITE_WS_URL实时舆情推送地址ws://localhost:8080/wsVITE_MOCK_ENABLE是否启用 mocktrueVITE_MOCK_ENABLE是很多人会忽略的字段。它应该在 main.ts 里动态注册 mock而不是让 mock 文件永远参与打包。4.3 Mock 数据与调试面板舆情后端接口经常比前端晚一周因此前端源码里要带 mock 方案我一般用vite-plugin-mock在开发服务器上拦截请求。按上面提到的四个接口分别建立 mock 文件返回能支撑页面跑起来的数据结构。// mock/opinions.ts import { MockMethod } from vite-plugin-mock; function mockOpinions(query: Recordstring, any) { const page Number(query.page ?? 1); const pageSize Number(query.pageSize ?? 20); const list Array.from({ length: pageSize }, (_, i) ({ id: ${page}-${i}, title: 新品讨论样本 ${i}, content: 这是一条用于前端联调的舆情文本包含关键词和情感倾向。, source: [news, weibo, forum][i % 3], author: anonymous, publishTime: 2026-02-06 10:00:00, score: Number((Math.random() * 100).toFixed(0)), heat: Math.floor(Math.random() * 10000), keywords: [测试, 舆情, 前端], url: # })); return { code: 0, data: { list, total: 268, page, pageSize } }; } export default [ { url: /opinions, method: get, response: ({ query }) mockOpinions(query) } ] as MockMethod[];这段 mock 的response会拿到 query 参数所以page、pageSize、keyword等筛选条件都能在 mock 中生效。当后端的真实接口可以联调时我会把VITE_MOCK_ENABLE关掉mock 文件不参与构建线上包体积不会受影响。调试舆情页面时最常用的是 Vue DevTools 插件。打开后先看 Pinia 面板里的 query 是否存在再看 Network 面板里的请求参数是否带了dateRange。这两个位置能确认问题出在交互还是请求层。5. 舆情前端源码落地时的 4 个检查项和 1 个验证技巧5.1 落地前的 4 个检查项第一错误码是否只处理一次。舆情页面通常有多个接口同时请求如果每个组件都在catch里弹一个 message用户会看到重复弹出。检查request.ts拦截器是否已经覆盖 401、403、5xx页面内 catch 只处理业务分支。第二图表实例是否被销毁。总览页会创建多个 ECharts 实例如果切到列表页不dispose浏览器会保留离屏 canvas内存持续增长。检查useEChart是否在onBeforeUnmount里调用dispose和ResizeObserver.disconnect。第三时间范围是否统一序列化。dateRange在 Pinia 里是数组Vue 路由 query 是字符串如果直接把数组放进 URL会序列化成dateRange[0]...dateRange[1]...后端不一定认得。在请求前要把日期转成时间戳数组URL 里只存start和end两个短字段。第四打包后检查布局异常。常见原因是构建配置的base不是相对路径导致 CSS 里的字体和背景图片 404。舆情大屏一旦 404图表容器高度塌陷布局全乱。我会在构建配置里设置相对路径同时检查是否有全局 reset 样式覆盖默认 margin。5.2 用 URL 双向同步验证整条链路最后提供一个我常用的验收方式把筛选条件同步到 URL再拿这条 URL 做回归测试。做舆情分析时经常要分享当前关键词给同事URL 应该能完整还原页面状态。// src/stores/opinion.ts import { storeToRefs } from pinia; const opinionStore useOpinionStore(); const { query } storeToRefs(opinionStore); watch( () ({ ...query.value }), (val) { router.replace({ query: { keyword: val.keyword, source: val.source, start: val.dateRange[0], end: val.dateRange[1], sortBy: val.sortBy } }); } ); // 初始化时从 route.query 反填 function restoreFromRoute(routeQuery: Recordstring, any) { opinionStore.applyQuery({ keyword: routeQuery.keyword ?? , source: routeQuery.source ?? , dateRange: [routeQuery.start ?? , routeQuery.end ?? ] as [string, string], sortBy: routeQuery.sortBy ?? publishTime }); }验证步骤是进入舆情列表输入“5G”选择“微博”来源点开某一条负向舆情然后复制浏览器地址栏链接。新开隐私窗口贴入链接确认列表、趋势图、情感占比都自动恢复为“5G 微博 负面筛选”。如果有一个模块没有还原多半是那个组件读取的是自己的本地 state而不是 store 里的全局 query。这一个测试能串联起请求层、Pinia 状态、路由解析和图表刷新比单独看某个页面有没有渲染更有说服力。检查无误后再跑一次生产构建把产物放到测试环境做冒烟测试重点看舆情总览大屏在 1366 和 1920 两种宽度下的图表缩放是否符合预期。到这里基于 Vue 框架的舆情分析系统前端设计源码才算是达到能够交接给维护者的状态。本文还有配套的精品资源点击获取