数据可视化（完整编码实现）

置顶栗子仙

已于 2022-03-09 13:13:59 修改

阅读量1.2w

点赞数 4

分类专栏：数据可视化文章标签： echarts 前端 javascript

于 2020-03-18 13:58:28 首次发布

本文链接：https://blog.csdn.net/qq_41060065/article/details/104942055

版权

数据可视化专栏收录该内容

1 篇文章 1 订阅

订阅专栏

如何实现数据可视化

在开发过程中，我们往往会遇到很多包罗万象的需求，往往这些需求通过简单的业务流都可以解决，但是在现有的开发需求中，往往简单的工作流已经不满足现有的需求，通过不一样的方式来解决现有的需求变得尤为重要，这就用到了数据可视化的这个理念。数据可视化就是让数据通过图形的形式直观的显示出来，以便用户可以更加直观清晰的理解数据，而不是让数据变得死板没有规律。
那么该如何实现呢？
今天我就来详细的为小白介绍！

开发环境

使用了jdk1.8, 数据库MySQl数据库，后台使用Spring
boot框架,数据可视化框架Echarts(具体的搭建环节自己去看百度)。

上思路

1.分析整合：从现有的数据中分析出信息，也就是数据的整合
2.信息组合：将分析出的信息跟据Echarts支持的编码格式进行组合
3.图标展示：组合后通过Echarts模板展示出来
PS只要SQL写的好一切没烦恼

一.数据库表和数据的创建(随意创建的，不要在乎名字了)

（1）Fruit表

id:订单编号
shoujia:售出价格
price：进价
name：水果名字

CREATE TABLE `Fruit` (
	`id` INT(11) NOT NULL AUTO_INCREMENT,
	`shoujia` INT(11) NOT NULL DEFAULT '0',
	`price` INT(11) NOT NULL DEFAULT '0',
	`name` VARCHAR(50) NOT NULL DEFAULT '0',
	PRIMARY KEY (`id`)
)
COLLATE='utf8_general_ci'
ENGINE=InnoDB
AUTO_INCREMENT=6
;

Fruit表数据

水果表数据
（2）DingDan表

cid：水果编号
id：订单编号
shijian:售出时间
ioc：数量

CREATE TABLE `DingDan` (
	`cid` INT(11) NULL DEFAULT NULL,
	`id` INT(11) NOT NULL AUTO_INCREMENT,
	`shijian` VARCHAR(50) NULL DEFAULT NULL,
	`loc` INT(11) NULL DEFAULT NULL,
	PRIMARY KEY (`id`)
)
COLLATE='utf8_general_ci'
ENGINE=InnoDB
AUTO_INCREMENT=100000
;

订单表数据模拟（随机生成100万条18年订单表数据）

DROP PROCEDURE if EXISTS test_insert;
DELIMITER ;;
CREATE PROCEDURE test_insert()
BEGIN
DECLARE y BIGINT DEFAULT 1;
WHILE y<1000000
DO
INSERT INTO DingDan(`cid`, `shijian`, `loc`) VALUES ((SELECT FLOOR(RAND() * 10) ), (select concat('2018-',mod(floor(1+rand()*10),9),'-',floor(1+rand()*28),' ', floor(8+rand()*10),':',floor(10+rand()*49),':',floor(10+rand()*49)) from dual), (SELECT FLOOR(RAND() * 10000) ));
SET y=y+1;
END WHILE ;
commit;
END;;
CALL test_insert();

（3）从大量的数据中分析出自己想要的数据（我想得到18年每个季度的总利润，总售价，总进价）
在这里插入图片描述

sql语句

SELECT  (case (QUARTER(a.shijian)+1)  
when 1 then '第一季度' 
when 2 then '第二季度'  
when 3 then '第三季度' 
when 4 then '第四季度' end) as jidu , 
ROUND(sum((b.shoujia-b.price)*a.loc/10000))/10000 as lirun, 
ROUND(sum(b.shoujia*a.loc/10000))/10000 shoujia, 
ROUND(sum(b.price*a.loc/10000))/10000 benjin  
from DingDan a 
left join Fruit b on a.cid=b.id 
group by QUARTER(a.shijian)+1

这样我们的数据库就已经搭建好了，MySQL语句也写出来了，MySQL语句的逻辑书写自己百度

二.JAVA后台逻辑代码的编写

(1)POJO

public class CeShi {
    private String jidu;
    private String lirun;
    private String benjin;
    private String shoujia;
    public String getJidu() {
        return jidu;
    }

    public void setJidu(String jidu) {
        this.jidu = jidu;
    }

    public String getLirun() {
        return lirun;
    }

    public void setLirun(String lirun) {
        this.lirun = lirun;
    }

    public String getBenjin() {
        return benjin;
    }

    public void setBenjin(String benjin) {
        this.benjin = benjin;
    }

    public String getShoujia() {
        return shoujia;
    }

    public void setShoujia(String shoujia) {
        this.shoujia = shoujia;
    }

    private String shoujia;



}

(2)Controller

//测试数据可视化 shujukeshi
    @GetMapping("/shujukeshi")
    public Map<String, Object> shujukeshi()
    {
        return staffService.shujukeshi();
    }

(3)Service

  //测试数据可视化 shujukeshi
    public Map<String,Object>    shujukeshi()
    {
        Map<String,Object> map=new HashMap<>();
        List<CeShi> list =kefuMapper.shujukeshi();
        String[] benjin=new String[list.size()];
        String[] jidu=new String[list.size()];
        String[] lirun=new String[list.size()];
        String[] shoujia=new String[list.size()];

        for (int i = 0; i < list.size(); i++)
        {
            benjin[i]=list.get(i).getBenjin();
            jidu[i]=list.get(i).getJidu();
            lirun[i]=list.get(i).getLirun();
            shoujia[i]=list.get(i).getShoujia();

        }
        //第一种映射方式
        map.put("benjin",benjin);
        map.put("jidu",jidu);
        map.put("lirun",lirun);
        map.put("shoujia",shoujia);
        //第二种映射方式
        map.put("shuju",list);
        return  map;
    }

