搜索
简帛阁>技术文章>Echarts动态显示MySQL数据库中的数据

Echarts动态显示MySQL数据库中的数据

Echarts动态显示MySQL数据库中的数据

  • 下载echarts并进行简单绘图
    • 下载和配置
    • 简单绘图
  • 实时显示数据库数据
    • Apache24的安装
    • 构建项目
      • mysql数据库的表格创建
      • 获取数据的php文件编写
        • 说一下如何运行这个php文件
      • 可以实时显示数据库信息的test2.html编写
      • 运行及结果展示
  • 总结感悟

下载echarts并进行简单绘图

下载和配置

最近在学习利用echarts进行数据可视化,简单画一个表格比较简单,去官网https://echarts.apache.org/en/index.html下载解压好echarts.min.js文件放到自己的项目文件里,然后进行绘图就可以,网上各种代码不少,可以自己实践一下。

简单绘图

然后就可以进行代码编写,在这贴一个柱形图的小例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src=".echarts.min.js"></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'));
 
        // 指定图表的配置项和数据
        var option = {<!-- -->
            title: {<!-- -->
                text: 'SALARY OF EMP'
            },
            tooltip: {<!-- -->},
            legend: {<!-- -->
                data:['SALARY','COMM','ALL'],
            },
            xAxis: {<!-- -->
                data: ["JASON","PETER","BOB","PARK","MARY","LISA"]
            },
            yAxis: {<!-- -->},
            series: [{<!-- -->
                name: 'SALARY',
                type: 'bar',
                data: [5000, 4220, 3600, 4110, 3010, 6000]
            },
           
            {<!-- -->
                name: 'COMM',
                type: 'bar',
                data: [0,1000,2000,0,2500,2000]
            },
             {<!-- -->
                name: 'ALL',
                type: 'line',
                data: [5000, 5220, 5600, 4110, 5510, 8000]
            }
            ]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>


因为我觉得如果绘图还需要进行把数据写死,我还需要把数据写道html文件里这太傻了,谁也不愿意把一大堆数据往里输入。通过几篇博客学习了一下如何进行实时的显示数据库数据。

实时显示数据库数据

首先我们需要Apache24,利用php读出数据库数据,然后以json格式传到前端。

Apache24的安装

这是一个特别麻烦的过程,一开始我是想直接使用vs code的,但是没有搞明白,无奈搜索了一下php环境的配置,这个连接我觉得还是很不错的,https://blog.csdn.net/weixin_44918822/article/details/90405835

构建项目

将文件放到Apache24的htdocs文件夹下。

这里忘了说jquery-1.9.1.min.js的下载了,直接百度搜一下就可以找到下载连接了,也是放到这个文件夹下。

mysql数据库的表格创建

创建表格,然后插入和数据

use test;
create table test (
id int(11),
name varchar(10),
sal int(11),
comm int(11)
)
insert into test values('1','JASON','5000','0');
insert into test VALUES('2','PETER','4220','1000');
insert into test VALUES('3','BOB','3600','2000');
insert into TEST VALUES('4','PARK','4110','0');
insert into TEST VALUES('5','MARY','3010','2500');
insert into TEST VALUES('6','LISA','6000','2000');

获取数据的php文件编写

test.php

<?php
	//PHP连接数据库 
	header("content-type:text/json;charset=utf-8");
	//链接数据库
	$con = mysqli_connect("localhost", "root", "123456"); 
	if (!$con) 
	{<!-- --> 
		die('Could not connect database: ' ); 
	} 
 
	//选择数据库
	$db_selected = mysqli_select_db($con, "test"); 
	if (!$db_selected) 
	{<!-- --> 
	 	die ("Can\'t use yxz : " ); 
	} 
 
	//执行MySQL查询-设置UTF8格式
	// mysqli_query("SET NAMES utf8"); 	
	// mysqli_query()
	//查询学生信息
	$sql = "SELECT * FROM TEST ";
	$result = mysqli_query($con,$sql); 
 
	//定义变量json存储值
	$data="";
	$array= array();
	class emp{<!-- -->
		public $id;
	    public $name;
	    public $sal;
		public $comm;
	}
	while ($row = mysqli_fetch_row($result))
	{<!-- --> 
		list($id,$name,$sal,$comm) = $row;   
  	

		$em = new emp();
		$em->id = $id;
		$em->name = $name;
		$em->sal = $sal;
		$em->comm = $comm;
 
		//数组赋值
		$array[] = $em;
	}
 
	$data = json_encode($array);
	echo $data;
 
?>

这里要说的是mysql_connect(),在我的电脑上是不支持的,所以我改用了mysqli_connect(),想配置可以使用mysql_connect()来着,可是不见成效。但是两个函数传参位置有所不同,大家学习时候可以自行甄别。

说一下如何运行这个php文件

因为我一开始试了很久没有出结果,以为自己的环境没对,在这给大家说明一下,别像我一样误认为是错了,忙活半天。

一定要打开这个httpd.exe文件,然后再浏览器输入localhost\test.php,出现一下结果

可以实时显示数据库信息的test2.html编写

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
    <script src="jquery-1.9.1.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        
        var myChart = echarts.init(document.getElementById('main'));
       
        var names=[], sals=[], comms=[], alls=[];
        function TestAjax(){<!-- -->
            $.ajax({<!-- -->
                type: "post",
                async: false,     
                url: "sql.php",   
                data: {<!-- -->},         
                dataType: "json", 
                success: function(result) {<!-- -->
                    if (result) {<!-- -->
                        for (var i = 0; i < result.length; i++) {<!-- -->
                            names.push(result[i].name);
                            sals.push(result[i].sal);
							comms.push(result[i].comm);
							alls.push(Number(result[i].comm) +Number(result[i].sal));
                            console.log(result[i].name);
                            console.log(result[i].sal);
							console.log(result[i].comm);
                        }
                    }
                }
            })
            return names, sals, comms, alls;
        }
 
        
        TestAjax();
 
      
        var option = {<!-- -->
            title: {<!-- -->
                text: 'SALARY OF EMP'
            },
            tooltip: {<!-- -->
                //show : true
            },
            legend: {<!-- -->
                data:['SALARY','COMM','ALL'],
            },
            xAxis: [{<!-- -->
                data : names
            }],
            yAxis: {<!-- -->
                
            },
            series: [{<!-- -->
                name : "SALARY",
                type : "bar",
                data : sals
            },
			{<!-- -->
				name : "COMM",
				type : "bar",
				data : comms
			},
			{<!-- -->
				name : "ALL",
				type : "line",
				data : alls
			}
			]
        };
 
       
        myChart.setOption(option);
    </script>
</body>
</html>

运行及结果展示

还是打开httpd.exe文件先,然后再浏览器输入localhost\test2.html即可

当我改变数据库的某一个值时

刷新页面

可以看到对应的数据也及时的显示出来。

总结感悟

最后说一下自己再实践过程中的感悟,利用echarts来绘图时十分方便快捷的,交互性强,实时显示数据这个demo呢只是演示一下echarts的动态获取信息进行绘图,一般时利用ssm结构的java编程或者时django和pyecharts来编写,定时刷新,效果会更好一些。

Echarts动态显示MySQL数据库中的数据下载echarts并进行简单绘图下载和配置简单绘图实时显示数据库数据Apache24的安装构建项目mysql数据库的表格创建获取数据的php文件编写说一
、springmvc和springboot整合mybatis请自行配置。2、pomxml引入管理ECharts的js文件的jarorgwebjarsbowerecharts404orgwebjars
适合像我这样的新手使用)最近学完了ECharts官方推出的视频教程,了解了常用表格的个性化定制方法,但却并没有真正将其应用到我们的项目(JavaWeb项目)中。官方的所有业务都是与数据可视化相关的,
目录前言一、vue配置二、适配方案三、Echarts四、实时更新前言因为是国企线上应用的活动大屏,我就不附图了。代码仅供参考。一、vue配置1我是用vuecli搭建的,大屏项目复杂度不高,vuero
尝试了几种方法,感觉过于复杂,于是自己写了一个方法。(1)首先在要绘图的页面传入从数据库中提取的参数,这一步通过views可以实现;(2)然后是页面加载完成时执行的函数ready,调用方法f;(3)
使用爬虫等获取实时数据+Flume+Kafka+SparkStreaming+mysql+Echarts实现数据动态实时采集、分析、展示【获取完整源码关注公众号:靠谱杨的挨踢生活回复kafka获取下
Echarts图表数据一般都是从后台数据库实时取数据的传输数据大多采用JSON数据格式本文通过springmvc来拦截数据请求完成数据显示以下是工程目录该工程在一个springmvc的基础代码上搭建
问题描述:做Echarts可视化图表,前后端分离项目,前端异步获取后端接口数据echarts图表不显示问题left_center_char(){<!>vardatesli[];varco
今天开发中遇到一个问题,echarts图表触摸x轴触发tooltip会将x轴上所有的数据展示出来,但是有些场合只需要展示某些数据就可以,并不需要全部展示,如下图:这里警戒线因为需要开关,所以使用填充的
Echarts通过Ajax实现动态数据加载Echarts(3x版)官网实例的数据都是静态的,实际使用中往往会要求从服务器端取数据进行动态显示,官网教程里给出的异步数据加载很粗略,下面就以官网最简单的