使用echarts对数据库数据可视化

最新推荐文章于 2024-08-13 18:13:57 发布
最新推荐文章于 2024-08-13 18:13:57 发布
阅读量1.7w 收藏 126
点赞数 9
文章标签： 数据可视化 php
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43403355/article/details/106619880
版权

使用echarts对数据库数据可视化

1、echarts定制

在echart官网下载js文件
链接: echarts官网.
在这里插入图片描述
这里只用到了折线图，所以直接默认定制就可以下载了
懒得下载的可以直接用
链接: https://pan.baidu.com/s/1-5IWuIfW_4skuN8Op7O7OQ.
提取码：p39q

2、数据库

我只是用来做温湿度的可视化，所以我的数据只有时间、温度、湿度
在这里插入图片描述

3、网页实现

（1）一对一

下面展示一些 内联代码片。

main.php

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" http-equiv="refresh" content="60">
	<title>Intelligent Monitoring</title>
    <script src="echarts.min.js"></script>
</head>
<body bgcolor="black">
</script>
	<div class="wrapper">
	</div>
    <div id="main" style="width: 900px;height:500px;"></div>
    <?php
	$con = @mysqli_connect("localhost","用户名","密码") or die(				"failed to connect database¡");
            mysqli_select_db($con,"数据库名");
			$sql = 'SELECT * FROM (select * from 表名 order by id desc limit 10) aa ORDER BY id';// 获取最新十条数据
            $result = mysqli_query($con,$sql);
			$Num=mysqli_num_rows($result);  
			$time=array();// 定义时间数组，保存时间
			$temperature=array();// 定义温度数组
			for($i=0; $i<$Num; $i++){
				$row = mysqli_fetch_assoc($result);
				$time[$i] = $row['time'];// 保存从数据库中获取的数据
				$temperature[$i] = $row['temperature'];// 保存从数据库中获取的数据
			}
			mysqli_free_result($result);
			mysqli_close($con);
	echo "
    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
		var option = {
			xAxis: {
				type: 'category',
				data: ['{$time[0]}', '{$time[1]}', '{$time[2]}', 		 '{$time[3]}', '{$time[4]}', '{$time[5]}', '{$time[6]}', '{$time[7]}', '{$time[8]}', '{$time[9]}']// x轴显示数据
			},
			yAxis: {
				type: 'value'
			},
			textStyle: {
	        	fontWeight: 'normal',              //标题颜色
	        	color: '#FFFFFF'
	      	},
			series: [{
				name:'温度',
				data: [$temperature[0], $temperature[1], $temperature[2], $temperature[3], $temperature[4], $temperature[5], $temperature[6], $temperature[7], $temperature[8], $temperature[9]],// y轴显示数据
				type: 'line', // line为折线图，bar为条形图
				itemStyle:{
					normal:{
						label:{
							show:true, // 选择是否显示每个点的数据
						},
					}
				}
			}]
		};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>";
	?>
</body>
</html>

效果图：
在这里插入图片描述

（2）一对多

折线图同时显示温湿度

main.php

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" http-equiv="refresh" content="60">
	<title>Intelligent Monitoring</title>
    <script src="echarts.min.js"></script>
