echarts+php+mysql 绘图实例

一切如新 發表於 2019-12-27 09:26:00

最近在学习php+mysql，因为之前画图表都是直接在echart的实例demo中修改数据，便想着两相结合练习一下，通过ajax调用后台数据画图表。 我使用的是echart3，相比较第二版，echarts3体积上减少了200k，适配了移动端，且不再按照需求引入不同的包，直接用echarts.init方法初始化就ok。更简洁更强大，国产良心产品。 5分钟上手echarts3 <img src="http://obxzpdt76.bkt.clouddn.com/%E4%B8%8B%E8%BD%BD.png">
<h2 id="第一步搭建环境" style="margin: 10px 0; padding: 0; line-height: 1.5; font-size: 21px; font-family: verdana, Arial, Helvetica, sans-serif">第一步：搭建环境</h2>
 我使用XAMPP软件包作为开发平台，这个可以直接百度下载，一直next安装好。开启Apache和MySql。 在mysql中创建一个数据库，我使用了Navicat for mysql来进行数据库管理。下载及使用方法参考：百度经验 这是我建好的测试表： <img src="http://obxzpdt76.bkt.clouddn.com/Image%201.jpg">
<h2 id="第二步php链接数据库并处理数据" style="margin: 10px 0; padding: 0; line-height: 1.5; font-size: 21px; font-family: verdana, Arial, Helvetica, sans-serif">第二步：php链接数据库并处理数据</h2>
<div class="cnblogs_Highlighter">
<pre class="brush:php;gutter:true;"><?php
$mysql_server_name='localhost'; //改成自己的mysql数据库服务器

$mysql_username='root'; //改成自己的mysql数据库用户名

$mysql_password=''; //改成自己的mysql数据库密码,初始默认密码为空

$mysql_database='study'; //改成自己的mysql数据库名
?>
</pre>
</div>
可以把这个php文件保存为db_config.php，以后再进行数据库链接就直接require("db_config.php")就ok。 接下来，创建另一个php文件，处理数据：
<div class="cnblogs_Highlighter">
<pre class="brush:php;gutter:true;"><?php
require("db_config.php");
$conn=mysql_connect($mysql_server_name,$mysql_username,$mysql_password) or die("error connecting") ;
mysql_query("set names 'utf8'"); //数据库输出编码
mysql_select_db($mysql_database); //打开数据库
$result = mysql_query("select * from study");
$data="";
$array= array();
class User{
public $name;
public $age;
}
while($row = mysql_fetch_array($result,MYSQL_ASSOC)){
$user=new User();
$user->name = $row['name'];
$user->age = $row['age'];
$array[]=$user;
}
$data=json_encode($array);
// echo "{".'"user"'.":".$data."}";
echo $data;
?>
</pre>
</div>
这两个php文件都要放在..\xampp\htdecs下，在浏览器打开：http://localhost/test1.php 可以看到已经处理好的json数组：
<div class="cnblogs_Highlighter">
<pre class="brush:php;gutter:true;">[{"name":"\u767d\u96e8\u83f2","age":"40"},{"name":"\u5f20\u5929\u5f3a","age":"42"},{"name":"\u51af\u5176\u5eb8","age":"21"},{"name":"\u9a6c\u6b65\u5ddd","age":"18"},{"name":"\u6d2a\u521a","age":"100"},{"name":"\u5218\u4e09\u96cd","age":"21"},{"name":"\u9f50\u4e00\u9e23","age":"85"},{"name":"\u738b\u660e","age":"21"}]
</pre>
</div>
name的值是php将中文转成unicode编码，前端调用的时候会自动转成中文。
<h2 id="第三步前端通过ajax调用数据并绘图" style="margin: 10px 0; padding: 0; line-height: 1.5; font-size: 21px; font-family: verdana, Arial, Helvetica, sans-serif">第三步：前端通过ajax调用数据并绘图</h2>
怎么调用echarts我就不赘述了，可以直接去echart官网学习查看，基本没什么学习成本，写几个demo就会爱上她的。
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;"><!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="js/echarts.min.js"></script>
<script src="js/jquery.js"></script>
</head>
<body>

