提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
前言
根据数据使用Python或Echarts 完成一个效果丰富、直观、美观的数据可视化大屏的设计与实现。
一、SpringBoot_后端接口流程
由七个接口组成的echatrs的可视化大屏，在此，选择其中一个接口作为例子在展示，其他接口操作如同。
1、建立Entity实体类
实体类是连通着我们的前端接口内容，返回的响应参数、参数的数据类型和注释都是来源于这里，实现数据的封装。
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接口问题。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.vproject.mapper.TypeMapper">
<select id="getTypeList" resultType="com.example.vproject.entity.TypeEntity" parameterType="Integer">
SELECT * FROM `test`.`type_count` ORDER BY `numb` DESC LIMIT 25;
</select>
</mapper>在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<TypeEntity> getTypeList();
}
4、Service接口
在service接口最终要得到的值就是要返回一个集合给前端，所以这里的返回类型便是我们的实体类。
package com.example.vproject.service;
import com.example.vproject.entity.TypeEntity;
import java.util.List;
public interface TypeService {
public List<TypeEntity> 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<TypeEntity> 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<TypeEntity> 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/**/*.xml9、通过接口展示数据
二、html前端操作
1、Ajax请求
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请求与数据库的连接来实现，确保大屏上的数据始终保持最新。实时更新可以提供更准确和有用的信息，使用户能够实时监控和分析数据
6873
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
