| 数据可视化大屏 | 您所在的位置：网站首页 › 大数据怎么制作 › 数据可视化大屏 |
数据可视化大屏
|
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言 一、SpringBoot_后端接口流程 1、建立Entity实体类 2、mapper --XML文件 3、Mapper接口 4、Service接口 5、ServiceImpl实现类 6、Controller层调用接口 7、Config解决跨域 8、application.yml 9、通过接口展示数据 二、html前端操作 1、Ajax请求 2、echarts图例 3、最终呈现结果 三、数据可视化大屏 总结 百度网盘链接 前言根据数据使用Python或Echarts 完成一个效果丰富、直观、美观的数据可视化大屏的设计与实现。 一、SpringBoot_后端接口流程
实体类是连通着我们的前端接口内容，返回的响应参数、参数的数据类型和注释都是来源于这里，实现数据的封装。 package com.example.vproject.entity; import java.io.Serializable; public class TypeEntity implements Serializable { private String type_name; private Integer numb; public String getType_name() { return type_name; } public void setType_name(String type_name) { this.type_name = type_name; } public Integer getNumb() { return numb; } public void setNumb(Integer numb) { this.numb = numb; } @Override public String toString() { return "TypeEntity{" + "type_name='" + type_name + '\'' + ", numb=" + numb + '}'; } } 2、mapper --XML文件需要将我们的sql语句写好在XML文件，确定具体需要多少个sql语句才能解决具体的Service接口问题。 SELECT * FROM `test`.`type_count` ORDER BY `numb` DESC LIMIT 25; 在Navicat工具中查询得到想要的效果。
3、Mapper接口
在上面可知用一条sql语句就搞定了想要的结果，那Mapper接口写一个即可。可以获取数据库的数据 package com.example.vproject.mapper; import com.example.vproject.entity.TypeEntity; import org.apache.ibatis.annotations.Mapper; import java.util.List; @Mapper public interface TypeMapper { public List getTypeList(); } 4、Service接口在service接口最终要得到的值就是要返回一个集合给前端，所以这里的返回类型便是我们的实体类。 package com.example.vproject.service; import com.example.vproject.entity.TypeEntity; import java.util.List; public interface TypeService { public List getTypeList(); } 5、ServiceImpl实现类当前所写后端接口中至关重要的一步，因为在这里要实现数据的交互，代码逻辑 package com.example.vproject.service.impl; import com.example.vproject.entity.TypeEntity; import com.example.vproject.mapper.TypeMapper; import com.example.vproject.service.TypeService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import java.util.List; @Service public class TypeServiceImpl implements TypeService { @Autowired TypeMapper mapper; @Override public List getTypeList() { return mapper.getTypeList(); } } 6、Controller层调用接口这里就是一个调用过程，将相关的注解写好，注入相关的接口方法，然后返回给前端，就完成了一个接口。 package com.example.vproject.controller; import com.example.vproject.entity.TypeEntity; import com.example.vproject.service.TypeService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import java.util.List; @RestController public class TypeController { @Autowired TypeService service; @RequestMapping("/getTypeList") public List getTypeList(){ return service.getTypeList(); } } 7、Config解决跨域 package com.example.vproject.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.UrlBasedCorsConfigurationSource; import org.springframework.web.filter.CorsFilter; //解决跨域 @Configuration public class CorsConfig { @Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", buildConfig()); return new CorsFilter(source); } private CorsConfiguration buildConfig() { CorsConfiguration corsConfiguration = new CorsConfiguration(); // 可以自行筛选 corsConfiguration.addAllowedOrigin("*"); corsConfiguration.addAllowedHeader("*"); corsConfiguration.addAllowedMethod("*"); return corsConfiguration; } } 8、application.yml server: port: 8081 spring: # 数据库连接配置 datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://127.0.0.1:3306/test?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai // test--数据库名 username: root password: xxxxxxxxx //密码 web: resources: static-locations: classpath:/static/, classpath:/templates mybatis: mapper-locations: classpath*:/mapper/**/*.xml 9、通过接口展示数据
Ajax是一种异步请求数据的web开发技术，对于改善用户的体验和页面性能很有帮助。简单地说，在不需要重新刷新页面的情况下，Ajax 通过异步请求加载后台数据，并在网页上呈现出来。 $.ajax({ url:"http://127.0.0.1:8081/getTypeList", type:"GET", contentType: "application/json", // data:JSON.stringify(data), success: function (data) { console.log(data) var industryArray=[]; var quantityArray=[]; data.forEach(item=>{ industryArray.push(item.type_name); quantityArray.push(item.numb) }) console.log(industryArray) console.log(quantityArray) option.series[0].data =[] for(i = 0; i < 10; i++) { option.series[0].data.push({value:quantityArray[i] , name: industryArray[i]}) } myChart.setOption(option); } }) 2、echarts图例 (function() { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.querySelector(".pie .chart")); let index = 0; var colorList = ["#0ebeff","#17b9fc","#21b4f9","#2ab0f6","#33abf3","#3ca6f0","#46a1ed","#4f9deb ","#5898e8 ","#6193e5 ","#6b8ee2 ","#748adf","#7d85dc ","#8780d9 ","#907bd6 ","#9976d3 ","#a272d0 ","#ac6dcd","#b568ca","#be63c7 ","#c75fc5","#d15ac2","#da55bf","#e350bc","#ec4cb9","#f647b6","#ff42b3"]; function fun() { var timer = setInterval(function() { console.log(index) myChart.dispatchAction({ type: 'hideTip', seriesIndex: 0, dataIndex: index }); // 显示提示框 myChart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index }); // 取消高亮指定的数据图形 myChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: index == 0 ? 5 : index - 1 }); myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index }); index++; if (index > 5) { index = 0; } }, 3000) } fun() option = { title: { text: 'PieChart', x: 'center', y: 'center', textStyle: { fontSize: 10 } }, tooltip: { trigger: 'item' }, series: [{ type: 'pie', center: ['50%', '50%'], radius: ['24%', '45%'], clockwise: true, avoidLabelOverlap: true, hoverOffset: 30, emphasis:{ itemStyle:{ borderColor: '#f3f3f3', borderWidth: 5 } }, itemStyle: { normal: { color: function(params) { return colorList[params.dataIndex] } } }, label: { show: true, position: 'outside', formatter: '{a|{b}：{d}%}\n{hr|}', rich: { hr: { backgroundColor: 't', borderRadius: 3, width: 3, height: 3, padding: [3, 3, 0, -12] }, a: { padding: [-30, 15, -20, 15] } } }, labelLine: { normal: { length: 20, length2: 30, lineStyle: { width: 1 } } }, data: [{ 'name': '北京', 'value': 5600 }, { 'name': '上海', 'value': 3600 }, { 'name': '广州', 'value': 1500 }, { 'name': '深圳', 'value': 2000 }, { 'name': '未知', 'value': 899 }, { 'name': '海外', 'value': 4000 }], }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function() { myChart.resize(); }); $.ajax({ url:"http://127.0.0.1:8081/getTypeList", type:"GET", contentType: "application/json", // data:JSON.stringify(data), success: function (data) { console.log(data) var industryArray=[]; var quantityArray=[]; data.forEach(item=>{ industryArray.push(item.type_name); quantityArray.push(item.numb) }) console.log(industryArray) console.log(quantityArray) option.series[0].data =[] for(i = 0; i < 10; i++) { option.series[0].data.push({value:quantityArray[i] , name: industryArray[i]}) } myChart.setOption(option); } }) })(); 3、最终呈现结果
通过上述步骤，我们得到一个echarts带mysql数据的图例。再通过html页面布局和多个不同的echarts图例，就可以得到一个数据可视化的大屏。
通过使用爬虫对豆瓣电影top250爬取，随后通过sql和hadoop进行数据的预处理。确保了其质量和准确性。清晰的数据可以更好地支持可视化展示。通过使用不同的图表类型、颜色和字体大小来实现。保持布局简洁，避免信息过载，使观众能够迅速理解展示的内容。通过ajax请求与数据库的连接来实现，确保大屏上的数据始终保持最新。实时更新可以提供更准确和有用的信息，使用户能够实时监控和分析数据 百度网盘链接链接：https://pan.baidu.com/s/1bPkfgPXMpWTJGcOgMIk71w 提取码：rm0s |
【本文地址】
公司简介
联系我们