Loading... # SpringBoot+MyBatis+Echarts实现多表数据可视化  上一文章实现了单数据库单表的前后端链接数据可视化，但是实际使用后发现由于没有使用SQL语句来实现数据调用，在面对更多功能和更多表的时候会出现扩展性问题，于是我修改了实现方法：  二者其实大差不差，实现步骤为Bean类封装SQL中表内数据，通过Dao层接口和实现类调用，`DaoImpl`为`comtroller`提供请求的返回值，可以在前端预览数据的json格式，最后HTMl页面通过调用接口，ajax异步数据传输，对信息进行重写，变成Echarts可执行的数据格式，完成可视化。  差不多是这样。。。。。。。。 本人对js和前端可以算是0基础，四天时间除了吃饭就几乎在研究，期间遇到了许多坑，所以记录一下。 ## 重写的各类代码 ### CommentBean ```java package com.example.img.Bean; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; @Data @AllArgsConstructor @NoArgsConstructor public class CommentBean { private String word; private Integer rate; } ``` ### CommentController ```java package com.example.img.Controller; import com.example.img.Bean.CommentBean; import com.example.img.Dao.CommentDaoImpl; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RestController; import java.util.List; @RestController @RequestMapping(value = "comment",method = RequestMethod.GET) public class CommentController { @Autowired private CommentDaoImpl commentDaoImpl; @RequestMapping(value = "list",method = RequestMethod.GET) public List<CommentBean> getJsonDate(){ List<CommentBean> commentBeans = commentDaoImpl.showJsonData(); return commentBeans; } } ``` ### CommentDao ```java package com.example.img.Dao; import com.example.img.Bean.CommentBean; import java.util.List; public interface CommentDao { List<CommentBean> showJsonData(); } ``` ### CommentDaoImpl ```java package com.example.img.Dao; import com.example.img.Bean.CommentBean; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.jdbc.core.BeanPropertyRowMapper; import org.springframework.jdbc.core.JdbcTemplate; import org.springframework.stereotype.Service; import java.util.List; @Service("commentDaoImpl") public class CommentDaoImpl implements CommentDao { @Autowired private JdbcTemplate jdbcTemplate; @Override public List<CommentBean> showJsonData() { String sql = "SELECT * FROM `comment` ORDER BY `rate` DESC LIMIT 0, 10"; return jdbcTemplate.query(sql, new BeanPropertyRowMapper<>(CommentBean.class)); } } ``` ### CommentDao ```java package com.example.img.Dao; import com.example.img.Bean.CommentBean; import java.util.List; public interface CommentDao { List<CommentBean> showJsonData(); } ``` ## 访问多表的方法 最大的变化可能就是定义了SQL语句，增加了扩展性。 ```java String sql = "SELECT * FROM comment ORDER BY rate DESC LIMIT 0, 10"; ``` ~~弃用上一个结构的另一个大原因就是我看不懂~~ 上文所述，单个表的数据访问是通过封装前端调用，我们可以用以下方法解决 ``` Bean1-Dao1-DaoImpl1-Comtroller1-HTML Bean2-Dao2-DaoImpl2-Comtroller2-HTML Bean3-Dao3-DaoImpl3-Comtroller3-HTML Bean4-Dao4-DaoImpl4-Comtroller4-HTML Bean5-Dao5-DaoImpl5-Comtroller5-HTML ``` 即一个表对应一条数据流 ## 前端使用Echarts遇到的问题 我就想知道，哪里有前端调用的教程？ ```html <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: '评论词频', left: 'center' }, tooltip: {}, legend: { data:['评分'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '频率', type: 'bar', data: [] }] }; // 定义x、y轴数据数组 var scores=[]; var rates=[]; //请求后台数据 $.ajax({ type: "get", url: "/comment/list", contentType: "application/json", success: function(res){ console.log("=====res: =======") console.log(res); for (var i = 0; i < res.length ; i++) { scores.push(res[i].word); rates.push(res[i].rate); } myChart.setOption({ xAxis: { axisLabel:{ interval: 0 }, data: scores }, series: [{ // 根据名字对应到相应的系列 name: '频率', data: rates }] }); } }); // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); ``` 这是通过ajax调用接口实现的柱形图，通过设置`div id`来装填图表，以及通过访问接口调用数据，重写数据格式。 看起来很简单吧？ ### 多表调用需要修改的变量  内部的for循环将数据输入数组的变量请根据需要自行修改 母之. （等我去给Echarts提意见） 最后修改：2021 年 12 月 27 日 04 : 39 PM © 允许规范转载
1 条评论
啊吧啊吧啊吧