ECharts PHP MySQL Ajax JQuery 实现前后端数据可视化

最新推荐文章于 2024-09-05 08:34:21 发布

找到点头绪了

最新推荐文章于 2024-09-05 08:34:21 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/gfdfhjj/article/details/83833351

版权

本文介绍了如何结合ECharts、PHP和Ajax，从MySQL数据库获取数据并在前端实现数据可视化。首先讲解了ECharts的基本使用，包括下载、工作原理及在项目中的引入。接着，详细阐述了后台处理过程，包括PHP查询数据库、返回JSON数据，以及JQuery通过Ajax获取和处理数据。最后，展示了前端ECharts配置和完整代码，以及不同数据下图表的演示结果。

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

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

最近要将后台数据库上的一些数据以可视化的方法显示到前端，找来找去，发现百度开发的这套图表工具库还不错，网上搜索了一下相关的教程，也算是实现了较为简单的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>    <!-- 先准备一个用于盛放图表的容器 -->    <div id='container' style="width: 600px; height: 400px;"></div>    <script>        //通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图        //基于准备好的DOM，实例化echarts实例        var myChart = echarts.init(document.getElementById("container"));        // 指定图表的配置项和数据        var option1 = {            title : {                text : 'ECharts 入门案例'            },            tooltip : {                text : '鼠标放上去之后的悬浮提示语句！'            },            legend : {                data : [ '销量' ]            },            xAxis : {                data : [ '衬衫', '羊毛衫', '雪纺衫', '裤子',