# Echarts PHP MySQL 调用实例

- 连结：https://blog.guohao.asia/echarts-php-mysql-%e8%b0%83%e7%94%a8%e5%ae%9e%e4%be%8b.html
- 发布时间：2022-11-02T15:45:19+08:00
- 作者：null

中文   英文   韩语   日语

## 󠀁[Apache ECharts](https://blog.guohao.asia/wp-content/themes/wordpress-theme-puock-2.8.16/inc/go.php?to=aHR0cHM6Ly9lY2hhcnRzLmFwYWNoZS5vcmcvemgvaW5kZXguaHRtbA==)󠁿

![Echarts PHP MySQL 调用实例](https://blog.guohao.asia/wp-content/themes/wordpress-
theme-puock-2.8.16/assets/img/z/load.svg "Echarts PHP MySQL 调用实例")

> ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备
> 上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari 等），底层依赖矢量
> 图形库 [ZRender](https://blog.guohao.asia/wp-content/themes/wordpress-theme-puock-2.8.16/inc/go.php?to=aHR0cHM6Ly9naXRodWIuY29tL2Vjb21mZS96cmVuZGVy)，
> 提供直观，交互丰富，可高度个性化定制的数据可视化图表。
> ECharts 提供了常规的 [ 折线图 ](https://blog.guohao.asia/wp-content/themes/wordpress-theme-puock-2.8.16/inc/go.php?to=aHR0cHM6Ly9lY2hhcnRzLmFwYWNoZS5vcmcvemgvb3B0aW9uLmh0bWwjc2VyaWVzLWxpbmU=)、
> [ 柱状图 ](https://blog.guohao.asia/wp-content/themes/wordpress-theme-puock-2.8.16/inc/go.php?to=aHR0cHM6Ly9lY2hhcnRzLmFwYWNoZS5vcmcvemgvb3B0aW9uLmh0bWwjc2VyaWVzLWJhcg==)、
> [ 散点图 ](https://blog.guohao.asia/wp-content/themes/wordpress-theme-puock-2.8.16/inc/go.php?to=aHR0cHM6Ly9lY2hhcnRzLmFwYWNoZS5vcmcvemgvb3B0aW9uLmh0bWwjc2VyaWVzLXNjYXR0ZXI=)、
> [ 饼图 ](https://blog.guohao.asia/wp-content/themes/wordpress-theme-puock-2.8.16/inc/go.php?to=aHR0cHM6Ly9lY2hhcnRzLmFwYWNoZS5vcmcvemgvb3B0aW9uLmh0bWwjc2VyaWVzLXBpZQ==)、
> [ K 线图](https://blog.guohao.asia/wp-content/themes/wordpress-theme-puock-2.8.16/inc/go.php?to=aHR0cHM6Ly9lY2hhcnRzLmFwYWNoZS5vcmcvemgvb3B0aW9uLmh0bWwjc2VyaWVzLWNhbmRsZXN0aWNr)，
> 用于统计的[ 盒形图 ](https://blog.guohao.asia/wp-content/themes/wordpress-theme-puock-2.8.16/inc/go.php?to=aHR0cHM6Ly9lY2hhcnRzLmFwYWNoZS5vcmcvemgvb3B0aW9uLmh0bWwjc2VyaWVzLWJveHBsb3Q=)，
> 用于地理数据可视化的[ 地图 ](https://blog.guohao.asia/wp-content/themes/wordpress-theme-puock-2.8.16/inc/go.php?to=aHR0cHM6Ly9lY2hhcnRzLmFwYWNoZS5vcmcvemgvb3B0aW9uLmh0bWwjc2VyaWVzLW1hcA==)、
> [ 热力图 ](https://blog.guohao.asia/wp-content/themes/wordpress-theme-puock-2.8.16/inc/go.php?to=aHR0cHM6Ly9lY2hhcnRzLmFwYWNoZS5vcmcvemgvb3B0aW9uLmh0bWwjc2VyaWVzLWhlYXRtYXA=)、
> [ 线图 ](https://blog.guohao.asia/wp-content/themes/wordpress-theme-puock-2.8.16/inc/go.php?to=aHR0cHM6Ly9lY2hhcnRzLmFwYWNoZS5vcmcvemgvb3B0aW9uLmh0bWwjc2VyaWVzLWxpbmVz)，
> 用于关系数据可视化的[ 关系图 ](https://blog.guohao.asia/wp-content/themes/wordpress-theme-puock-2.8.16/inc/go.php?to=aHR0cHM6Ly9lY2hhcnRzLmFwYWNoZS5vcmcvemgvb3B0aW9uLmh0bWwjc2VyaWVzLWdyYXBo)、
> [treemap](https://blog.guohao.asia/wp-content/themes/wordpress-theme-puock-2.8.16/inc/go.php?to=aHR0cHM6Ly9lY2hhcnRzLmFwYWNoZS5vcmcvemgvb3B0aW9uLmh0bWwjc2VyaWVzLXRyZWVtYXA=)、
> [ 旭日图 ](https://blog.guohao.asia/wp-content/themes/wordpress-theme-puock-2.8.16/inc/go.php?to=aHR0cHM6Ly9lY2hhcnRzLmFwYWNoZS5vcmcvemgvb3B0aW9uLmh0bWwjc2VyaWVzLXN1bmJ1cnN0)，
> 多维数据可视化的[ 平行坐标 ](https://blog.guohao.asia/wp-content/themes/wordpress-theme-puock-2.8.16/inc/go.php?to=aHR0cHM6Ly9lY2hhcnRzLmFwYWNoZS5vcmcvemgvb3B0aW9uLmh0bWwjc2VyaWVzLXBhcmFsbGVs)，
> 还有用于 BI 的[ 漏斗图 ](https://blog.guohao.asia/wp-content/themes/wordpress-theme-puock-2.8.16/inc/go.php?to=aHR0cHM6Ly9lY2hhcnRzLmFwYWNoZS5vcmcvemgvb3B0aW9uLmh0bWwjc2VyaWVzLWZ1bm5lbA==)，
> [ 仪表盘](https://blog.guohao.asia/wp-content/themes/wordpress-theme-puock-2.8.16/inc/go.php?to=aHR0cHM6Ly9lY2hhcnRzLmFwYWNoZS5vcmcvemgvb3B0aW9uLmh0bWwjc2VyaWVzLWdhdWdl)，
> 并且支持图与图之间的混搭。

![Echarts PHP MySQL 调用实例](https://blog.guohao.asia/wp-content/themes/wordpress-
theme-puock-2.8.16/assets/img/z/load.svg "Echarts PHP MySQL 调用实例")

## 连接数据库

创建`sql_config.php`

    ```language-default
    <?php
        $mysql_server_name='127.0.0.1'; //mysql 数据库服务器
        $mysql_username='cs'; //mysql 数据库用户名
        $mysql_password='123456'; //mysql 数据库密码, 初始默认密码为空
        $mysql_database='cs'; //mysql 数据库名
     ?>
    ```

因为是测试用的甲骨文云服务器，就不再做脱敏了，以下亦同。

## 读取并处理数据库数据

    ```language-default
    <?php
    // 这部分的功能是读表数据并且转为 json 格式，便于 js 处理。require("sql_config.php");
      $conn=mysqli_connect($mysql_server_name,$mysql_username,$mysql_password) or die("error connecting");
      mysqli_query($conn,"set names'utf8'"); // 数据库输出编码
      mysqli_select_db($conn,$mysql_database); // 打开数据库
      $result = mysqli_query($conn,"select * from wp_statistics_visit");// 打开你的表
      $data="";
      $array= array();
      class User{
        public $last_counter;
        public $visit;
      }
      while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)){$user=new User();
        $user->last_counter = $row['last_counter'];
        $user->visit = $row['visit'];
        $array[]=$user;
      }
      $data=json_encode($array);
      // echo "{".'"user"'.":".$data."}";
      echo $data;
    ?>
    ```

## 数据呈现

    ```language-default
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 访问统计 </title>
        <script type="text/javascript" src="https://www.guohao.asia/cdn/echarts-5.4.0/dist/echarts.js"></script>
        <script type="text/javascript" src="https://www.guohao.asia/cdn/jquery-3.6.1.min.js"></script>

    </head> <body> <div style="position: relative; overflow: hidden; width: 600px; height: 400px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"> <div id="bar" style="height:400px"></div>
        <script type="text/javascript">var  myChart = echarts.init(document.getElementById('bar'));
var arr1=[],arr2=[];
function arrTest(){
type:"post",
async:false,
url:"bar.php",
data:{},
dataType:"json",
success:function(result){if (result) {for (var i = 0; i < result.length; i++) {arr1.push(result[i].last_counter);
arr2.push(result[i].visit);
}
}
})
return arr1,arr2;
}
arrTest();
var  option = {
title : {
text: '访问数据',
subtext: '测试'},
tooltip: {show: true},
legend: {data:['last_counter','visit']
},
toolbox: {
show : true,
feature : {dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : arr1
}],
yAxis : [
{type : 'value'}
],
series : [
{
"name":"访问量",
"type":"bar",
"data":arr2,
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
]
};
if (option && typeof option === "object") {myChart.setOption(option, true);
}</script>
    </body> </html>
    ```

## 效果

![Echarts PHP MySQL 调用实例](https://blog.guohao.asia/wp-content/themes/wordpress-
theme-puock-2.8.16/assets/img/z/load.svg "Echarts PHP MySQL 调用实例")

![Echarts PHP MySQL 调用实例](https://blog.guohao.asia/wp-content/themes/wordpress-
theme-puock-2.8.16/assets/img/z/load.svg "Echarts PHP MySQL 调用实例")

![Echarts PHP MySQL 调用实例](https://blog.guohao.asia/wp-content/themes/wordpress-
theme-puock-2.8.16/assets/img/z/load.svg "Echarts PHP MySQL 调用实例")