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

本文介绍了如何结合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 : [ '衬衫', '羊毛衫', '雪纺衫', '裤子', 
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值