官方示例(静态死数据)
https://echarts.baidu.com/examples/editor.html?c=pie-custom
本人制作(动态)
数据库
数据库连接部分
<?php
header("pdotent-type:text/json;charset=utf-8");
try
{
$pdo = new PDO("mysql:host=localhost;port=8806;dbname=phphomework;charset=utf8",'root','');
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
}
catch (PDOException $e)
{
print("Error:".$e->getMessage());
die();
}
//查询学生信息
$sql = "SELECT * FROM count ";
$result = $pdo->query($sql);
//定义变量json存储值
$data="";
$array= array();
class Count1{
public $id;
public $year;
public $num;
}
while ($row = $result->fetch(PDO::FETCH_ASSOC ))
{
$gz = new Count1();
$gz->id = $row['id'];
$gz->year = $row['year'];
$gz->num = $row['num'];
//数组赋值
$array[] = $gz;
}
$data = json_encode($array);
echo $data;
?>
展示页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
<script src="jquery.js"></script>
</head>
<body bgcolor="#2c343c">
<center><div id="main" style="width: 800px;height:1000px;"></div></center>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var ses=[];
function TestAjax(){
$.ajax({
type: "post",
async: false,
url: "sql2.php",
data: {},
dataType: "json",
success: function(result) {
if (result) {
for (var i = 0; i < result.length; i++) {
ses.push({
name: result[i].year,
value: result[i].num
});
console.log(result[i].year);
console.log(result[i].num);
}
//results.push(result);
//console.log(results);
}
}
})
return ses;
}
TestAjax();
option = {
backgroundColor: '#2c343c',
title: {
text: '历年年度新闻数量饼图',
left: 'center',
top: 50,
textStyle: {
color: '#ded'
}
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series : [
{
name:'年度新闻数量',
type:'pie',
radius : '90%',
center: ['50%', '60%'],
data:
//{value:nums, name:places},
ses.sort(function (a, b) { return a.value - b.value; }),
roseType: 'radius',
label: {
normal: {
textStyle: {
color: 'rgba(0, 245, 255, 0.7)',
}
}
},
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
smooth: 0.2,
length: 10,
length2: 20
}
},
itemStyle: {
normal: {
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200;
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>在这里插入代码片