借用Ajax实现Echarts与MySQL的交互(1)

来源：互联网发布：鹰眼监控软件安卓版编辑：程序博客网时间：2024/06/06 12:27

第一次写博客，记录一下前一段的学习，以便之后复习。

一、开发环境搭建

本文所用数据库：MySQL；服务器端：PHP；服务器：Apache。鉴于配置文件的修改太过繁琐，在此借用wampserver集成开发环境，下载地址：点击打开链接选择相应版本即可。之后就是默认安装，直接下一步即可。

在这一步的操作中需注意两点：

(1)、Apache服务器默认80端口，须确保不会冲突。若有冲突可以在D:\wamp\bin\apache\apache2.4.9\conf下的httpd.conf文件中修改端口；(2)、若在安装wampserver之前已经安装了MySQL，同样可以修改配置文件让wamp默认使用本地安装的MySQL而不是集成环境中的，文件地址：D:\wamp\apps\phpmyadmin4.1.14下的config.inc.php。

二、HTML代码

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>ECharts练习</title>    <script src="mapjs/js/echarts.min.js"></script>    <script src="mapjs/js/jquery-3.2.1.min.js"></script>    <script src="mapjs/js/shine.js"></script></head><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="date" style="width:60%;height:400px;margin: auto"></div><script src="mapjs/date.js"></script></body></html>

三、JS代码

// 初始化两个数组，盛装从数据库中获取到的数据var dates = new Array(), moneys = new Array();//调用ajax来实现异步的加载数据function getusers() {    $.ajax({        type: "post",        async: false,        url: "data/date.php",        data: {},        dataType: "json",        success: function(data){           if(data){                for(var i = 0 ; i < data.length; i++){                    dates.push(data[i].date);                    moneys.push(data[i].money);                }             }        },        error: function(errmsg) {            alert("Ajax获取服务器数据出错了！"+ errmsg);        }    });return dates, moneys;}//执行异步请求getusers();// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('date'),'shine');// 指定图表的配置项和数据var option = {    title: {left: 'center',text: "ECharts"},tooltip: {trigger: 'axis',backgroundColor:'green'},toolbox: {show : true,feature : {dataView : {show: true, readOnly: false},magicType : {show: true, type: ['line', 'bar']},restore : {show: true},saveAsImage : {show: true}}},    xAxis: {type: 'category',name:'日期',boundaryGap: false,axisTick: {alignWithLabel: true},data:dates    },    yAxis: {type:"value",name:'销售额(单位：元)',boundaryGap: false,splitLine: {            show: true        }},dataZoom: [{type: 'inside',xAxisIndex: [0],start: 32,end: 56},{type: 'slider',xAxisIndex: [0],start: 32,end: 56}],    series: [{name:'销售额',        type:'line',smooth:true,        symbol: 'none',        sampling: 'average',data:moneys}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);

四、PHP代码

<?php$conn = mysqli_connect("localhost", "root", "hunter","echarts");mysqli_query($conn,"set names utf8");if (!$conn){   die("Could not connect:".mysqli_connect_error());}$resultset = mysqli_query($conn,"select 日期 as date,sum(销售额) as money from test group by 日期");$data = array();class user{   public $date;   public $money;}while($row = mysqli_fetch_array($resultset, MYSQL_ASSOC)) {    $user = new User();    $user->date = $row['date'];    $user->money = $row['money'];    $data[] = $user;}mysqli_close($conn);// 返回JSON类型的数据echo json_encode($data);?>

五、运行效果

总结：在这个实例中，只是使用ajax从后台调数据给到前端；并未涉及到传递前端的参数到服务器实现对数据的筛选和局部刷新以生成新的图表，如有疑问，欢迎讨论！！

阅读全文

1 0