</head>
<body bgcolor="black">
</script>

	<div class="wrapper">

	</div>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 900px;height:500px;"></div>
    <?php
	//require "db2.php";
	$con = @mysqli_connect("localhost","用户名","密码") or die(				"failed to connect database¡");

            mysqli_select_db($con,"数据库名");

			$sql = 'SELECT * FROM (select * from 表名 order by id desc limit 10) aa ORDER BY id';

            $result = mysqli_query($con,$sql);

			$Num=mysqli_num_rows($result);  
			
			$time=array();
			$temperature=array();
			$humidity=array();
			for($i=0; $i<$Num; $i++){
				$row = mysqli_fetch_assoc($result);
				$time[$i] = $row['time'];
				$temperature[$i] = $row['temperature'];
				$humidity[$i] = $row['humidity'];					
			}
			mysqli_free_result($result);
			mysqli_close($con);
	echo "
    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
		option = {
    title: {
        text: '折线图',
		textStyle: {
	        	fontWeight: 'normal',              //标题颜色
	        	color: '#FFFFFF'
	      	},
    },
	textStyle: {
	        	fontWeight: 'normal',              //标题颜色
	        	color: '#FFFFFF'
	      	},
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['温度', '湿度'],
		textStyle: {
	        	fontWeight: 'normal',              //标题颜色
	        	color: '#FFFFFF'
	      	},
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis:{
        type: 'category',
        boundaryGap: false,
        data: ['{$time[0]}', '{$time[1]}', '{$time[2]}', '{$time[3]}', '{$time[4]}', '{$time[5]}', '{$time[6]}', '{$time[7]}', '{$time[8]}', '{$time[9]}']},
    yAxis: [
		{
			type: 'value',
			position: 'left',
			splitLine: {
				show: false// 是否有线
			},
			scale:false,// 刻度是否自动修改
			axisLabel: {
 				formatter:'{value} ℃'//单位
			},	
   		}, 
		{
			type: 'value',
			position: 'right',
			splitLine: {
				show: false
			},
			scale:false,
			axisLabel: {
 				formatter:'{value} %rh'//单位
			},
    	}
	],
    series: [
        {
            name: '温度',
            type: 'line',
	        yAxisIndex: 0,  // 通过这个判断左右
            data: [$temperature[0], $temperature[1], $temperature[2], $temperature[3], $temperature[4], $temperature[5], $temperature[6], $temperature[7], $temperature[8], $temperature[9]]
        },		
        {
            name: '湿度',
            type: 'line',
	        yAxisIndex: 1,
            data: [$humidity[0], $humidity[1], $humidity[2], $humidity[3], $humidity[4], $humidity[5], $humidity[6], $humidity[7], $humidity[8], $humidity[9]]
        }
		
    ]
};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>";
	?>
</body>
</html>

效果：
在这里插入图片描述
由于温湿度是不同类型的数据，所以这里用了双纵轴来表示
如果只需要一条纵轴

main.php

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" http-equiv="refresh" content="60">
	<title>Intelligent Monitoring</title>
    <script src="echarts.min.js"></script>
</head>
<body bgcolor="black">
</script>

	<div class="wrapper">

	</div>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 900px;height:500px;"></div>
    <?php
	//require "db2.php";
	$con = @mysqli_connect("localhost","用户名","密码") or die(				"failed to connect database¡");
            mysqli_select_db($con,"数据库名");
			$sql = 'SELECT * FROM (select * from 表名 order by id desc limit 10) aa ORDER BY id';
            $result = mysqli_query($con,$sql);
			$Num=mysqli_num_rows($result);  
			$time=array();
			$temperature=array();
			$humidity=array();
			for($i=0; $i<$Num; $i++){
				$row = mysqli_fetch_assoc($result);
				$time[$i] = $row['time'];
				$temperature[$i] = $row['temperature'];
				$humidity[$i] = $row['humidity'];					
			}
			mysqli_free_result($result);
			mysqli_close($con);
	echo "
    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
		option = {
    title: {
        text: '折线图',
		textStyle: {
	        	fontWeight: 'normal',              //标题颜色
	        	color: '#FFFFFF'
	      	},
    },

	textStyle: {
	        	fontWeight: 'normal',              //标题颜色
	        	color: '#FFFFFF'
	      	},
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['温度', '湿度'],
		textStyle: {
	        	fontWeight: 'normal',              //标题颜色
	        	color: '#FFFFFF'
	      	},
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis:{
        type: 'category',
        boundaryGap: false,
        data: ['{$time[0]}', '{$time[1]}', '{$time[2]}', '{$time[3]}', '{$time[4]}', '{$time[5]}', '{$time[6]}', '{$time[7]}', '{$time[8]}', '{$time[9]}']},
		
    yAxis: [
		{
			type: 'value',	
   		}
	],
    series: [
        {
            name: '温度',
            type: 'line',
            data: [$temperature[0], $temperature[1], $temperature[2], $temperature[3], $temperature[4], $temperature[5], $temperature[6], $temperature[7], $temperature[8], $temperature[9]]
        },
			
        {
            name: '湿度',
            type: 'line',
            data: [$humidity[0], $humidity[1], $humidity[2], $humidity[3], $humidity[4], $humidity[5], $humidity[6], $humidity[7], $humidity[8], $humidity[9]]
        }
		
    ]
};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>";
	
	
	?>
