一、Vue2 完整介绍
1. 诞生背景
早期网页开发直接操作原生DOM（jQuery），页面数据和DOM强耦合：修改数据就要手动获取、修改页面标签；页面复杂后代码混乱、维护困难；前后端未分离，页面、逻辑、后端代码混杂。 为实现数据驱动视图、前后端分离，尤雨溪推出Vue渐进式JS框架。
2. 解决的核心问题
- 摒弃频繁手动操作DOM，数据变化页面自动更新；
- 简化页面逻辑，提供生命周期、数据绑定、指令等语法糖；
- 轻量易嵌入现有页面，不用重构整套项目；
- 天然适配前后端分离，配合Axios请求后端接口获取JSON数据。
3. 基本架构（本项目单页面引入模式）
- 根挂载容器：HTML中
id="app"，Vue接管容器内所有渲染； - 响应式仓库
data：统一存放后端返回所有图表数据； - 生命周期钩子
mounted：页面渲染完成自动拉取接口； methods方法库：封装接口请求、图表渲染复用函数；- 插值语法
{{}}：页面展示数字指标。
4. 通用作用
- 管理页面所有响应式数据；
- 发送异步HTTP请求获取后端接口数据；
- 控制页面渲染、页面生命周期；
- 统一管理业务逻辑，代码分层清晰。
5. 在本可视化大屏项目中的专属作用
- 作为页面逻辑载体，存储5套图表的后端返回JSON数据；
- 页面加载完成后，自动并行请求SpringBoot 5个API接口；
- 把接口返回数据交给ECharts，驱动各类图表渲染；
- 通过插值表达式渲染顶部市场品类、均价数字卡片。
6. 和其他组件/技术的关联关系
- 和Axios：Vue调用Axios发送GET请求，访问SpringBoot后端接口；
- 和ECharts：Vue存储接口数据，调用ECharts绘图方法传入数据生成图表；
- 和HTML/CSS：HTML提供页面容器，CSS控制大屏深色布局样式，Vue填充动态数据；
- 和SpringBoot：Vue前端发起网络请求，SpringBoot后端接收、查询MySQL返回JSON；
- 整条大数据链路：Hive→Sqoop→MySQL→SpringBoot→Vue→ECharts可视化。
二、ECharts 介绍
1. 诞生背景
传统前端绘图需要手写大量Canvas/SVG底层代码，折线、饼、柱状图实现成本高、自适应差、样式难自定义；各类图表没有统一标准封装库。 百度开源ECharts，封装底层绘图逻辑，开箱即用各类统计图表。 https://echarts.apache.org/zh/index.html
2. 解决的核心问题
- 不用手写Canvas底层绘图代码，一行初始化即可生成图表；
- 内置饼图、柱状图、折线图等几十种常用图表；
- 支持自定义颜色、标题、坐标轴、提示框，适配深色大屏；
- 自带窗口resize自适应，浏览器缩放图表自动拉伸；
- 直接接收数组JSON数据，快速完成数据映射展示。
3. 基本使用架构（本项目使用方式）
- 初始化实例：
echarts.init(DOM容器ID)，绑定页面图表盒子； - 配置option：定义标题、坐标轴、图例、图表类型、数据源；
- 渲染：
chart.setOption(option)完成图表绘制； - 监听窗口resize，实现大屏自适应。
4. 通用作用
- 将结构化JSON数据转换为可视化图表；
- 提供交互能力：鼠标悬浮提示、图例切换、缩放等；
- 适配PC大屏、移动端多终端展示。
5. 在本可视化大屏项目中的专属作用
- 读取Vue中存储的MySQL指标数据，绘制4类业务图表：
- 价格区间分布饼图
- 商品涨幅、跌幅双柱状图
- 15日多品类均价折线图
- 自定义深色系配色，匹配大屏黑色页面风格；
- 监听浏览器窗口大小，图表自动适配大屏分辨率。
6. 和其他组件/技术的关联关系
- 和Vue：ECharts依赖Vue从后端拉取好的业务数据完成绘图；
- 和HTML：每个图表对应HTML中带唯一ID的div容器，ECharts绑定DOM渲染；
- 和CSS：CSS设置图表盒子宽高、背景，ECharts内部自定义图表文字、线条颜色；
- 和SpringBoot/MySQL：ECharts最终展示的数据源头是MySQL中Hive计算后的ADS指标；
- 前后端链路：SpringBoot接口返回指标JSON → Vue接收存储 → ECharts读取绘图展示。
三、Vue + ECharts 整体协同流程总结
- 浏览器加载HTML、CSS、Vue、ECharts静态资源；
- Vue触发
mounted生命周期，通过Axios并发请求SpringBoot五个API； - SpringBoot通过MyBatis查询MySQL指标表，返回JSON数据；
- Vue将JSON存入响应式data变量，页面插值渲染顶部数字卡片；
- Vue把data内数据传入ECharts绘图函数，初始化各个图表实例；
- ECharts根据配置与业务数据，在HTML容器内渲染可视化图表；
- CSS统一控制整个深色大屏页面布局与样式美化。