1.实现方式

数据可视化展示主要是基于Mybatis-Plus+Druid+SpringMVC+Vue+G2Plot实现的。通过Vue.js搭建前端页面并进行数据处理，G2plot来将数据渲染表格图形页面；后端通过Druid数据库连接池和Mybatis-Plus ORM框架，对数据库进行增删查改处理

2.过程实现

词云图

基于bd_hot_words热词数据表，获取当前热词的频率，并将其组装成对象返回给前端，可以非常直观了解当前热词信息。
执行的sql语句为：“select hot_id ,hot_words,count(*) as id from bd_hot_words group by hot_id”；将hot_id进行聚合，去除重复数据，将每个热词的数量赋值到id中，最后再将模型进行转化，通过g2plot的WordCloud
组件进行渲染。

圆堆图

基于bd_video_base视频基本数据表，获取当前标签的频率，并转化为圆堆图，这是一种可视化大量层次结构数据的方法。不同于树状图，这种布局算法中相切的圆形代表同一级别的兄弟节点；为了可视化层级信息，一个节点的所有子节点都会被打包到该节点中，并基于该节点大小确定子节点的大小。叶子节点的大小可以表示任意数值类属性。该图表的一个优点是可以很好地概括某些较大数据集的分组和结构关系。
执行的sql语句为：“SELECT tag ,COUNT(*) AS id ,JSON_EXTRACT(feature, ‘$.tname’) AS name FROM bd_video_base GROUP BY tag”通过对tag标签进行聚合，去除重复数据，将每个tag数量赋值到id中，并调用MySQL中的Json函数解析feature字符串中的tname标签名属性，并将其赋值给name。

列表页

列表页数据主要是依赖于ES和MySQL，Vue将查询的数据进行渲染的，列表页会获取视频列表数据，并且可以对其进行删除和重刷操作，在列表页是视频、作者和标签数据的总数量，点击点赞按钮会将列表页根据点赞数进行排序展示，同样投币收藏也是如此，这样可以快速获取相关排序数据，列表中还有一项是白嫖比例，该比例的计算公式是这样的
(播放数-投币数-点赞数据-收藏数)/播放数*100%，目前该算法比较粗糙，计算比例偏低，会存在用户同时点击多项数据的可能性，后续可以将该算法进行优化改进。
用户在列表页的删除、重刷操作都会记录到系统日志中，可用于后续问题的排查和数据的恢复。