Echarts官网地址：http://echarts.baidu.com/index.html
注意：基础知识参考前一篇文章，这篇文章主要是代码为主，整个流程都是详细的。同时发现，准备写这篇文章的时候，“纯臻”大神也写了篇类似的，但依然有不同的地方可能对你有所帮助。
Echarts代码 test01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['数量']
},
xAxis: {
data: ["贵阳市","遵义市","凯里市","六盘水市","都匀市","毕节市"]
},
yAxis: {},
series: [{
name: '数量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>创建数据库hcpmanage，再创建表guizhou，包括序号、地名、数量三个字段。
如下所示：
-- ----------------------------
-- Table structure for `guizhou`
-- ----------------------------
DROP TABLE IF EXISTS `guizhou`;
CREATE TABLE `guizhou` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`place` varchar(20) COLLATE utf8_unicode_ci DEFAULT NULL,
`num` int(11) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
-- ----------------------------
-- Records of guizhou
-- ----------------------------
INSERT INTO `guizhou` VALUES ('1', '贵阳市', '5');
INSERT INTO `guizhou` VALUES ('2', '遵义市', '20');
INSERT INTO `guizhou` VALUES ('3', '凯里市', '36');
INSERT INTO `guizhou` VALUES ('4', '六盘水市', '10');
INSERT INTO `guizhou` VALUES ('5', '都匀市', '10');
INSERT INTO `guizhou` VALUES ('6', '毕节市', '20');PHP连接数据库的核心代码大家非常熟悉了，下面这段代码简单包括了Json取值。
sql.php文件：
<?php
//PHP连接数据库
header("content-type:text/json;charset=utf-8");
//链接数据库
$con = mysql_connect("localhost", "root", "123456");
if (!$con)
{
die('Could not connect database: ' . mysql_error());
}
//选择数据库
$db_selected = mysql_select_db("hcpmanage", $con);
if (!$db_selected)
{
die ("Can\'t use yxz : " . mysql_error());
}
//执行MySQL查询-设置UTF8格式
mysql_query("SET NAMES utf8");
//查询学生信息
$sql = "SELECT * FROM `guizhou` ";
$result = mysql_query($sql,$con);
//定义变量json存储值
$data="";
$array= array();
class GuiZhou{
public $id;
public $place;
public $num;
}
while ($row = mysql_fetch_row($result))
{
list($id,$place,$num) = $row;
/*
echo $id.' ';
echo $place.' ';
echo $num;
echo '<br >';
*/
$gz = new GuiZhou();
$gz->id = $id;
$gz->place = $place;
$gz->num = $num;
//数组赋值
$array[] = $gz;
}
$data = json_encode($array);
echo $data;
//{"id":"1","place":"\u8d35\u9633\u5e02","num":"5"}
?>注意访问地址为：http://localhost:8080/20170224YXZ/sql.php，文件放到Apache的htdocs目录下。所有文件如下图所示：
test02.html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
<script src="jquery-1.9.1.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 初始化两个数组，盛装从数据库中获取到的数据
var places=[], nums=[];
function TestAjax(){
$.ajax({
type: "post",
async: false, //异步执行
url: "sql.php", //SQL数据库文件
data: {}, //发送给数据库的数据
dataType: "json", //json类型
success: function(result) {
if (result) {
for (var i = 0; i < result.length; i++) {
places.push(result[i].place);
nums.push(result[i].num);
console.log(result[i].place);
console.log(result[i].num);
}
}
}
})
return places, nums;
}
//执行异步请求
TestAjax();
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts+Ajax+MySQL+PHP'
},
tooltip: {
show : true
},
legend: {
data:['数量']
},
xAxis: [{
//data: ["贵阳市","遵义市","凯里市","六盘水市","都匀市","毕节市"]
type : 'category',
data : places
}],
yAxis: {
type : 'value'
},
series: [{
name : "数量",
type : "bar",
data : nums
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
<marquee>Eastmount 璋 love 娜!!!</marquee>
</body>
</html>其中Ajax核心代码为：
var places=[], nums=[];
function TestAjax(){
$.ajax({
type: "post",
async: false, //异步执行
url: "sql.php", //SQL数据库文件
data: {}, //发送给数据库的数据
dataType: "json", //json类型
success: function(result) {
if (result) {
for (var i = 0; i < result.length; i++) {
places.push(result[i].place);
nums.push(result[i].num);
console.log(result[i].place);
console.log(result[i].num);
}
}
}
})
return places, nums;
}
//执行异步请求
TestAjax(); 数据动态变化，数据库变了，可视化图也变化：
初学的同学可能会遇到一下几个问题：
1.其中Echarts和JQuery需要导入的，即：
<script src="echarts.min.js"></script>
<script src="jquery-1.9.1.min.js"></script>
2.Echarts使用的方法请大家学习前一篇文章和官网文章，这里不再叙述。
3.PHP文件需要header("content-type:text/json;charset=utf-8");声明Json格式，同时Ajax也需要设置dataType: "json"。
4.声明的Ajax函数需要执行，对应代码中的TestAjax()，否则只是定义未执行。
5.如果Ajax报错 [object Object]，如下图所示：
这需要Json格式一致，而我的错误是因为在PHP文件中增加了个注释导致无值，百度都无法解决，头都弄大了，所以写代码需要仔细。
6.最后动态数据是通过变量实现的，即ages替换以前的 [5, 20, 36, 10, 10, 20]。
series : [ {
name : "num",
type : "bar",
data : ages
}]
