程序博客网 > 从微信里打开淘宝

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

来源：互联网 发布：从微信里打开淘宝 编辑：程序博客网 时间：2024/06/03 19:24

一. Echarts绘制直方图

Echarts官网地址：http://echarts.baidu.com/index.html
注意：基础知识参考前一篇文章，这篇文章主要是代码为主，整个流程都是详细的。同时发现，准备写这篇文章的时候，“纯臻”大神也写了篇类似的，但依然有不同的地方可能对你有所帮助。
Echarts代码 test01.html

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>ECharts</title>  
  6.     <!-- 引入 echarts.js -->  
  7.     <script src="echarts.min.js"></script>  
  8. </head>  
  9. <body>  
  10.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->  
  11.     <div id="main" style="width: 600px;height:400px;"></div>  
  12.     <script type="text/javascript">  
  13.         // 基于准备好的dom，初始化echarts实例  
  14.         var myChart = echarts.init(document.getElementById('main'));  
  15.   
  16.         // 指定图表的配置项和数据  
  17.         var option = {  
  18.             title: {  
  19.                 text: 'ECharts 入门示例'  
  20.             },  
  21.             tooltip: {},  
  22.             legend: {  
  23.                 data:['数量']  
  24.             },  
  25.             xAxis: {  
  26.                 data: ["贵阳市","遵义市","凯里市","六盘水市","都匀市","毕节市"]  
  27.             },  
  28.             yAxis: {},  
  29.             series: [{  
  30.                 name: '数量',  
  31.                 type: 'bar',  
  32.                 data: [5, 20, 36, 10, 10, 20]  
  33.             }]  
  34.         };  
  35.   
  36.         // 使用刚指定的配置项和数据显示图表。  
  37.         myChart.setOption(option);  
  38.     </script>  
  39. </body>  
  40. </html>  
运行结果如下图所示：



二. 创建数据库

创建数据库hcpmanage，再创建表guizhou，包括序号、地名、数量三个字段。
如下所示：

SQL语句对应的代码：

[sql] view plain copy
  1. -- ----------------------------  
  2. -- Table structure for `guizhou`  
  3. -- ----------------------------  
  4. DROP TABLE IF EXISTS `guizhou`;  
  5. CREATE TABLE `guizhou` (  
  6.   `id` int(11) NOT NULL AUTO_INCREMENT,  
  7.   `place` varchar(20) COLLATE utf8_unicode_ci DEFAULT NULL,  
  8.   `num` int(11) DEFAULT NULL,  
  9.   PRIMARY KEY (`id`)  
  10. ) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;  
  11.   
  12. -- ----------------------------  
  13. -- Records of guizhou  
  14. -- ----------------------------  
  15. INSERT INTO `guizhou` VALUES ('1', '贵阳市', '5');  
  16. INSERT INTO `guizhou` VALUES ('2', '遵义市', '20');  
  17. INSERT INTO `guizhou` VALUES ('3', '凯里市', '36');  
  18. INSERT INTO `guizhou` VALUES ('4', '六盘水市', '10');  
  19. INSERT INTO `guizhou` VALUES ('5', '都匀市', '10');  
  20. INSERT INTO `guizhou` VALUES ('6', '毕节市', '20');  


三. PHP连接数据库及Json传值

PHP连接数据库的核心代码大家非常熟悉了，下面这段代码简单包括了Json取值。
sql.php文件：

[php] view plain copy
  1. <?php  
  2.     //PHP连接数据库   
  3.     header("content-type:text/json;charset=utf-8");  
  4.     //链接数据库  
  5.     $con = mysql_connect("localhost", "root", "123456");   
  6.     if (!$con)   
  7.     {   
  8.         die('Could not connect database: ' . mysql_error());   
  9.     }   
  10.   
  11.     //选择数据库  
  12.     $db_selected = mysql_select_db("hcpmanage", $con);   
  13.     if (!$db_selected)   
  14.     {   
  15.         die ("Can\'t use yxz : " . mysql_error());   
  16.     }   
  17.   
  18.     //执行MySQL查询-设置UTF8格式  
  19.     mysql_query("SET NAMES utf8");    
  20.   
  21.     //查询学生信息  
  22.     $sql = "SELECT * FROM `guizhou` ";  
  23.     $result = mysql_query($sql,$con);   
  24.   
  25.     //定义变量json存储值  
  26.     $data="";  
  27.     $array= array();  
  28.     class GuiZhou{  
  29.         public $id;  
  30.         public $place;  
  31.         public $num;  
  32.     }  
  33.   
  34.     while ($row = mysql_fetch_row($result))  
  35.     {   
  36.         list($id,$place,$num) = $row;     
  37.       
  38.         /* 
  39.         echo $id.' '; 
  40.         echo $place.' '; 
  41.         echo $num; 
  42.         echo '<br >'; 
  43.         */  
  44.         $gz = new GuiZhou();  
  45.         $gz->id = $id;  
  46.         $gz->place = $place;  
  47.         $gz->num = $num;  
  48.   
  49.         //数组赋值  
  50.         $array[] = $gz;  
  51.     }  
  52.   
  53.     $data = json_encode($array);  
  54.     echo $data;  
  55.     //{"id":"1","place":"\u8d35\u9633\u5e02","num":"5"}  
  56.   
  57. ?>  
