[Development of large visual screen] 13. Open up the front and back end of the large visual screen configuration to update the static image data
- Build the Spring Boot daemon framework
- Write a controller to receive front-end data requests
- Modify the front-end interface to call the back-end Controller
- Write the Result class
- Write ViewMapper
- Import test data and test front-end and back-end interface calls
- Solve the problem of front-end and back-end separation and cross-domain access
- Implement the salary distribution module
- Employment Industry Module Update
- Implement the Hot Jobs module
- Job Requirements Transformation Chart
- Update year-month number of jobs graph
Build the Spring Boot daemon framework
1. Demand
In the view directory of the view module of this project, build the module
- bean
- conf
- controller
- mapper
2. Implementation steps
The implementation steps are as follows,
The effect after the new creation is completed
Write a controller to receive front-end data requests
1. Demand
- Create a ViewController, and the user receives front-end data requests
2. Code implementation
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将数据返回");
}
}
Modify the front-end interface to call the back-end Controller
1. Demand
- Call the backend data request through the frontend
2. Implementation steps
1. Find ViewApplication and start it
Access the port, refresh the browser again, and see
localhost:8080/view/getAreaData again
3. Check the console log for output
Refresh the browser again and see the console again
The interface call is successful!
5. After the immediate execution function of the second pie chart (Nightingale rose chart) in the front-end index.js, add the following code:
// 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. Test whether the front-end can call the back-end interface.
(1) Restart ViewApplication
(2) Open the front-end visual large screen
(3) Check the Spring Boot console log
(4) Refresh the big visual screen again
So far, the front end calls the back end successfully!
Write the Result class
1. Demand
- Create the Result class
2. Implementation steps
1. Create the Result class
2. Write the code as follows:
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;
}
}
Write ViewMapper
1. Demand
- Create ViewMapper
2. Implementation steps
Create ViewMapper
2. Write code
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();
}
Import test data and test front-end and back-end interface calls
1. Demand
- Import test data
- Test front-end and back-end interface calls
2. Implementation steps
Import test data, find job_area.sql from "Project Materials", and import it into the mysql database
2. Modify the ViewMapper file
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. Modify the ViewController file
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. Start ViewApplication
Start successfully
Visit
localhost:8080/view/getAreaData
Compare database data:
So far, accessing data data through the interface is successful!
Solve the problem of front-end and back-end separation and cross-domain access
1. Demand
After completing experiment 59 and successfully accessing data through the interface, the Nightingale rose chart at the front end of index.html does not display the data correctly, as shown in the figure
It is necessary to solve the problems of front-end and back-end separation and cross-domain access.
2. Implementation steps
1. Test whether the front end can display the data of the mysql database normally.
2. Check the reason: right-click – "Check"
3. An error is found:
4. Baidu error reason: 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. Add annotations to ViewController:
@CrossOrigin(origins = "*", maxAge = 3600) //Solve the cross-domain access problem of front-end and back-end separation
6. Restart the SpringBoot test again.
So far, the table data of the database is obtained normally!
The rest is to fill in the data one by one.
Implement the salary distribution module
1. Demand
- For the pie chart in the first column (left column) of index.html, modify it to salary distribution
- Realize front-end and back-end connection of data
2. Implementation steps
For the pie chart in the first column (left column) of index.html, modify it to salary distribution
Realize front-end and back-end connection of data
2. In the first column in index.js, in the third pie chart, add the code to call the background interface:
// 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. In ViewController, add an interface
//@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. Add old interface in 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. Test:
(1) Start the SpringBoot background
Optional extensions: requirements that can be added to this project
- A login item detection is added to the webpage, which needs to be logged in to view, and the information that can be seen is different for different roles
- Add a window to select different search keywords to filter the data, and different filters display different search results
- Increase company type screening
- Add industry type competition
MySQL Data Prep Salary Data
-- 查询大数据相关职位的收入数据
-- 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;
Abnormal data needs to be processed
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) In the browser, enter: http://localhost:8080/view/getSalRangeData
6. Start the front-end large screen
So far, the salary distribution module has been completed! !
Employment Industry Module Update
1. Demand
- Front-end data update of the employment market module
2. Implementation steps
1. In the first histogram in the first column of the index.js file, add front-end interface calls.
// 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. Add getIndustryData interface in ViewController
@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. In the ViewMapper file, add the getIndustryData interface
@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();
}
If you want to use all the data, you can update the data
@Select("select ind_name, value from job_instry where job_key = '大数据' order by value desc limit 7")
List<Map<String, Objects>> getInstryData();
Industry job data preparation
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. Restart ViewApplication
5. Test calling the background interface: open the browser and enter: http://localhost:8080/view/getIndustryData
debug
The code address is wrongly written, it is ok after replacement
The background interface call is successful
6. Test the large screen
Change graph name index.html
<selection class="mainbox">
<div class="column">
<div class="panel bar">
<h2>不同行业职位需求数量</h2>
<div class="chart"></div>
<div class="panel-footer"></div>
</div>
restart viewapplication
debug
The first column chart in the left column, X shows incomplete information
Implement the Hot Jobs module
1. Demand
Update the first histogram in the third column [on the right] to popular positions
2. Implementation steps
1. Modify the name of the first histogram in the third column to: Histogram-Hot Jobs
2. In the index.js file, add:
// 条形图【柱状图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. In the ViewController file, add:
@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. In the ViewMapper file, add
@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();
data preparation
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. Restart ViewApplication
6. To test the back-end interface, open the browser and enter: http://localhost:8080/view/getJobItemData
7. Start the large visualized screen and see the result
So far: the popular job module is complete! !
Job Requirements Transformation Chart
1. Demand
Realize the update of the front-end and back-end data change charts to the line chart 2
2. Implementation steps
data preparation
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. In the ViewController file, add the following code
@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. In the ViewMapper file, add the following code
@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. Restart ViewApplication
5. Test the background interface
Enter in the browser: localhost:8080/view/getJobMChange
6. In the index.js file, add the following code:
// 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();
});
Modify index.html
7. Test the visual large screen effect
![![[Pasted image 20230222154507.png]]](https://img-blog.csdnimg.cn/909ed3926e17465e8ed42d33b8b27c75.png)
Update year-month number of jobs graph
1. Demand
Realize the update graph of the number of positions by year and month to the second line graph in the left column
2. Implementation steps
data import
2. In the ViewController file, add the following code
@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. In the ViewMapper file, add the following code
@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. Restart ViewApplication
5. Test the background interface
Enter in the browser: http://localhost:8080/view/getJobSupplierDemanderData
6. In the index.js file, add the following code:
// 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. Test the visual large screen effect
Visual large screen project reference link
[Visual large-screen development] 1. Basic development environment preparation_pblh123's blog-CSDN blog
[Visual large-screen development] 2. Basic project configuration and large-screen layout_pblh123's blog-CSDN blog
[Visual large-screen development] 3. Big Digital module configuration for screen configuration_pblh123's blog-CSDN blog
[Visualized large-screen development] 4. Earth module configuration for large-screen configuration_pblh123's blog-CSDN blog
[Visualized large-screen development] 5. Getting started with Echarts for large-screen configuration _pblh123's Blog-CSDN Blog
[Visualized Large Screen Development] 6. Static Column Chart 1 Customization of Visualized
Large Screen Configuration Graph customization_pblh123's blog-CSDN blog
[Visual large screen development] 8. Static line graph 1 customization of large visual screen configuration_pblh123's blog-CSDN blog
[Visual large screen development] 9. Static large visual screen configuration Line Chart 2 Customization_pblh123's Blog-CSDN Blog
[Visualized Large Screen Development] 10. Static Pie Chart 1 Customization of Visualized Large Screen Configuration_pblh123's Blog-CSDN Blog
[Visualized Large Screen Development] 11. Visualized Large Screen Configuration Static Pie Chart 2 Customization_pblh123's Blog-CSDN Blog
[Visualized Large Screen Development] 12. Visualized Large Screen Configuration Static Map Customization of China_pblh123's Blog-CSDN Blog
[Visualized Large Screen Development] 13. Visualized Large Screen Configuration to get through the front and rear ends to update the static image
data
[Visual large screen development] 15. Visual large screen project - network access static data cannot be updated problem repair_pblh123's blog-CSDN blog [
Visual large screen development] 16. Visual large screen project common optimization issues_pblh123's blog-CSDN blog
17. Code finishing resources for visual large screen configuration - CSDN library
Visual large screen project dynamic data sample resources - CSDN library