可视化（day01）

已于 2022-10-04 00:55:14 修改
阅读量347 收藏
点赞数
分类专栏： web 笔记 文章标签： echarts
于 2022-10-03 17:07:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yygyj/article/details/127153631
版权
笔记 同时被 2 个专栏收录
65 篇文章 1 订阅
订阅专栏
web
20 篇文章 0 订阅
订阅专栏

可视化
概述
数据可视化技术的基本思想，是将数据库中每一个数据项作为单个图元元素表示，大量的数据集构成数据图像，同时将数据的各个属性值以多维数据的形式表示，可以从不同的维度观察数据，从而对数据进行更深入的观察和分析。

数据可视化之所以会大受欢迎，其原因不仅在于能带给用户良好的的视觉效果，更因为它能够产生生产力，形成数据驱动闭环，主要包含以下几个阶段:
1 )技术人员运用技术手段将需求分析、基础数据整合、数据计算等操作结合到一起进行数据可视化
2 ）实时监控数据的变化情况
3 )用户能够使用这些可视化图表，进行分析、对比等操作，定位业务问题
4)之后再结合业务变动提出新的需求
5 )技术人员将用户访问数据与新的业务需求结合，重新进行数据整合、分析、计算，循环往复下去。

代码
前端

<%@ page language="java" contentType="text/html; charset=utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts.min.js"></script>
<script type="text/javascript">
	window.onload=function(){
		 myChart = echarts.init(document.getElementById('dev01'));
		
		 //
		 timeArr=[]
		 pvArr=[]
		 uvArr=[]
		 vvArr=[]
		 newipArr=[]
		 newcustArr=[]
	
		 //定时器
		 window.setInterval(function(){
			 $.get("http://localhost:8080/FluxBiServer/BiView",function(datax){
				 	//移除数据
				 	if(pvArr.length>=15){
				 		
				 		timeArr.shift()
				 		pvArr.shift()
				 		uvArr.shift()
				 		vvArr.shift()
				 		newipArr.shift()
				 		newcustArr.shift()
				 	}
				 
				 	//
				 	timeArr.push(eval(datax)[0])
				 	pvArr.push(eval(datax)[1])
				 	uvArr.push(eval(datax)[2])
				 	vvArr.push(eval(datax)[3])
				 	newipArr.push(eval(datax)[4])
				 	newcustArr.push(eval(datax)[5])
				 	
					// 指定图表的配置项和数据
				      	var option = {
				      			
				      		  legend:{
				      			  data:['pv','uv','vv','newip','newcust']
				      		  },
				      		  xAxis: {
				      		    type: 'category',
				      		    data: timeArr
				      		  },
				      		  yAxis: {
				      		    type: 'value'
				      		  },
				      		  series: [
				      		    {
				      		        name:'pv',
				      		    	data: pvArr,
				      		      type: 'line',
				      		      smooth: true
				      		    },
				      		  {
				      		        name:'uv',
				      		    	data:uvArr,
				      		      type: 'line',
				      		      smooth: true
				      		    },
				      		  {
				      		        name:'vv',
				      		    	data: vvArr,
				      		      type: 'line',
				      		      smooth: true
				      		    },{
				      		        name:'newip',
				      		    	data: newipArr,
				      		      type: 'line',
				      		      smooth: true
				      		    },{
				      		        name:'newcust',
				      		    	data: newcustArr,
				      		      type: 'line',
				      		      smooth: true
				      		    }
				      		  ]
				      		};

				      	// 使用刚指定的配置项和数据显示图表。
				      	myChart.setOption(option);
				 })
		 },2000)
		 
		 
      	
	}
</script>
<title>Insert title here</title>
</head>
<body>
<div id="dev01" style="width: 1800px;height: 800px";align="center";> </div>
</body>
</html>

业务层

package cn.tedu.dataview;

import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.text.SimpleDateFormat;
import java.util.Random;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.jsp.tagext.TryCatchFinally;

import com.mchange.v2.c3p0.ComboPooledDataSource;

import jdk.management.cmm.SystemResourcePressureMXBean;

/**
 * Servlet implementation class BiView
 */