<div id="main" style="height:400px"></div>
<script type="text/javascript">
 varmyChart = echarts.init(document.getElementById('main'));
 var option = {
 tooltip: {
 show: true
 },
 legend: {
 data:['age']
 },
 xAxis : [
 {
 type : 'category',
 data : (function(){
 var arr=[];
 $.ajax({
 type : "post",
 async : false, //同步执行
 url : "test1.php",
 data : {},
 dataType : "json", //返回数据形式为json
 success : function(result) {
 if (result) {
 console.log(result);
 for(var i=0;i<result.length;i++){
 console.log(result.name);
 arr.push(result.name);
 }
 }

 },
 error : function(errorMsg) {
 alert("sorry，请求数据失败");
 myChart.hideLoading();
 }
 })
 return arr;
 })()
 }
 ],
 yAxis : [
 {
 type : 'value'
 }
 ],
 series : [
 {
 "name":"age",
 "type":"bar",
 "data":(function(){
 var arr=[];
 $.ajax({
 type : "post",
 async : false, //同步执行
 url : "test1.php",
 data : {},
 dataType : "json", //返回数据形式为json
 success : function(result) {
 if (result) {
 for(var i=0;i<result.length;i++){
 console.log(result.age);
 arr.push(result.age);
 }
 }
 },
 error : function(errorMsg) {
 alert("sorry，请求数据失败");
 myChart.hideLoading();
 }
 })
 return arr;
 })()

 }
 ]
 };
 // 为echarts对象加载数据
 myChart.setOption(option);
 // }
</script>
</body>
</pre>
</div>
　　我觉得里面最重要的就是对json数组的循环，将同属性的值创建成新的数组，然后return给对应坐标轴的data，具体的可以参考我的上一篇博客。
<img src="http://obxzpdt76.bkt.clouddn.com/test.png"> ------------------------------------------------------------------- 同事大哥指出上述代码中ajax请求了两次，如果数据量大一点就容易数据冗余。遂进行改进。将ajax请求放在option外，在一次请求中就返回两个需要的数组，然后在option时候直接用就ok。
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;"><script type="text/javascript">
 varmyChart = echarts.init(document.getElementById('main'));
 var arr1=[],arr2=[];
 function arrTest(){
 $.ajax({
 type:"post",
 async:false,
 url:"test1.php",
 data:{},
 dataType:"json",
 success:function(result){
 if (result) {
 for (var i = 0; i < result.length; i++) {
 arr1.push(result.name);
 arr2.push(result.age);
 }
 }
 }
 })
 return arr1,arr2;
 }
 arrTest();
 varoption = {
 tooltip: {
 show: true
 },
 legend: {
 data:['age']
 },
 xAxis : [
 {
 type : 'category',
 data : arr1
 }
 ],
 yAxis : [
 {
 type : 'value'
 }
 ],
 series : [
 {
 "name":"age",
 "type":"bar",
 "data":arr2
 }
 ]
 };
 // 为echarts对象加载数据
 myChart.setOption(option);
 // }
</script>
</pre>
</div>
　　本文转载自https://www.cnblogs.com/qjqcs/p/5852958.html，如有侵权，请联系删除，谢谢
最近在学习php+mysql，因为之前画图表都是直接在echart的实例demo中修改数据，便想着两相结合练习一下，通过ajax调用后台数据画图表。 我使用的是echart3，相比较第二版，echarts3体积上减少了200k，适配了移动端，且不再按照需求引入不同的包，直接用echarts.init方法初始化就ok。更简洁更强大，国产良心产品。 5分钟上手echarts3 <img src="http://obxzpdt76.bkt.clouddn.com/%E4%B8%8B%E8%BD%BD.png">
<h2 id="第一步搭建环境" style="margin: 10px 0; padding: 0; line-height: 1.5; font-size: 21px; font-family: verdana, Arial, Helvetica, sans-serif">第一步：搭建环境</h2>
 我使用XAMPP软件包作为开发平台，这个可以直接百度下载，一直next安装好。开启Apache和MySql。 在mysql中创建一个数据库，我使用了Navicat for mysql来进行数据库管理。下载及使用方法参考：百度经验 这是我建好的测试表： <img src="http://obxzpdt76.bkt.clouddn.com/Image%201.jpg">
