【可视化大屏开发】13. 可视化大屏配置之打通前后端更新静态图数据

其他 2023-09-03 09:11:50 阅读次数: 0

【可视化大屏开发】13. 可视化大屏配置之打通前后端更新静态图数据

搭建Spring Boot后台程序框架

一、需求

在本项目view模块的view目录下，构建一下模块

  • bean
  • conf
  • controller
  • mapper

二、实现步骤

实现步骤如下，

在这里插入图片描述

在这里插入图片描述

最后新建完成后的效果

在这里插入图片描述

编写controller用于接收前端数据请求

一、需求

  1. 创建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. 通过前端调用后端数据请求

二、实现步骤

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类

一、需求

  1. 创建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

一、需求

  1. 创建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();  
}

导入测试数据，并测试前后端接口调用

一、需求

  1. 导入测试数据
  2. 测试前后端接口调用

二、实现步骤

导入测试数据，从《项目素材》中找到 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测试。
在这里插入图片描述

至此，正常获取到数据库的表数据！
剩下的就是一个一个的图标填充数据即可。

实现薪资分布模块

一、需求

  1. 对index.html第一列（左边列）饼图，修改为薪资分布
  2. 实现数据的前后端联通

二、实现步骤

对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后台
在这里插入图片描述

可选扩展项：本项目可以添加的需求

  1. 网页增加一个登录项检测，需要登录才能看，不同的角色，能看到的信息不同
  2. 增加一个窗口选择不同的搜索关键词，对数据进行筛选，不同筛选展现不同的搜寻结果
  3. 增加公司性质筛选
  4. 增加行业类型赛选

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. 就业行情模块前后端数据更新

二、实现步骤

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]]

更新年月职位数量图

一、 需求

实现年月职位数量更新图到左列第二个折线图

二、实现步骤

数据导入
在这里插入图片描述

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文库

猜你喜欢

转载自blog.csdn.net/pblh123/article/details/131499158
今日推荐
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
周排行
计算机组成与设计（七）—— 除法器
Integer Approximation(分治+枚举)
大话数据库索引
windows10系统JDK的配置及下载地址
mysql实现秒值转换中原六仔平台搭建
Codeforces Round #556 (Div. 1)
百练1064 网线主管
Codeforces 995F Cowmpany Cowmpensation
子集生成之增量构造法，位向量法，二进制法
ERROR: cmd.exe failed with args /c "/APK\gradle\rungradle.bat...
每日归档
更多
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022