@WebServlet("/BiView")
public class BiView extends HttpServlet {
	private static final long serialVersionUID = 1L;
    //
	private ComboPooledDataSource source=new ComboPooledDataSource();
    //
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		try {
			Long timeStamp=System.currentTimeMillis();
			SimpleDateFormat sdf=new SimpleDateFormat("YYYY-MM-dd");
			SimpleDateFormat sdf1=new SimpleDateFormat("HH-mm-ss");
			//解析当天的日期
			String ttime=sdf.format(timeStamp);
			String xtime=sdf1.format(timeStamp);
			Connection conn = source.getConnection();
			PreparedStatement ps = conn.prepareStatement("select * from tongji2 where reporttime=?");
			
			ps.setString(1, ttime);
			ResultSet rs=ps.executeQuery();
			if(rs.next()){
				//当天有数据，则封装
				int pv=rs.getInt("pv");
				int uv=rs.getInt("uv");
				int vv=rs.getInt("vv");
				int newip=rs.getInt("newip");
				int newcust=rs.getInt("newcust");
				String result="["+"'"+xtime+"',"+pv+","+uv+","+vv+","+newip+","+newcust+"]";
				response.getWriter().write(result);
			}else{
				//没有数据，则各个指标都为0
				String result="["+"'"+xtime+"',"+"0,0,0,0,0]";
				response.getWriter().write(result);
			}
			rs.close();
			ps.close();
			conn.close();
//			response.setHeader("Access-Control-Allow-Origin", "*");
//			//前台发起ajax，组织数据返回
//			//返回数据格式[pv,uv,vv,newip,newcust]
//			String result="[";
//			for (int i = 0; i < 4; i++) {
//				int num=new Random().nextInt(100);
//				result=result+num+",";
//			}
//			int num=new Random().nextInt(100);
//			result=result+num+"]";
//			response.getWriter().write(result);
		}catch (Exception e) {
			
		}finally {
			
		}
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

c3p0

<?xml version="1.0" encoding="UTF-8"?>
<c3p0-config>
	<default-config>
		<property name="driverClass">com.mysql.jdbc.Driver</property>
		<property name="jdbcUrl">jdbc:mysql://hadoop01:3306/weblog</property>
		<property name="user">root</property>
		<property name="password">root</property>
	</default-config>
</c3p0-config>

架构
在这里插入图片描述

可视化展示
在这里插入图片描述

可视化小demo

<!DOCTYPE html>
<html>
	<head>
	<title>ECharts</title>
	<!--引入echarts.js -->
	<script src="echarts.js"></script>
	</head>
	<body>
		<div id="main" style="width:600px;height:400px"></div>
		<script type="text/javascript">
      	// 基于准备好的dom，初始化echarts实例
      	var myChart = echarts.init(document.getElementById('main'));

      	// 指定图表的配置项和数据
      	var option = {
        title: {
          	text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          	data: ['销量']
        },
        xAxis: {
          	data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          	{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          	}
        ]
      	};

      	// 使用刚指定的配置项和数据显示图表。
      	myChart.setOption(option);
    </script>
	<body>
</html>



<!DOCTYPE html>
<html>
	<head>
	<title>ECharts</title>
	<!--引入echarts.js -->
	<script src="echarts.js"></script>
	</head>
	<body>
		<div id="main" style="width:600px;height:400px"></div>
		<script type="text/javascript">
      	// 基于准备好的dom，初始化echarts实例
      	var myChart = echarts.init(document.getElementById('main'));

      	// 指定图表的配置项和数据
      	option = {
	    legend:{
		  	data:['成本','利润']  
	    },
	 	title: {
		      	text:'折线图',
		      	left:'20%'
	      	},
  	xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  	},
  	yAxis: {
    type: 'value'
  	},
  	series: [
    {
	    name:'成本',
      	data: [150, 230, 224, 218, 135, 147, 260],
      	type: 'line'
    },{
	    name:'利润',
      	data: [100, 2030, 2324, 2018, 1035, 1347, 1260],
      	type: 'line'
    }
  	]
};

      	// 使用刚指定的配置项和数据显示图表。
      	myChart.setOption(option);
    </script>
	<body>
</html>