<h2 id="第二步php链接数据库并处理数据" style="margin: 10px 0; padding: 0; line-height: 1.5; font-size: 21px; font-family: verdana, Arial, Helvetica, sans-serif">第二步：php链接数据库并处理数据</h2>
<pre class="php"><code class="hljs" style="margin: auto; vertical-align: middle; display: block; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; height: auto; overflow-x: auto; color: rgba(0, 0, 0, 1); padding: 5px !important; line-height: 1.5 !important; font-family: "Courier New", sans-serif !important; font-size: 12px !important; border: 1px solid rgba(204, 204, 204, 1) !important; border-radius: 3px !important"><?php
$mysql_server_name='localhost'; //改成自己的mysql数据库服务器

$mysql_username='root'; //改成自己的mysql数据库用户名

$mysql_password=''; //改成自己的mysql数据库密码,初始默认密码为空

$mysql_database='study'; //改成自己的mysql数据库名
?></code></pre>
 可以把这个php文件保存为db_config.php，以后再进行数据库链接就直接require("db_config.php")就ok。 接下来，创建另一个php文件，处理数据：
<pre class="php"><code class="hljs" style="margin: auto; vertical-align: middle; display: block; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; height: auto; overflow-x: auto; color: rgba(0, 0, 0, 1); padding: 5px !important; line-height: 1.5 !important; font-family: "Courier New", sans-serif !important; font-size: 12px !important; border: 1px solid rgba(204, 204, 204, 1) !important; border-radius: 3px !important"><?php
require("db_config.php");
$conn=mysql_connect($mysql_server_name,$mysql_username,$mysql_password) or die("error connecting") ;
mysql_query("set names 'utf8'"); //数据库输出编码
mysql_select_db($mysql_database); //打开数据库
$result = mysql_query("select * from study");
$data="";
$array= array();
class User{
public $name;
public $age;
}
while($row = mysql_fetch_array($result,MYSQL_ASSOC)){
$user=new User();
$user->name = $row['name'];
$user->age = $row['age'];
$array[]=$user;
}
$data=json_encode($array);
// echo "{".'"user"'.":".$data."}";
echo $data;
?></code></pre>
 这两个php文件都要放在..\xampp\htdecs下，在浏览器打开：http://localhost/test1.php 可以看到已经处理好的json数组：
<pre class="json"><code class="hljs" style="margin: auto; vertical-align: middle; display: block; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; height: auto; overflow-x: auto; color: rgba(0, 0, 0, 1); padding: 5px !important; line-height: 1.5 !important; font-family: "Courier New", sans-serif !important; font-size: 12px !important; border: 1px solid rgba(204, 204, 204, 1) !important; border-radius: 3px !important">[{"name":"\u767d\u96e8\u83f2","age":"40"},{"name":"\u5f20\u5929\u5f3a","age":"42"},{"name":"\u51af\u5176\u5eb8","age":"21"},{"name":"\u9a6c\u6b65\u5ddd","age":"18"},{"name":"\u6d2a\u521a","age":"100"},{"name":"\u5218\u4e09\u96cd","age":"21"},{"name":"\u9f50\u4e00\u9e23","age":"85"},{"name":"\u738b\u660e","age":"21"}]</code></pre>
 name的值是php将中文转成unicode编码，前端调用的时候会自动转成中文。
