下面代码中是ECharts用AJAX从数据库中调数据，但前端页面无法显示数据，求问代码中哪里有误？
map1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div id="myChart" style="height:500px;"></div>
<script src="./js/jquery-1.8.3.min.js"></script>
<script>
$.ajax({
type: "post",
async: false, //同步执行
url: "mapdata.php",
dataType: "json", //返回数据形式为json
success: function (result) {
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //渲染数据
series: [{
// 根据名字对应到相应的系列
name: '2015年GDP',
data: result
}]
});
},
error: function () {
alert("请求数据失败!");
}
});
</script>
<script src="./js/echarts.js"></script>
<script>
require.config({
paths: {
echarts: './js'
}
});
require(
[
'echarts',
'echarts/chart/map' // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
],
function (ec) {
var myChart = ec.init(document.getElementById('myChart'));
var option = {
title: {
text: '2015年GDP统计数据',
subtext: '数据来源网络（单位：亿元）',
left: 'center' //标题居中
},
tooltip: { //提示工具，
trigger: 'item',
formatter: "{a} <br/>{b} : {c}亿元"
},
visualMap: { //视觉映射组件，可以根据范围调节数据变化
min: 0, //最小值
max: 10, //最大值
left: 'left', //位置
top: 'bottom',
orient: 'horizontal', //水平
text: ['高', '低'], // 文本，默认为数值文本
calculable: true //是否启用值域漫游，即是否有拖拽用的手柄，以及用手柄调整选中范围。
},
toolbox: { //工具栏
show: true,
orient: 'vertical', //垂直
left: 'right',
top: 'center',
feature: {
mark: {
show: true
},
saveAsImage: {
show: true
} //保存为图片
}
},
series: [{
name: '2015年GDP',
type: 'map',
mapType: 'china', //使用中国地图
roam: false, //是否开启鼠标缩放和平移
itemStyle: {
normal: {
label: {
show: true
}
},
emphasis: {
label: {
show: true
}
}
},
data: []
}]
};
//myChart.showLoading(); //预加载动画
myChart.setOption(option); //渲染地图
}
);
</script>
</body>
</html>
mapdata.php
<?php
include_once('connect.php'); //连接数据库
//查询数据
$sql = "select * from echarts_map";
$query = mysql_query($sql);
while ($row = mysql_fetch_array($query)) {
$arr[] = array(
'name' => $row['province'],
'value' => $row['gdp']
);
}
mysql_close($q);
echo json_encode($arr); //输出json格式数据
?>
connect.php
<?php
$q = mysql_connect("localhost","root","dglgxx");
if(!$q)
{
die('Could not connect: ' . mysql_error());
}
mysql_query("set names utf8"); //以utf8读取数据
mysql_select_db("test02",$q); //数据库
?>
数据库的表
