ECharts, PHP, MySQL, Ajax, JQuery 实现前后端数据可视化_将后端服务器返回的avl树数据可视化地显示在前端页面-CSDN博客

本文链接：https://blog.csdn.net/op07p6Aaqo9u71/article/details/78295772

本文介绍了如何结合ECharts、PHP、MySQL、Ajax和JQuery实现前后端数据可视化。通过下载ECharts库，设置Option配置，利用PHP查询数据库，JQuery通过Ajax获取并传递数据，最后在ECharts上展示图表。文中提供了关键代码示例和流程总结。

摘要由CSDN通过智能技术生成

大数据

作者：菩提树下的煮茶小童子

最近要将后台数据库上的一些数据以可视化的方法显示到前端，找来找去，发现百度开发的这套图表工具库还不错，网上搜索了一下相关的教程，也算是实现了较为简单的demo。于是写下来，记录一下。

ECharts

ECharts是国人开发的一套前端的图表工具库，使用起来超方便，也很简单（当然了，前提是理解了其工作原理之后）。

下面简单的介绍一下，如何在项目中使用ECharts。

下载js代码

下载地址： http://echarts.baidu.com/

个人觉得，开发人员下载完整版会比较好一点。而且官方建议的也是下载完整版。

大数据

下载Echarts

博主这里下载的是完整版，大约不到2M。

工作原理浅析

其实仔细的想想，ECharts的工作就是在网页上显示了一张特殊的图片嘛。所以我们需要意识到，需要给“图片”一个一个空间，这样才会有图表的安家之所嘛。

然后空间有了，也就是有地皮了。要盖一个房子的话，必须得有框架不是。这样的往上面添加些砖瓦水泥什么的才能将房子盖起来。同样的，ECharts也是这么个原理。但是这个“骨架”叫Option。至于这个option需要怎么设置，官网上有详细的介绍，博主就不再这里重复的造轮子了。大家有兴趣的可以到下图展示的地方去学习。

大数据
ECharts3下载

在项目中引入ECharts

如题，本小节就是大致的讲一下如何简单的使用这个图标库。
不妨看一下下面的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>入门</title>
<script src="../static/js/echarts.js"></script>
<script src="../static/js/sleeplib.js"></script>
</head>
<body>

    <h1>开始测试</h1>
    <hr>
    <!-- 先准备一个用于盛放图表的容器 -->
   
        //通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图

        //基于准备好的DOM，实例化echarts实例