第一种映射方式数据格式

在这里插入图片描述

第二种映射方式数据格式

在这里插入图片描述

**相比较来说还是第一种比较好理解，但是echarts框架更崇尚于第二种映射数据方式，因为更为灵活。也有第三种方式就是（对象：对象）的映射形式，这里不做解释，想了解可以去官网查看开发者手册。 **

(4)Mapper

//测试数据可视化 shujukeshi
    @Select("SELECT  (case (QUARTER(a.shijian)+1)  when 1 then '第一季度' when 2 then '第二季度'  when 3 then '第三季度' when 4 then '第四季度' end) as jidu , ROUND(sum((b.shoujia-b.price)*a.loc/10000))/10000 as lirun, ROUND(sum(b.shoujia*a.loc/10000))/10000 shoujia, ROUND(sum(b.price*a.loc/10000))/10000 benjin  from dept a left join co b on a.cid=b.id group by QUARTER(a.shijian)+1")
    List<CeShi>  shujukeshi();

这样我们后台的业务逻辑代码就搭建完毕

三. 前台代码的编写

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="layui/echarts.min.js"></script>
	<script src="../../layui/layui.js" charset="utf-8"></script>
	<script src="../../static/js/eleDel.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../jquery/jquery.js" charset="utf-8"></script>
	<script src="../../jquery/jquery.min.js" charset="utf-8"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例

	var myChart = echarts.init(document.getElementById('main'));
	myChart.showLoading();
    $.ajax({
                type : "get",
                url : '/kefu/shujukeshi',
                dataType : "json",        //返回数据形式为json
                success : function(data) 
				{
					console.log(data)//前台传回来的数据
					console.log(data.shuju)
					var bili=[];//列润所占比例数组
					var arr=[];//echart的data数据格式是{对象,对象},{对象,对象}..,而不是字符串拼接,因此生成对象，放进数组
					for(var i=0,t=0;i<4;i++)
					{
						t=t+parseFloat(data.lirun[i]);//转换成浮点数
					}
					
					for(var i=0;i<4;i++)
					{
						bili.push(Math.round(parseFloat(data.lirun[i])/t*100))//利润比总利润得出百分比百分比乘100得到占比在四舍五入
					}
					
					for(var i=0;i<4;i++)
					{
						var item={
							name:data.jidu[i],
							value:bili[i]
						};
						arr.push(item);//对象:对象的格式存入数组中
					}
					console.log(bili)
					console.log(arr)
					myChart.hideLoading();
					myChart.setOption({
						// backgroundColor: '#2c343c',//背景颜色
						title: {
							text: '我的第一个数据可视化'
						},
						dataset: 
						{
							source:data.shuju	// 提供一份数据。这个数据格式类似于表格 ,可以自由的搭配行列 ,默认列的映射
						},
						// legend: {},//这是一个上方显示
						tooltip: {},//提示文字
						toolbox: 
						{
							show : true,
							feature : 
							{
								mark : {show: true},
								dataView : {show: true, readOnly: false},
								magicType : 
								{
									show: true,
									type: ['pie', 'funnel']
								},
								restore : {show: true},
								saveAsImage : {show: true}
							}
						},
						xAxis: 
						[
							{type: 'category', gridIndex: 0},
							
						],
						yAxis:
						[
							{ gridIndex: 0},
						
						],
						series: [
						{type: 'bar', seriesLayoutBy: 'row'},
						{type: 'bar', seriesLayoutBy: 'row'},
						{type: 'bar', seriesLayoutBy: 'row'},
						{
							center:['65%',60],
							radius:35,
							type: 'pie',
							roseType: 'angle',
							data:arr,
							itemStyle: {
							normal: {
								shadowBlur: 200,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
							
							
						}]
					});
                },
                error : function(errorMsg) {
				alert("异常请联系管理员")
                }
            });
		                                           
    </script>
</body>
</html>

这里需要注意一点，就是引入Echarts.js，我用的是下载好的包，大家可以直接用官方echarts封装好的在线包，但是需要连接网络
成品展示：

在这里插入图片描述
为了便于理解我把冗余的代码删除了，留下了大家可以理解的代码，非常适合刚开始学习数据可视化的小白进行学习，数据可视化框架有很多，但是个人觉得百度开发的Echarts不仅开源免费，而且视觉画面更好，浏览器渲染到位，但是如果追求大数据的话可以尝试D3，毕竟D3是真的猛，但是入门不是很容易！

最后如果大家有任何问题可以加一下我的Java开发交流群，我会为大家解决我能解决的问题！

群号：1031848061

栗子仙

关注

4
点赞
踩
67

收藏

觉得还不错? 一键收藏
7
评论
数据可视化（完整编码实现）

如何实现数据可视化在开发过程中，我们往往会遇到很多包罗万象的需求，往往这些需求通过简单的业务流都可以解决，但是在现有的开发需求中，往往简单的工作流已经不满足现有的需求，通过不一样的方式来解决现有的需求变得尤为重要，这就用到了数据可视化的这个理念。数据可视化就是让数据通过图形的形式直观的显示出来，以便用户可以更加直观清晰的理解数据，而不是让数据变得死板没有规律。那么该如何实现呢？今天我就来详...
复制链接

扫一扫

专栏目录