<!DOCTYPE html>
<html>
	<head>
		
	<title>ECharts</title>
	<!--引入echarts.js -->
	<script src="echarts.js"></script>
	
	<script type="text/javascript">
		window.onload=function () {
			
			// 基于准备好的dom，初始化echarts实例
      	var myChart = echarts.init(document.getElementById('main'));

      	// 指定图表的配置项和数据
      	option = {
  	title: {
    <!--text: 'Stacked Area Chart'-->
  	},
  	tooltip: {
    trigger: 'axis',
    axisPointer: {
      	type: 'cross',
      	label: {
        backgroundColor: '#6a7985'
      	}
    }
  	},
  	legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  	},
  	toolbox: {
    feature: {
      	saveAsImage: {}
    }
  	},
  	grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  	},
  	xAxis: [
    {
      	type: 'category',
      	boundaryGap: false,
      	data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  	],
  	yAxis: [
    {
      	type: 'value'
    }
  	],
  	series: [
    {
      	name: 'Email',
      	type: 'line',
      	stack: 'Total',
      	areaStyle: {},
      	emphasis: {
        focus: 'series'
      	},
      	data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      	name: 'Union Ads',
      	type: 'line',
      	stack: 'Total',
      	areaStyle: {},
      	emphasis: {
        focus: 'series'
      	},
      	data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      	name: 'Video Ads',
      	type: 'line',
      	stack: 'Total',
      	areaStyle: {},
      	emphasis: {
        focus: 'series'
      	},
      	data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      	name: 'Direct',
      	type: 'line',
      	stack: 'Total',
      	areaStyle: {},
      	emphasis: {
        focus: 'series'
      	},
      	data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      	name: 'Search Engine',
      	type: 'line',
      	stack: 'Total',
      	label: {
        show: true,
        position: 'top'
      	},
      	areaStyle:{ color:[ 'rgba (244,12,51,0.3) ' ] },
       	<!--areaStyle:{ },-->
      	emphasis: {
        focus: 'series'
      	},
      	data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  	]
};
// 使用刚指定的配置项和数据显示图表。
      	myChart.setOption(option);
		}
      	
    </script>
	</head>
	<body>
		<div id="main" style="width:600px;height:400px"></div>
		

      	
	<body>
</html>



<!DOCTYPE html>
<html>
	<head>
		
	<title>ECharts</title>
	<!--引入echarts.js -->
	<script src="echarts.js"></script>
	
	<script type="text/javascript">
		window.onload=function () {
			
			// 基于准备好的dom，初始化echarts实例
      	var myChart = echarts.init(document.getElementById('main'));

      	// 指定图表的配置项和数据
      	option = {
	      	//color:['#FF0000','#9900CC','#9999CC' ,'#669933', '#000FF00','#FFF23F','#660033'],

  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};
// 使用刚指定的配置项和数据显示图表。
      	myChart.setOption(option);
		}
      	
    </script>
	</head>
	<body>
		<div id="main" style="width:600px;height:400px"></div>
		

      	
	<body>
</html>



<!DOCTYPE html>
<html>
	<head>
		
	<title>ECharts</title>
	<!--引入echarts.js -->
  <script type="text/javascript" src="echarts.min.js"></script>
	
	<script type="text/javascript">
		window.onload=function () {
			
			// 基于准备好的dom，初始化echarts实例
      	var myChart = echarts.init(document.getElementById('main'));

      	// 指定图表的配置项和数据
      	option = {
    dataset: {
        source: [
            ['score', 'amount', 'product'],
            [89.3, 58212, 'Matcha Latte'],
            [57.1, 78254, 'Milk Tea'],
            [74.4, 41032, 'Cheese Cocoa'],
            [50.1, 12755, 'Cheese Brownie'],
            [89.7, 20145, 'Matcha Cocoa'],
            [68.1, 79146, 'Tea'],
            [19.6, 91852, 'Orange Juice'],
            [10.6, 101852, 'Lemon Juice'],
            [32.7, 20112, 'Walnut Brownie']
        ]
    },
    grid: {containLabel: true},
    xAxis: {name: 'amount'},
    yAxis: {type: 'category'},
    visualMap: {
	    
	    orient: 'horizontal',
	    left: 'right',
        min: 0,
        max: 350,
        dimension: 0,
        splitNumber:5,
        inRange: {
            color: ['#D7DA8B', '#E15457']
        }
    },
    //visualMap: {
    //    orient: 'horizontal',
    //    left: 'center',
    //    min: 10,
    //    max: 100,
    //    text: ['High Score', 'Low Score'],
    //    // Map the score column to color
    //    dimension: 0,
    //    inRange: {
    //        color: ['#D7DA8B', '#E15457']
    //    }
    //},
    series: [
        {
            type: 'bar',
            encode: {
                // Map the "amount" column to X axis.
                x: 'amount',
                // Map the "product" column to Y axis
                y: 'product'
            }
        }
    ]
};
// 使用刚指定的配置项和数据显示图表。
      	myChart.setOption(option);
		}
      	
    </script>
	</head>
	<body>
		<div id="main" style="width:600px;height:400px"></div>
		

      	
	<body>
