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

2017-10-15 20:30:05来源:CSDN作者:hunter_0125人点击

分享

续上一篇借用Ajax实现Echarts和MySQL的交互(1)最后提出的问题:传递参数到后端实现对数据的筛选并局部刷新以生成新的图表。将在下文给出实现过程及代码。

一、HTML代码

<!DOCTYPE html><html><head>	<meta charset="utf-8">	<title>测试</title>	<script src="mapjs/js/jquery-3.2.1.min.js"></script>	<script src="mapjs/js/echarts.min.js"></script>	<script src="mapjs/js/shine.js"></script>	<script>        function line(){            var names = new Array(),nums = new Array();            function get(){                $.ajax({                    type:"post",                    async: false,                    url: "data/line.php",                    data: {month:$('#select option:selected').val()},                    dataType: "json",                    success:function(data){                        if (data) {                            for(var i = 0 ; i < data.length; i++){                                names.push(data[i].name);                                nums.push(data[i].num);                            };                        }                    }                });                return names,nums;            }            get();            var myChart = echarts.init(document.getElementById('test1'),'shine');            var option = {                title: {                    text: $('#select option:selected').val()+"月份销售数据"                },                tooltip: {                    trigger: 'axis',                    backgroundColor:'black'                },                toolbox: {                    show : true,                    feature : {                        dataView : {show: true, readOnly: false},                        magicType : {show: true, type: ['line', 'bar']},                        restore : {show: true},                        saveAsImage : {show: true}                    }                },                xAxis: {                    type: 'category',                    axisTick: {                        alignWithLabel: true                    },                    data: names                },                yAxis: {                    type:"value"                },                series: [{                    name: '销量',                    type: 'bar',                    data: nums                }],            };            myChart.setOption(option);        }	</script></head><body>	<script>		$(document).ready(function () {			line();        })	</script>	<div id="test" style="width:50%;height:500px;margin: auto;border-width: 1px;border-color: gray;border-style: solid;">		<div id="test1" style="height: 400px;margin: 20px"></div>		<div id="test2" style="height: 50px;margin: 20px;text-align: center">			月份:			<select id="select">				<option value="1">1</option>				<option value="2">2</option>				<option value="3" selected="selected">3</option>				<option value="4">4</option>				<option value="5">5</option>				<option value="6">6</option>			</select>			<button id="button" onclick="line()">查询</button>		</div>	</div></body></html>
$.ajax()方法中的data参数负责向PHP传递参数,文中用post方法向data/line.php文件传递month参数,值从select标签中获得。

二、PHP代码

<?php$month = $_POST["month"];$conn = mysqli_connect("localhost", "root", "hunter","echarts");mysqli_query($conn,"set names utf8");$sql = "select 款式,count(*) from test where 月份=$month group by 款式";if (!$conn){   die("Could not connect:".mysqli_connect_error());}$resultset = mysqli_query($conn,$sql);$data = array();class user{   public $name;   public $num;}while($row = mysqli_fetch_array($resultset, MYSQL_ASSOC)) {    $user = new User();    $user->name = $row['款式'];	$user->num = $row['count(*)'];    $data[] = $user;}mysqli_close($conn);// 返回JSON类型的数据echo json_encode($data);?>
第一行代码接收ajax传递过来的month参数,并将其镶嵌到sql语句中以实现筛选功能。

三、效果展示



点击月份之后的下拉菜单,选中某个月份,再点击“查询”。文中的柱状图就会变成对应月份的数据。

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台