该文详细介绍了如何使用SpringBoot构建后台程序框架，处理前后端数据交互，包括编写Controller、Result类、ViewMapper，以及解决跨域访问问题，实现薪资分布、就业行业、热门岗位等模块的数据更新。同时，涉及到MySQL数据准备和接口测试，确保大屏数据显示正确。
【可视化大屏开发】13. 可视化大屏配置之打通前后端更新静态图数据
搭建Spring Boot后台程序框架
一、需求
在本项目view模块的view目录下，构建一下模块
- bean
- conf
- controller
- mapper
二、实现步骤
实现步骤如下，
最后新建完成后的效果
编写controller用于接收前端数据请求
一、需求
- 创建ViewController，用户接收前端数据请求
二、代码实现
ViewController.java
package org.lh.view.controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
/**
* 用来接收前端数据请求的controller
*/
//=@Controller+@ResponseBody表示该类是springboot的一个controller，且返回的数据为JSON格式
@RestController
@RequestMapping("/view")
public class ViewController {
@RequestMapping("/getAreaData")
public void getAreaData(){
System.out.println("接收前端发起的JSON数据请求，后续需要查询mysql将数据返回");
}
}
修改前端接口调用后端Controller
一、需求
- 通过前端调用后端数据请求
二、实现步骤
1、找到 ViewApplication，启动它
访问端口 ，再次刷新浏览器，再次参看
localhost:8080/view/getAreaData
3、查看控制台的日志是否有输出
再次刷新浏览器，再次参看控制台
接口调用成功！
5、在前端index.js中的第二个饼图(南丁格尔玫瑰图)的立即执行函数的后面，增加如下代码：
// 3. 把配置给实例对象
myChart.setOption(option)
//前端调用后端接口
$.getJSON('http://localhost:8080/view/getAreaData', function (data) {
myChart.setOption({
series:[{
data: data.data
}]
})
});
// 4. 让图表跟随屏幕自动的去适应
window.addEventListener("resize", function() {
myChart.resize();
});
})();
6、测试前端能否调用后端接口。
（1）重启动ViewApplication
（2）打开前端可视化大屏
（3）查看Spring Boot 控制台日志
（4）再次刷新可视化大屏
至此，前端调用后端成功！
编写Result类
一、需求
- 创建Result类
二、实现步骤
1、创建Result类
2、编写代码如下：
package org.lh.view.bean;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
/**
* 封装响应给前端数据的Javabean（@RestController）会自动将其转换为JSON，前端要求改JSON必须要有data字段
*/
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Result {
private Object data;
private Integer code;
private String message;
public static Result success(Object data) {
Result result = new Result();
result.setCode(200);
result.setMessage("success");
result.setData(data);
return result;
}
public static Result fail() {
Result result = new Result();
result.setCode(500);
result.setMessage("fail");
result.setData(null);
return result;
}
}
编写ViewMapper
一、需求
- 创建ViewMapper
二、实现步骤
创建ViewMapper
2、编写代码
package org.lh.view.mapper;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import org.springframework.stereotype.Component;
import java.util.List;
import java.util.Map;
import java.util.Objects;
@Mapper
@Component // idea高版本不会警告错误，可省略
public interface ViewMapper {
@Select("select * from table")
List<Map<String, Objects>> getAreaData();
}
导入测试数据，并测试前后端接口调用
一、需求
- 导入测试数据
- 测试前后端接口调用
二、实现步骤
导入测试数据，从《项目素材》中找到 job_area.sql，导入mysql数据库中
2、修改 ViewMapper 文件
package org.lh.view.mapper;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import org.springframework.stereotype.Component;
import java.util.List;
import java.util.Map;
import java.util.Objects;
@Mapper
@Component // idea高版本不会警告错误，可省略
public interface ViewMapper {
@Select("select * from job_area")
List<Map<String, Objects>> getAreaData();
}
3、修改 ViewController 文件
package org.lh.view.controller;
import org.lh.view.bean.Result;
import org.lh.view.mapper.ViewMapper;
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;
import java.util.Map;
import java.util.Objects;
/**
* 用来接收前端数据请求的controller
*/
//=@Controller+@ResponseBody表示该类是springboot的一个controller，且返回的数据为JSON格式
@RestController
@RequestMapping("/view")
public class ViewController {
@Autowired
private ViewMapper viewMapper;
@RequestMapping("/getAreaData")
public Result getAreaData(){
System.out.println("接收前端发起的JSON数据请求，后续需要查询mysql将数据返回");
List<Map<String, Objects>> data = viewMapper.getAreaData();
Result result = Result.success(data);
return result;
}
}
4、启动 ViewApplication
启动成功
访问
localhost:8080/view/getAreaData
对比数据库数据：
至此，通过接口访问数据数据成功！
解决前后端分离跨域访问问题
一、需求
完成实验59，完成接口访问数据数据成功后，index.html前端南丁格尔玫瑰图没有正确显示数据，如图
需要解决前后端分离，跨域访问问题。
二、实现步骤
1、测试前端是否能正常显示mysql数据库的数据
2、查看原因：点击右键–》“检查”
3、发现有报错：
4、百度错误原因：Access to XMLHttpRequest at ‘http://localhost:8080/view/getAreaData’ from origin ‘http://localhost:63342’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
5、在ViewController 中增加注解：
@CrossOrigin(origins =“*”,maxAge = 3600) //解决前后端分离的跨域访问问题
6、再次重启SpringBoot测试。
至此，正常获取到数据库的表数据！
剩下的就是一个一个的图标填充数据即可。
实现薪资分布模块
一、需求
- 对index.html第一列（左边列）饼图，修改为薪资分布
- 实现数据的前后端联通
二、实现步骤
对index.html第一列（左边列）饼图，修改为薪资分布
实现数据的前后端联通
2、在index.js中的第一列，第三个饼形图中，增加调用后台接口代码：
// 3. 把配置给实例对象
myChart.setOption(option)
//前端调用后端接口
$.getJSON('http://localhost:8080/view/getSalRangeData', function (data) {
myChart.setOption({
series:[{
data: data.data
}]
})
});
// 4. 让图表跟随屏幕自动的去适应
window.addEventListener("resize", function() {
myChart.resize();
});
3、在ViewController中，增加接口
//@CrossOrigin(origins = "*", maxAge = 3600) //解决前后端分离的跨域访问问题
@RestController //=@Controller+@ResponseBody表示该类是springboot的一个controller，且返回的数据为JSON格式
@RequestMapping("/view")
public class ViewController {
@Autowired
private ViewMapper viewMapper;
@RequestMapping("/getAreaData")
public Result getAreaData(){
System.out.println("接收前端发起的JSON数据请求，后续需要查询mysql将数据返回");
List<Map<String, Objects>> data = viewMapper.getAreaData();
Result result = Result.success(data);
return result;
}
@RequestMapping("getSalRangeData")
public Result getSalRangeData(){
System.out.println("收到前端的薪资信息JSON数据请求,查取后端MySQL数据");
List<Map<String, Objects>> data = viewMapper.getSalRangeData();
Result result = Result.success(data);
return result;
}
4、在ViewMapper中增加就接口
@Mapper
@Component // idea高版本不会警告错误，可省略
public interface ViewMapper {
@Select("select * from job_area")
List<Map<String, Objects>> getAreaData();
@Select("select * from job_sal_range")
List<Map<String, Objects>> getSalRangeData();
}
5、测试：
（1）启动SpringBoot后台
可选扩展项：本项目可以添加的需求
- 网页增加一个登录项检测，需要登录才能看，不同的角色，能看到的信息不同
- 增加一个窗口选择不同的搜索关键词，对数据进行筛选，不同筛选展现不同的搜寻结果
- 增加公司性质筛选
- 增加行业类型赛选
MySQL数据准备薪资数据
-- 查询大数据相关职位的收入数据
-- substring_index(jd_sale,'·',1) 去掉 "·*薪水"
-- flag = 0 去掉 200元/天
-- 10-20万/年 float(SUBSTRING_INDEX(Sale,'-',1)) * 10000 / 12 float(SUBSTRING_INDEX(REPLACE(Sale,'万/年',''),'-',2)) * 10000 / 12
drop table if EXISTS job_sal_range;
create table job_sal_range as
select avg_Sale name, count(distinct jd_url) value
from
(select case when (HSale + HSale)/2 <= 5000 then '0-5千'
when (HSale + HSale)/2 >= 5000 and (HSale + HSale)/2 <= 8000 then '5-8千'
when (HSale + HSale)/2 >= 8000 and (HSale + HSale)/2 <= 12000 then '8千-1.2万'
when (HSale + HSale)/2 >= 12000 and (HSale + HSale)/2 <= 20000 then '1.2-2万'
when (HSale + HSale)/2 >= 20000 and (HSale + HSale)/2 <= 30000 then '2-3万'
when (HSale + HSale)/2 >= 30000 and (HSale + HSale)/2 <= 50000 then '3-5万'
when (HSale + HSale)/2 >= 50000 and (HSale + HSale)/2 <= 100000 then '5-10万'
else '>10万' end as avg_Sale,Sale,LSale,HSale,jd_url
FROM
(select case when flag = 5 then cast(SUBSTRING_INDEX(Sale,'-',1) as decimal(9,4)) * 10000 / 12
when flag = 3 then cast(SUBSTRING_INDEX(REPLACE(Sale,'千',''),'-',1) as decimal(9,4)) * 1000
when flag = 2 then cast(SUBSTRING_INDEX(Sale,'-',1) as decimal(9,4)) * 10000
when flag = 1 then cast(SUBSTRING_INDEX(Sale,'-',1) as decimal(9,4)) * 1000
else 0.0 end as LSale,
case when flag = 5 then cast(SUBSTRING_INDEX(REPLACE(Sale,'万/年',''),'-',-1) as decimal(9,4)) * 10000 / 12
when flag = 3 then cast(SUBSTRING_INDEX(REPLACE(Sale,'万',''),'-',-1) as decimal(9,4)) * 10000
when flag = 2 then cast(SUBSTRING_INDEX(REPLACE(Sale,'万',''),'-',-1) as decimal(9,4)) * 10000
when flag = 1 then cast(SUBSTRING_INDEX(REPLACE(Sale,'千',''),'-',-1) as decimal(9,4)) * 1000
else 0.0 end as HSale,
Sale,jd_url
from
(select case when instr(Sale,"年") > 0 and instr(Sale,"万") > 0 then 5
when instr(Sale,"日") > 0 and instr(Sale,"千") > 0 then 4
when instr(Sale,"千") > 0 and instr(Sale,"万") > 0 then 3
when instr(Sale,"万") > 0 then 2
when instr(Sale,"千") > 0 then 1
else 0 end as flag,Sale,jd_url from
(select substring_index(jd_sale,'·',1) Sale,jd_url from 51job_v4 where job_key = "大数据" and jd_sale != '') a) b where flag > 0) c) d
group by name order by value desc;
异常数据需要处理
select * from
(select case when instr(Sale,"千") > 0 or instr(Sale,"万") > 0 then 1 else 0 end as flag,Sale,jd_url from
(select substring_index(jd_sale,'·',1) Sale,jd_url from 51job_v4 where job_key = "大数据" and jd_sale != '') a) b where flag = 0;
（2）在浏览器中，输入：http://localhost:8080/view/getSalRangeData
6、启动前端大屏
至此，完成薪资分布模块！！
就业行业模块更新
一、需求
- 就业行情模块前后端数据更新
二、实现步骤
1、在index.js文件的第一列的第一个柱状图中，增加前端的接口调用。
// 3.将配置项给实例对象
myChart.setOption(option);
//前端调用后端接口
var xdata2 = [];//x轴
var sData = []; // value
$.getJSON('http://localhost:8080/view/getInstryData', function (data) {
var arr = data.data
for (var i = 0; i < arr.length; i++) {
xdata2.push(arr[i].ind_name)
sData.push(arr[i].value)
}
myChart.setOption({
series:[{
data: sData
}],
xAxis: {
data: xdata2
}
})
});
//让图标跟随屏幕去自动适应
window.addEventListener("resize",function(){
myChart.reset();
});
2、在ViewController 中增加 getIndustryData 接口
@RequestMapping("getSalRangeData")
public Result getSalRangeData(){
System.out.println("收到前端的薪资信息JSON数据请求,查取后端MySQL数据");
List<Map<String, Objects>> data = viewMapper.getSalRangeData();
Result result = Result.success(data);
return result;
}
@RequestMapping("getInstryData")
public Result getInstryData(){
System.out.println("收到前端的行业JSON信息请求，查取后端MySQL数据");
List<Map<String, Objects>> data = viewMapper.getInstryData();
Result result = Result.success(data);
return result;
}
3、在ViewMapper文件中，增加 getIndustryData 接口
@Mapper
@Component // idea高版本不会警告错误，可省略
public interface ViewMapper {
@Select("select * from job_area")
List<Map<String, Objects>> getAreaData();
@Select("select * from job_sal_range")
List<Map<String, Objects>> getSalRangeData();
@Select("select ind_name, value from job_instry limit 7")
List<Map<String, Objects>> getInstryData();
}
想利用所有数据，即更新数据可得
@Select("select ind_name, value from job_instry where job_key = '大数据' order by value desc limit 7")
List<Map<String, Objects>> getInstryData();
行业职位数据准备
create table job_instry as
select company_Industry ind_name,count(distinct jd_url) value from `51job_v4` where job_key = "大数据" group by ind_name
order by value desc ;
4、重启动 ViewApplication
5、测试调用后台接口：打开浏览器输入：http://localhost:8080/view/getIndustryData
debug
代码地址书写错误，更换后ok
后台接口调用成功
6、测试大屏
更改图形名称 index.html
<selection class="mainbox">
<div class="column">
<div class="panel bar">
<h2>不同行业职位需求数量</h2>
<div class="chart"></div>
<div class="panel-footer"></div>
</div>
重启viewapplication
debug
左列第一个柱形图，X显示信息不全
实现热门岗位模块
一、需求
将第三列【右边的】第一个柱状图更新为热门岗位
二、实现步骤
1、修改第三列的第一个柱状图的名称为：柱形图-热门岗位
2、在index.js文件里，增加：
// 条形图【柱状图2】-热门岗位
(function (){
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".bar2 .chart"));
// 定义颜色
var myColor = ["#FF0000", "#FF6347", "#FA8072", "#FF4500", "#FF8C00", "#F4A460"];
// 2. 指定配置和数据
var option = {
// 图像框的左右上线调整
grid: {
top: '10%',
left: '32%',
// right: '15%',
bottom: '10%',
},
xAxis: {
show: false,
},
yAxis: [{
type: 'category',
// 数据翻转
inverse: true,
data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
// 不显示y轴的线
axisLine: {
show: false
},
// 不显示刻度
axisTick: {
show: false
},
// 把刻度标签里面的文字颜色设置为白色
axisLabel: {
color: "#fff"
},
},{
show: true,
// 数据翻转
inverse: true,
data: [19325, 23438, 31000, 121594, 134141, 681807],
// 不显示y轴的线
axisLine: {
show: false
},
// 不显示刻度
axisTick: {
show: false
},
// 把刻度标签里面的文字颜色设置为白色
axisLabel: {
textStyle: {
color: "#fff",
fontSize: 12,
}
},
}
],
series: [
{
name: '框',
type: 'bar',
barCategoryGap: 50,
BarWidth: 15,
data: [100, 100, 100, 100, 100, 100],
// 给series 第二个对象里面的 添加
yAxisIndex: 1,
itemStyle: {
barBorderRadius: 15,
color: "none",
borderColor: "#00c1de",
borderWidth: 15,
},
}
,
{
name: '条',
type: 'bar',
data: [94.19, 100.21, 93.65, 86.33, 98.21, 92.44],
// 给series 第一个对象里面的 添加
yAxisIndex: 0,
// 修改第一组柱子的圆角
itemStyle: {
barBorderRadius: 20,
color: function (params) {
console.log(params);
return myColor[params.dataIndex];
},
},
// 柱子之间的距离
barCategoryGap: 50,
// 显示柱子内的文字
barWidth: 10,
// 显示柱子内的文字
label: {
show: true,
position: "inside",
// {c} 会自动的解析为 数据 data里面的数据
formatter: "{c}%"
}
},
]
};
// 3. 把配置给实例对象
myChart.setOption(option);
//前端调用后端接口
var yAxis1 = [];//yAxis第一个对象
var yAxis2 = [];//yAxis第二个对象
var series1 = [];//series第二个对象
$.getJSON('http://localhost:8080/view/getJobItemData', function (data) {
var arr = data.data
for (var i = 0; i < arr.length; i++) {
yAxis1.push(arr[i].job_name);
yAxis2.push(arr[i].count);
series1.push(Math.round(arr[i].count/arr[i].total*100));
}
myChart.setOption({
yAxis:[{
data: yAxis1
},
{
data: yAxis2
}
],
series:[{},{
data: series1
}
]
})
});
//4. 让图标跟随屏幕去自动适应
window.addEventListener("resize",function(){
myChart.resize();
});
})();
3、ViewController文件里，增加：
@RequestMapping("getInstryData")
public Result getInstryData(){
System.out.println("收到前端的行业JSON信息请求，查取后端MySQL数据");
List<Map<String, Objects>> data = viewMapper.getInstryData();
Result result = Result.success(data);
return result;
}
@RequestMapping("getJobItemData")
public Result getJobItemData(){
System.out.println("收到前端的热门职位JSON信息请求，查取后端MySQL数据");
List<Map<String, Objects>> data = viewMapper.getJobItemData();
Result result = Result.success(data);
return result;
}
4、在ViewMapper文件里，增加
@Select("select ind_name, value from job_industry where job_key = '大数据' order by value desc limit 7")
List<Map<String, Objects>> getInstryData();
@Select("select job_name,count,(select sum(count) from job_item2) total from job_item2 limit 6;")
List<Map<String, Objects>> getJobItemData();
数据准备
drop table if EXISTS job_item;
create table job_item as
SELECT
job_key,
jd_name job_name,
count( DISTINCT jd_url ) count
FROM
51job_v4 where jd_name != ''
group by
job_key,
job_name
order by
job_key,
count desc;
drop table if EXISTS job_item2;
create table job_item2 as
SELECT
*
FROM
job_item
WHERE
job_key = '大数据' and job_name not like '%销售%' and job_name not like '%客户经理%' limit 50;
5、重启 ViewApplication
6、测试后端接口，打开浏览器，输入：http://localhost:8080/view/getJobItemData
7、启动可视化大屏，参看结果
至此：热门岗位模块完成！！
岗位需求变换图
一、需求
实现前后端的-岗位需求数据变化图更新到折线图2中
二、实现步骤
数据准备
drop table if EXISTS job_mchange;
create table job_mchange as
select mm month,dd day,count(distinct jd_url) count
from
(SELECT
jd_time,
substring_index( jd_time, '-', 1 ) mm,
substring_index( jd_time, '-',- 1 ) dd,
jd_url
FROM
51job_v4
WHERE
job_key = '大数据') a
group by mm,dd;
2、在 ViewController 文件中，增加以下代码
@RequestMapping("getJobItemData")
public Result getJobItemData(){
System.out.println("收到前端的热门职位JSON信息请求，查取后端MySQL数据");
List<Map<String, Objects>> data = viewMapper.getJobItemData();
Result result = Result.success(data);
return result;
}
@RequestMapping("/getJobMChange")
public Result getJobMChange(){
System.out.println("接收前端发起的岗位数据JSON请求，查询mysql将数据返回");
List<Map<String, Object>> data = viewMapper.getJobMChange();
Result result = Result.success(data);
return result;
}
3、在ViewMapper 文件中，增加以下代码
@Select("select job_name,count,(select sum(count) from job_item2) total from job_item2 limit 6;")
List<Map<String, Objects>> getJobItemData();
@Select("select day date, count, month type from job_mchange where month in ('12','01');")
List<Map<String, Object>> getJobMChange();
4、重启ViewApplication
5、测试后台接口
在浏览器里输入：localhost:8080/view/getJobMChange
6、在index.js文件中，增加以下代码：
// 3. 把配置给实例对象
myChart.setOption(option);
//前端调用后端接口
var xAxis1 = [];//xAxis第一个对象
var series1 = [];//series第一个对象
var series2 = [];//series第二个对象
var llabel1 = []; //legend类别1
var llabel2 = []; //legend类别2
$.getJSON('http://localhost:8080/view/getJobMChange', function (data) {
var arr = data.data
for (var i = 0; i < arr.length; i++) {
if (arr[i].type =='01') {
xAxis1.push(arr[i].date);
series2.push(arr[i].count);
llabel1 = arr[i].type;
}
else if (arr[i].type =='12') {
series1.push(arr[i].count)
llabel2 = arr[i].type;
}
}
myChart.setOption({
xAxis:[{
data: xAxis1
}
],
legend: {data: [llabel1, llabel2],},
series:[{
data: series1,
name: llabel1,
},
{
name: llabel2,
data: series2
}
]
})
});
//4. 让图标跟随屏幕去自动适应
window.addEventListener("resize",function(){
myChart.resize();
});
修改index.html
7、测试可视化大屏效果
![![[Pasted image 20230222154507.png]]](https://i-blog.csdnimg.cn/blog_migrate/cebbea256a10cc70c384074c7f2662e5.png)
更新年月职位数量图
一、 需求
实现年月职位数量更新图到左列第二个折线图
二、实现步骤
数据导入
2、在 ViewController 文件中，增加以下代码
@RequestMapping("/getJobMChange")
public Result getJobMChange(){
System.out.println("接收前端发起的岗位数据JSON请求，查询mysql将数据返回");
List<Map<String, Object>> data = viewMapper.getJobMChange();
Result result = Result.success(data);
return result;
}
@RequestMapping("/getJobSupplierDemanderData")
public Result getJobSupplierDemanderData(){
System.out.println("接收前端发起的年月职位数量数据JSON请求，查询mysql将数据返回");
List<Map<String, Object>> data = viewMapper.getJobSupplierDemanderData();
Result result = Result.success(data);
return result;
}
3、在ViewMapper 文件中，增加以下代码
@Select("select day date, count, month type from job_mchange where month in ('12','01');")
List<Map<String, Object>> getJobMChange();
@Select("select date,type,count from job_supplier_demander where substr(date,1,4) in('2022','2023')")
List<Map<String, Object>> getJobSupplierDemanderData();
4、重启ViewApplication
5、测试后台接口
在浏览器里输入：http://localhost:8080/view/getJobSupplierDemanderData
6、在index.js文件中，增加以下代码：
// 3. 把配置给实例对象
myChart.setOption(option);
//前端调用后端接口
var year_2022_1 = [];//2022年第一个对象
var year_2022_2 = [];//2022年第二个对象
var year_2023_1 = [];//2023年第一个对象
var year_2023_2 = [];//2023年第二个对象
$.getJSON('http://localhost:8080/view/getJobSupplierDemanderData', function (data) {
var arr = data.data
for (var i = 0; i < arr.length; i++) {
if (arr[i].type ==0 && (arr[i].date.substr(0,4)=='2022')) {
year_2022_1.push(arr[i].count)
}
else if (arr[i].type ==1 && (arr[i].date.substr(0,4)=='2022')) {
year_2022_2.push(arr[i].count)
}
else if (arr[i].type ==0 && (arr[i].date.substr(0,4)=='2023')) {
year_2023_1.push(arr[i].count)
}
else if (arr[i].type ==1 && (arr[i].date.substr(0,4)=='2023')) {
year_2023_2.push(arr[i].count)
}
}
//****************mine
yearData[0].data=[year_2022_1, year_2022_2];
yearData[1].data=[year_2023_1, year_2023_2];
//****************mine
myChart.setOption({
series:[{
data: year_2022_1
},
{
data: year_2022_2
}
]
})
});
//4.让图标跟随屏幕去自动适应
window.addEventListener("resize",function(){
myChart.resize();
});
7、测试可视化大屏效果
可视化大屏项目参考链接
【可视化大屏开发】1.基础开发环境准备_pblh123的博客-CSDN博客
【可视化大屏开发】2.基础项目配置及大屏布局_pblh123的博客-CSDN博客
【可视化大屏开发】3.大屏配置之数字模块配置_pblh123的博客-CSDN博客
【可视化大屏开发】4.大屏配置之地球模块配置_pblh123的博客-CSDN博客
【可视化大屏开发】5.大屏配置之Echarts入门学习_pblh123的博客-CSDN博客
【可视化大屏开发】6.可视化大屏配置之静态图柱形图1定制_pblh123的博客-CSDN博客
【可视化大屏开发】7.可视化大屏配置之静态图条形图定制_pblh123的博客-CSDN博客
【可视化大屏开发】8. 可视化大屏配置之静态图折线图1定制_pblh123的博客-CSDN博客
【可视化大屏开发】9. 可视化大屏配置之静态图折线图2定制_pblh123的博客-CSDN博客
【可视化大屏开发】10. 可视化大屏配置之静态图饼图1定制_pblh123的博客-CSDN博客
【可视化大屏开发】11. 可视化大屏配置之静态图饼图2定制_pblh123的博客-CSDN博客
【可视化大屏开发】12. 可视化大屏配置之静态图中国地图定制_pblh123的博客-CSDN博客
【可视化大屏开发】13. 可视化大屏配置之打通前后端更新静态图数据_pblh123的博客-CSDN博客
【可视化大屏开发】14. Maven打包可视化大屏项目-发布jar包_pblh123的博客-CSDN博客
【可视化大屏开发】15.可视化大屏项目-网络访问静态数据无法更新问题修复_pblh123的博客-CSDN博客
【可视化大屏开发】16. 可视化大屏项目共性优化问题_pblh123的博客-CSDN博客
17.可视化大屏配置之代码整理资源-CSDN文库
可视化大屏项目动态数据样例资源-CSDN文库
扫一扫
3416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
