當前位置：首頁 > 编程语言 > php >内容正文

php

[Echarts可视化] 二.php和ajax连接数据库实现动态数据可视化

發布時間：2024/5/28 php 111 豆豆

生活随笔收集整理的這篇文章主要介紹了 [Echarts可视化] 二.php和ajax连接数据库实现动态数据可视化小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前一篇文章 "[Echarts可視化] 一.入門篇之簡單繪制中國地圖和貴州地區" 主要是通過Echarts可視化介紹入門知識、中國地圖和貴州地區各省份的數據分析，其中貴州地圖才是它的核心內容。
這篇文章主要結合PHP、MySQL、JQuery和Ajax從數據庫中獲取數據，動態的顯示值，這是實現真正可視化的技術入，可以應用于實際的項目中。基礎性文章，希望對您有所幫助，如果文章中存在不足之處，還請海涵~

參考文章：ECharts, PHP, MySQL, Ajax, JQuery 實現前后端數據可視化
? ? ? ? ? echarts+php+mysql 繪圖實例 - 謙一
? ? ? ? ? PHP+echarts讀取地圖數據

該篇文章代碼下載地址：

一. 回顧Echarts繪制直方圖

Echarts官網地址：http://echarts.baidu.com/index.html
注意：基礎知識參考前一篇文章，這篇文章主要是代碼為主，整個流程都是詳細的。同時發現，準備寫這篇文章的時候，“純臻”大神也寫了篇類似的，但依然有不同的地方可能對你有所幫助。
Echarts代碼 test01.html

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>ECharts</title><script src="echarts.min.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> 運行結果如下圖所示：

二. 創建數據庫

創建數據庫hcpmanage，再創建表guizhou，包括序號、地名、數量三個字段。
如下所示：

SQL語句對應的代碼：