核心代码，通过array数组获取Guizhou类中的值，该值是读取数据库并且赋值给实例gz的，再调用json_encode($array)进行格式转换。输出结果如下所示，也可以Json只获取两个值。


注意访问地址为：http://localhost:8080/20170224YXZ/sql.php，文件放到Apache的htdocs目录下。所有文件如下图所示：




四. Ajax动态实现Echarts可视化

test02.html代码如下：

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>ECharts</title>  
  6.     <!-- 引入 echarts.js -->  
  7.     <script src="echarts.min.js"></script>  
  8.     <script src="jquery-1.9.1.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->  
  12.     <div id="main" style="width: 600px;height:400px;"></div>  
  13.     <script type="text/javascript">  
  14.         // 基于准备好的dom，初始化echarts实例  
  15.         var myChart = echarts.init(document.getElementById('main'));  
  16.         // 初始化两个数组，盛装从数据库中获取到的数据  
  17.         var places=[], nums=[];  
  18.         function TestAjax(){  
  19.             $.ajax({  
  20.                 type: "post",  
  21.                 async: false,     //异步执行  
  22.                 url: "sql.php",   //SQL数据库文件  
  23.                 data: {},         //发送给数据库的数据  
  24.                 dataType: "json", //json类型  
  25.                 success: function(result) {  
  26.                     if (result) {  
  27.                         for (var i = 0; i < result.length; i++) {  
  28.                             places.push(result[i].place);  
  29.                             nums.push(result[i].num);  
  30.                             console.log(result[i].place);  
  31.                             console.log(result[i].num);  
  32.                         }  
  33.                     }  
  34.                 }  
  35.             })  
  36.             return places, nums;  
  37.         }  
  38.   
  39.         //执行异步请求  
  40.         TestAjax();  
  41.   
  42.         // 指定图表的配置项和数据  
  43.         var option = {  
  44.             title: {  
  45.                 text: 'ECharts+Ajax+MySQL+PHP'  
  46.             },  
  47.             tooltip: {  
  48.                 show : true  
  49.             },  
  50.             legend: {  
  51.                 data:['数量']  
  52.             },  
  53.             xAxis: [{  
  54.                 //data: ["贵阳市","遵义市","凯里市","六盘水市","都匀市","毕节市"]  
  55.                 type : 'category',  
  56.                 data : places  
  57.             }],  
  58.             yAxis: {  
  59.                 type : 'value'  
  60.             },  
  61.             series: [{  
  62.                 name : "数量",  
  63.                 type : "bar",  
  64.                 data : nums  
  65.             }]  
  66.         };  
  67.   
  68.         // 使用刚指定的配置项和数据显示图表。  
  69.         myChart.setOption(option);  
  70.     </script>  
  71.     <marquee>Eastmount 璋 love 娜!!!</marquee>  
  72. </body>  
  73. </html>  
运行结果如下图所示，这是动态调用的可视化结果。


其中Ajax核心代码为：

[html] view plain copy
  1. var places=[], nums=[];  
  2.    function TestAjax(){  
  3.        $.ajax({  
  4.            type: "post",  
  5.            async: false,     //异步执行  
  6.            url: "sql.php",   //SQL数据库文件  
  7.            data: {},         //发送给数据库的数据  
  8.            dataType: "json", //json类型  
  9.            success: function(result) {  
  10.                if (result) {  
  11.                    for (var i = 0; i < result.length; i++) {  
  12.                        places.push(result[i].place);  
  13.                        nums.push(result[i].num);  
  14.                        console.log(result[i].place);  
  15.                        console.log(result[i].num);  
  16.                    }  
  17.                }  
  18.            }  
  19.        })  
  20.        return places, nums;  
  21.    }  
  22.    //执行异步请求  
  23.    TestAjax();   
同时，浏览器中检查元素可以对Ajax的值进行测试输出，调用console.log函数。
如下图所示：


数据动态变化，数据库变了，可视化图也变化：





五. 难点及注意事项

初学的同学可能会遇到一下几个问题：

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
            }]


阅读全文
0 0
从微信里打开淘宝 从微信里打开淘宝
原创粉丝点击
热门IT博客
无排卵性功血 知乎无排卵性功血 知乎
淘宝卖家怎么改价格淘宝卖家怎么改价格
cdn 知乎
java动态代理实现原理
nginx 内置参数
武汉软件测试
w7ipv6无网络访问权限
下载小米直播软件
163smtp端口
round robin 算法
ar视频软件
http端口禁用
收藏品网络交易平台
淘宝上如何买组装枪
c语言做网站
mac怎么制作铃声教程
tracert centos
苹果商城软件下载
淘宝运费模板满包邮
数据分析就业怎么样
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 月影霜华 月影杀痕 月影 月影梧桐 月影传说 什么的月影 风月影月 洪荒月影 风月影 如月影 月影阑珊 月影梧桐作品 凌虚月影作品 月影杀痕解析 月影团团照样子写词语 风月影月下载 月影团团的意思 月影传说攻略 月德 监理月报范本 月报 实习月报范文12篇 月报范文 监理月报 月报怎么写 掘读音 掘的组词 掘地求生手机版 月晕而风 月晕而风础润而雨 月晕 月晕础润 月晕而风,础润而雨 今夜月明人尽望 中夜起望西园值月上 术士真理 月中影水中望 今夜月明人尽望下一句 巫朦尘顾微微全文免费 朦朦胧胧 朦 顾薇薇巫朦尘

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里