</html>



<!DOCTYPE html>
<html>
	<head>
		
	<title>ECharts</title>
	<!--引入echarts.js -->
  	<script type="text/javascript" src="echarts.min.js"></script>
  	<script type="text/javascript" src="jquery.js"></script>
	
	<script type="text/javascript">
		window.onload=function(){

			//定时器
			window.setInterval(function() {
					$.get("http://localhost:8080/FluxBiServer/Demo01",function(datax){
				var myChart = echarts.init(document.getElementById('main'));

      	// 指定图表的配置项和数据
      	var option = {
        
        
        legend: {
          	data: ['成本']
        },
        xAxis: {
	        type:'category',
          	data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat','Sun']
        },
        yAxis: {
			tpye:'value'
	        },
        series: [
          	{
            name: '成本',
            type: 'bar',
            data: eval(datax),
          	}
        ]
      	};

      	// 使用刚指定的配置项和数据显示图表。
      	myChart.setOption(option);
			})
				}, 2000);
			
		}
      	
    </script>
	</head>
	<body>
		<div id="main" style="width:600px;height:400px"></div>
		

      	
	<body>
</html>
快乐咸鱼Y
关注
专栏目录
数据可视化
Koite的博客
04-27 582
数据可视化简单理解，就是将数据转换成易于人辨识和理解的视觉表现形式，如各种2D图表、3D图表、地图、矢量图等等 数据可视化解决方案 Highcharts、EChart、AntV、three.js、zrender、d3、Canvas、Svg、WebGL、HTML、Chrome、Skia、OpenGL canvas canvas是HTML5的新特性，它允许我们使用canvas元素在网页上通过js绘制图像 canvas标签 canvas标签只是图形容器，相当于一个画布，canvas元素本身是没有绘图能
CSDN 数据访问可视化，写给CSDN 群友们用用
简简单单Onlinezuozuo
10-04 3866
文章目录CSDN 数据访问可视化，写给CSDN 群友们用用1、大致界面2、GitHub 项目地址3、如何使用4、具体代码 CSDN 数据访问可视化，写给CSDN 群友们用用 1、大致界面 内页就不贴图了 2、GitHub 项目地址 这里是传送门：https://github.com/FrankZuozuo/csdn-chart 有兴趣的话点个小星星吧，虽然没啥用 3、如何使用 数据库脚本先...
可视化概述
W_chuanqi的博客
09-20 2310
Visualize，“设想”，表示生成可视化图像，利用可视化方式传递信息；Visualization，“形象化 ”，表示可视化过程，对某个原本不能描述的事物形成一个可感知的画面的过程。在计算机视觉领域，数据可视化是对数据的一种形象直观的解释，实现从不同维度观察数据，从而得到更有价值的信息。抽象的、复杂的、不易理解的数据图形、图像、符号、颜色、纹理等具备较高的识别效率数据本身所包含的有用信息。
Fine Bi数据可视化day01：连接到数据
bboy_longyi的博客
08-12 1997
数据可视化入门，快来和我一起学习啦~~~
数据可视化-day02.zip
04-29
在“数据可视化-day02”这个压缩包中，我们可以期待找到与数据可视化相关的第二课的学习资料，包括可能的讲义、示例代码、练习文件等。 在数据可视化的学习中，有几个关键知识点是非常重要的： 1. **图表类型**：...
Day 4 - 可视化最佳实践.pdf
05-22
### 数据可视化及其重要性 #### 一、为什么我们需要数据可视化？ 数据可视化是将复杂的数据集转化为图表、图像等直观形式的过程。通过数据可视化，我们可以更快速地理解和解释数据中的模式、趋势以及异常值。这...
2024.4.17 Python爬虫复习day05 可视化
最新发布
04-14
在“2024.4.17 Python爬虫复习day05 可视化”中，我们将深入探讨以下几个关键知识点： 1. **基础数据处理**：在进行可视化之前，我们需要对爬取到的数据进行预处理，包括清洗、去重、格式转换等步骤。了解如何使用...
可视化简介
shadowfall的博客
03-29 3165
可视化 什么是可视化？ 可视化用一句话来说，本质上就是将数据信息组织起来后，以图形的方式呈现出来。在web上，图形通常是通过浏览器绘制的。现代浏览器是一个复杂的系统，其中负责绘制图形的部分是渲染引擎。渲染引擎绘制图形的方式，大体上有4种。 第一种是传统的HTML+CSS，呈现普通网页。 第二种是使用SVG。SVG和传统的HTML+CSS的绘图方式差别不大。只不过，HTML元素在绘制矢量图形方面的能力有些不足，而SVG恰好弥补了这方面的缺陷。 第三种是使用Canvas2D。这是浏览器提供的Canvas
可视化案例
前景
02-07 388
目录 一、数据来源 1、python源码 二、数据处理 1、json数据规整化（参考往期文章） ①将'{变为{（快捷键ctrl+H） ②单引号变双引号（此处的单引号和双引号一定要是英文符号的） ③" "变为空 ④, ,变为, ⑤中文引号变英文引号 ⑥}变为}, 2.数据处理总结 3.json数据处理工具 ①使用 三、数据可视化 1、将修正过的...
一图胜千言！详解Python数据可视化！
CSDN_430422的博客
08-03 7229
描述性分析（descriptive analytics）是任何分析生命周期的数据科学项目或特定研究的核心组成部分之一。数据聚合（aggregation）、汇总（summarization）和可视化（visualization）是支撑数据分析领域的主要支柱。从传统商业智能（Business Intelligence）开始，甚至到如今人工智能时代，数据可视化都是一个强有力的工具；由于其能有效抽取正确的信息，同时清楚容易地理解和解释结果，可视化被业界组织广泛使用。
【大数据处理与可视化】六、数据可视化
慢热型网友的博客
05-29 2815
找出河北省占地面积和游客数量位居前三的景点.这里使用了"总面积","游客量"两列数据.为了能够直观的看到这里两列数据,使用直方图.x轴: 景点的名称y轴: 表示占地面积和游客数量从生成的条形图可以看出,接待游客数量处于前三名的景点分别是:秦皇岛北戴河,西柏坡-天戴山,娲皇宫景点占地面积前三分别是:避暑山庄外八庙,野三坡,秦皇岛北戴河。在实验过程中遇到了很多硬件或者是软件上的问题，请教老师，询问同学，上网查资料，都是解决这些问题的途径。3.能够通过借助网络资源，通过自主学习解决数据可视化中遇到的问题。
【可视化编程二】可视化编程的基本概念
weixin_37537723的博客
02-24 2037
文章为笔者对Unity官网上关于Visual Scripting用户手册的个人翻译，供参考查阅，如有侵权请告知。 这个系列文章计划持续更新，实际情况看是否有读者需求而定。
可视化学习笔记01
howard2005的专栏
05-13 883
三种可视化工具：Excel、ECharts、Matplotlib
大屏可视化解决方案
热门推荐
rqgxy的博客
09-28 2万+
  大屏的前世今生 作为一个 BI 行业人，我们对 DashBaord，领导驾驶舱，仪表盘等概念都非常熟悉，然而忽如一夜春风来，客户都用起大屏来 大屏可视化需求，从 2015 年 2016 年，突然之间就成了 BI 项目，数据可视化项目需求列表的中的常见需求项，那什么是大屏呢，和我们原先的 DashBaord，有什么区别呢 我们先来看一下什么是大屏 这个场景，就是我们很多人概念中最原...
r语言时间序列可视化
11-08
date = seq(as.Date("2021-01-01"), as.Date("2021-12-31"), by = "day"), value = rnorm(365, mean = 10, sd = 2) ) # 绘制时间序列图 ggplot(data, aes(x = date, y = value)) + geom_line() + labs(title = ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值