<h2 id="第三步前端通过ajax调用数据并绘图" style="margin: 10px 0; padding: 0; line-height: 1.5; font-size: 21px; font-family: verdana, Arial, Helvetica, sans-serif">第三步：前端通过ajax调用数据并绘图</h2>
怎么调用echarts我就不赘述了，可以直接去echart官网学习查看，基本没什么学习成本，写几个demo就会爱上她的。
<pre class="html"><code class="hljs xml" style="margin: auto; vertical-align: middle; display: block; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; height: auto; overflow-x: auto; color: rgba(0, 0, 0, 1); padding: 5px !important; line-height: 1.5 !important; font-family: "Courier New", sans-serif !important; font-size: 12px !important; border: 1px solid rgba(204, 204, 204, 1) !important; border-radius: 3px !important"><!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="js/echarts.min.js"></script>
<script src="js/jquery.js"></script>
</head>
<body>

<div id="main" style="height:400px"></div>
<script type="text/javascript">
 varmyChart = echarts.init(document.getElementById('main'));
 var option = {
 tooltip: {
 show: true
 },
 legend: {
 data:['age']
 },
 xAxis : [
 {
 type : 'category',
 data : (function(){
 var arr=[];
 $.ajax({
 type : "post",
 async : false, //同步执行
 url : "test1.php",
 data : {},
 dataType : "json", //返回数据形式为json
 success : function(result) {
 if (result) {
 console.log(result);
 for(var i=0;i<result.length;i++){
 console.log(result.name);
 arr.push(result.name);
 }
 }

 },
 error : function(errorMsg) {
 alert("sorry，请求数据失败");
 myChart.hideLoading();
 }
 })
 return arr;
 })()
 }
 ],
 yAxis : [
 {
 type : 'value'
 }
 ],
 series : [
 {
 "name":"age",
 "type":"bar",
 "data":(function(){
 var arr=[];
 $.ajax({
 type : "post",
 async : false, //同步执行
 url : "test1.php",
 data : {},
 dataType : "json", //返回数据形式为json
 success : function(result) {
 if (result) {
 for(var i=0;i<result.length;i++){
 console.log(result.age);
 arr.push(result.age);
 }
 }
 },
 error : function(errorMsg) {
 alert("sorry，请求数据失败");
 myChart.hideLoading();
 }
 })
 return arr;
 })()

 }
 ]
 };
 // 为echarts对象加载数据
 myChart.setOption(option);
 // }
</script>
</body></code></pre>
 我觉得里面最重要的就是对json数组的循环，将同属性的值创建成新的数组，然后return给对应坐标轴的data，具体的可以参考我的上一篇博客。 <img src="http://obxzpdt76.bkt.clouddn.com/test.png"> ------------------------------------------------------------------- 同事大哥指出上述代码中ajax请求了两次，如果数据量大一点就容易数据冗余。遂进行改进。将ajax请求放在option外，在一次请求中就返回两个需要的数组，然后在option时候直接用就ok。
<pre class="html"><code class="hljs xml" style="margin: auto; vertical-align: middle; display: block; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; height: auto; overflow-x: auto; color: rgba(0, 0, 0, 1); padding: 5px !important; line-height: 1.5 !important; font-family: "Courier New", sans-serif !important; font-size: 12px !important; border: 1px solid rgba(204, 204, 204, 1) !important; border-radius: 3px !important"><script type="text/javascript">
 varmyChart = echarts.init(document.getElementById('main'));
 var arr1=[],arr2=[];
 function arrTest(){
 $.ajax({
 type:"post",
 async:false,
 url:"test1.php",
 data:{},
 dataType:"json",
 success:function(result){
 if (result) {
 for (var i = 0; i < result.length; i++) {
 arr1.push(result.name);
 arr2.push(result.age);
 }
 }
 }
 })
 return arr1,arr2;
 }
 arrTest();
 varoption = {
 tooltip: {
 show: true
 },
 legend: {
 data:['age']
 },
 xAxis : [
 {
 type : 'category',
 data : arr1
 }
 ],
 yAxis : [
 {
 type : 'value'
 }
 ],
 series : [
 {
 "name":"age",
 "type":"bar",
 "data":arr2
 }
 ]
 };
 // 为echarts对象加载数据
 myChart.setOption(option);
 // }
</script></code></pre> 
来源：https://www.cnblogs.com/SpringAndMoon/p/12105598.html

頁: [1]

琼殿技术论坛's Archiver

echarts+php+mysql 绘图实例