-- ---------------------------- -- Table structure for `guizhou` -- ---------------------------- DROP TABLE IF EXISTS `guizhou`; CREATE TABLE `guizhou` (`id` int(11) NOT NULL AUTO_INCREMENT,`place` varchar(20) COLLATE utf8_unicode_ci DEFAULT NULL,`num` int(11) DEFAULT NULL,PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;-- ---------------------------- -- Records of guizhou -- ---------------------------- INSERT INTO `guizhou` VALUES ('1', '貴陽市', '5'); INSERT INTO `guizhou` VALUES ('2', '遵義市', '20'); INSERT INTO `guizhou` VALUES ('3', '凱里市', '36'); INSERT INTO `guizhou` VALUES ('4', '六盤水市', '10'); INSERT INTO `guizhou` VALUES ('5', '都勻市', '10'); INSERT INTO `guizhou` VALUES ('6', '畢節市', '20');

三. PHP連接數據庫及Json傳值

PHP連接數據庫的核心代碼大家非常熟悉了，下面這段代碼簡單包括了Json取值。
sql.php文件：

<?php//PHP連接數據庫 header("content-type:text/json;charset=utf-8");//鏈接數據庫$con = mysql_connect("localhost", "root", "123456"); if (!$con) { die('Could not connect database: ' . mysql_error()); } //選擇數據庫$db_selected = mysql_select_db("hcpmanage", $con); if (!$db_selected) { die ("Can\'t use yxz : " . mysql_error()); } //執行MySQL查詢-設置UTF8格式mysql_query("SET NAMES utf8"); //查詢學生信息$sql = "SELECT * FROM `guizhou` ";$result = mysql_query($sql,$con); //定義變量json存儲值$data="";$array= array();class GuiZhou{public $id;public $place;public $num;}while ($row = mysql_fetch_row($result)){ list($id,$place,$num) = $row; /*echo $id.' ';echo $place.' ';echo $num;echo '<br >';*/$gz = new GuiZhou();$gz->id = $id;$gz->place = $place;$gz->num = $num;//數組賦值$array[] = $gz;}$data = json_encode($array);echo $data;//{"id":"1","place":"\u8d35\u9633\u5e02","num":"5"}?> 核心代碼，通過array數組獲取Guizhou類中的值，該值是讀取數據庫并且賦值給實例gz的，再調用json_encode($array)進行格式轉換。輸出結果如下所示，也可以Json只獲取兩個值。

注意訪問地址為：http://localhost:8080/20170224YXZ/sql.php，文件放到Apache的htdocs目錄下。所有文件如下圖所示：

四. Ajax動態實現Echarts可視化

test02.html代碼如下：

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>ECharts</title><script src="echarts.min.js"></script><script src="jquery-1.9.1.min.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 places=[], nums=[];function TestAjax(){$.ajax({type: "post",async: false, //異步執行url: "sql.php", //SQL數據庫文件data: {}, //發送給數據庫的數據dataType: "json", //json類型success: function(result) {if (result) {for (var i = 0; i < result.length; i++) {places.push(result[i].place);nums.push(result[i].num);console.log(result[i].place);console.log(result[i].num);}}}})return places, nums;}//執行異步請求TestAjax();// 指定圖表的配置項和數據var option = {title: {text: 'ECharts+Ajax+MySQL+PHP'},tooltip: {show : true},legend: {data:['數量']},xAxis: [{//data: ["貴陽市","遵義市","凱里市","六盤水市","都勻市","畢節市"]type : 'category',data : places}],yAxis: {type : 'value'},series: [{name : "數量",type : "bar",data : nums}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script><marquee>Eastmount 璋 love 娜!!!</marquee> </body> </html> 運行結果如下圖所示，這是動態調用的可視化結果。

其中Ajax核心代碼為：

數據動態變化，數據庫變了，可視化圖也變化：

五. 難點及注意事項

初學的同學可能會遇到一下幾個問題：

1.其中Echarts和JQuery需要導入的，即：
? ? <script src="echarts.min.js"></script>
? ? <script src="jquery-1.9.1.min.js"></script>

2.Echarts使用的方法請大家學習前一篇文章和官網文章，這里不再敘述。

3.PHP文件需要header("content-type:text/json;charset=utf-8");聲明Json格式，同時Ajax也需要設置dataType: "json"。

4.聲明的Ajax函數需要執行，對應代碼中的TestAjax()，否則只是定義未執行。

5.如果Ajax報錯 [object Object]，如下圖所示：

這需要Json格式一致，而我的錯誤是因為在PHP文件中增加了個注釋導致無值，百度都無法解決，頭都弄大了，所以寫代碼需要仔細。

6.最后動態數據是通過變量實現的，即ages替換以前的 [5, 20, 36, 10, 10, 20]。
? ? ? ? ? ? series : [ {
? ? ? ? ? ? ? ? ? ?name : "num",
? ? ? ? ? ? ? ? ? ?type : "bar",
? ? ? ? ? ? ? ? ? ?data : ages
? ? ? ? ? ? }]

最后希望這篇文章對你有所幫助，尤其是對Echarts可視化感興趣的同學，同樣Java、C#、Python相關網站的原理一樣，代碼也會上傳。最近心情真的好低落，哎！有時間寫日記總結下吧。
? ? ? ? 穩坐珠江夜游船，翻轉長隆水世界。
? ? ? ? 笑談粵廣風流人，寧負天下不負卿。
哎！總是心事重重，自己真的有太多的不足和需要成長的地方，以前總會知足，現在也會。哎！為人處世真需要一輩子去學習，且寫且珍惜吧，傳遞正能量。
(By:Eastmount 2017-06-02 中午2點 ? http://blog.csdn.net/eastmount/ ?)

總結

以上是生活随笔為你收集整理的[Echarts可视化] 二.php和ajax连接数据库实现动态数据可视化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：【python数据挖掘课程】十四.Sci
下一篇：【python数据挖掘课程】十五.Mat