</body>
</html>

效果：
在这里插入图片描述

第一次用echarts，有哪里不对多多交流哈哈哈

如需转载，请注明出处。

`h
关注
利用ECharts可视化mysql数据库中的数据
superliug的博客
08-06 1万+
利用ECharts可视化mysql数据库中的数据 技术实现背景 在我们的日常开发中我们经常使用到各种各样的数据进行相关的功能的开发，在这个过程中我们可以用到各种各样的图表来分析和实现我们的需求，很多的时候我们可以进行相关的功能的分析和判断，在这个过程中我们就需要从数据库中读取的数据使用Echarts来进行相关的功能的分析，下图所示即为我们要实现的细节性，在这个过程中我们注意是Echarts的相关的功能的研究，然后是我们的进行相关的分析功能，下图即为我们要把我们的功能进行相关的数据库中的数据在前端进行相关的功
Echarts连接数据库显示数据
DengToDeng的博客
01-29 2万+
最近无聊研究了很久之前没有搞明白的可视化插件Echarts，从网上搜了一下官网包括大部分博客说的都是写死的数据，很少有能连接数据库的。因此，想把自己的学习经验分享出来。把完整代码发到CSDN下载里面去了，吐槽一下，CSDN自己设定了积分，为了没有积分的小伙伴们，我把代码详细在这里分解一下。 首先下载好相关插件和jar包，需要注意的一点儿是jar包不能少，刚开始时候只导入了js文件一直显示不出来图...
Jsp+Servlet+Echarts实现动态数据可视化
02-13
Jsp+Servlet+Echarts实现动态数据可视化，对应讲解博文：https://blog.csdn.net/ITBigGod/article/details/81023802
echarts温湿度实时数据展示
hate_coriander的博客
12-17 1665
echarts温湿度实时数据展示 <template> <div> <div id="chartt" class="chartt" :style="{ width: '100%', height: '230px' }"></div> </div> </template> <script> import { getAction } from '@api/manage' export default {
ECharts 数据可视化 入门基本知识 下载安装常用的图表 【1】
最新发布
weixin_43483590的博客
08-13 2122
ECharts一个基于 JavaScript 的开源可视化图表库，即将数据以图形或图像的方式展现成在屏幕上显示出来，这种方式称为数据可视化。数据可视化有助于我们分析数据，帮助我们更深入更直观的理解数据
动态 Echarts 温湿度示意图 背景可以随温度变化
无线智能模块 可视DIY智能专家
07-22 2509
效果展示 源代码（h5） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 初始化移动浏览显示 --> <meta http-equiv="Content-Type" .
使用Echarts实现动态曲线图表
aibiba0894的博客
05-26 554
最近做的一个在线气象观测网站要实现一个需求：使用图表展示最近五天温湿度等气象要素的曲线变化 具体效果参考：http://www.weatherobserve.com/showInfoIndex.jsp 图示如下（2016-5-25日的数据）： 下面就详述一下实现过程吧（注：相较于原网页我隐去了很多内容，本实现过程就只专注于Echarts图表实现） 一： HTML页面部...
Echarts图表与数据库数据结合
热门推荐
等一下233
03-01 3万+
  1.从官网下载js    http://echarts.baidu.com/download.html 2.导入到你的项目中  &lt;script type="text/javascript" src="&lt;%=request.getContextPath()%&gt;/EchatsJs/echarts.js"&gt;&lt;/script&gt; 3.给图表新建一个盒子/容器 ...
ECharts中BasicLine图+将mysql数据库中的方式通过echarts可视化
weixin_30387339的博客
12-02 274
ECharts官网示例： 1 option = { 2 xAxis: { 3 type: 'category', 4 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] 5 }, 6 yAxis: { 7 type: 'value'...
Echarts 数据处理
weixin_63267832的博客
12-15 523
echarts 数据加载
Echarts连接数据库实例
01-29
连接数据库使用Echarts插件实现可视化的小例子。使用的技术是java+servlet+mysql。项目代码压缩包中包含.sql数据库文件，开发环境是myeclipse。
echarts从数据库获取数据实现
11-13
第一使用csdn分享资源，略激动大笑，本系统使用servlet+mysql+echarts 技术实现六种图表（柱状图、饼状图、折线图、散点图、雷达图、仪表盘）的静态和异步交互，使用的开发工具是eclipse。别的不多说了，需要的下载吧
echarts+Servlet+mysql从数据库获取数据实现简单图表展示
03-17
用Servlet实现的echarts展示两种不同形式图表的小demo，使用的开发工具是eclipse，数据库是mysql。文件中包含项目源码，对应的数据库，以及项目运行后实现的图表截图（含url）。项目本人亲测，可完美展示图表，若有疑问，可Email我，Email：bpcforevery@gmail.com 。（ps:本人在另一个上传的文件中实现了用SSM框架实现的echarts展示图表的小demo，使用的数据库也是mysql，感兴趣的可以去看看）。
SSM+Echarts+Mysql实现的从数据库获取数据展示图表，展示，小案例
01-22
SSM+Echarts+Mysql实现的从数据库获取数据展示图表，展示，小案例，亲测（可用）
基于Echarts的数据可视化学习空间项目源码.zip
08-21
基于Echarts的数据可视化学习空间项目源码.zip基于Echarts的数据可视化学习空间项目源码.zip基于Echarts的数据可视化学习空间项目源码.zip基于Echarts的数据可视化学习空间项目源码.zip基于Echarts的数据可视化学习...
文章：Python flask + Mysql +Echarts ：实现数据可视化（玫瑰图）的数据
01-28
文章《Python flask + Mysql + Echarts：实现数据可视化（玫瑰图）》主要是写如何使用Python的Flask框架、MySQL数据库以及Echarts...数据库中检索数据并使用Echarts生成玫瑰图（也称为饼图或圆形图）以实现数据可视化...
Echarts数据可视化图表案例
01-11
ECharts是一款由百度开源的数据可视化库，它基于JavaScript，提供了丰富的图表类型，如柱状图、饼图、...通过学习和实践ECharts案例，开发者不仅可以掌握数据可视化的基础，还能提升对前端数据展示和交互设计的理解。
echarts连接数据库数据可视化大屏
04-22
如何实现？ 您可以通过以下步骤实现echarts连接数据库数据可视化大屏： 1. 首先，您需要选择一个数据库管理系统，并使用SQL语言从中检索数据。 2. 然后，您可以使用服务器端脚本语言（如PHP或Node.js）将数据传递给前端页面。 3. 在前端页面上，您可以使用echarts图表库来处理数据并将其可视化。您可以使用echarts的API和文档来构建您所需的图表类型和样式。 4. 最后，您可以创建一个可视化大屏，并使用HTML和CSS来呈现您的图表和其他关键信息。 请注意，数据安全和隐私保护是非常重要的。因此，请确保您对敏感数据进行适当的安全和权限设置，以确保其受到保护。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值