echart和php实现动态获取数据
程序员文章站
2022-04-23 16:45:54
...
本文主要和大家分享echart和php动态获取数据的实现方法，要是以下代码执行不起来，请参考注释部分，希望能帮助到大家。
html部分的代码
<html>
<head>
<title>bingtu.html</title>
<meta charset="utf-8" />
<script src="https://cdn.bootcss.com/echarts/4.0.2/echarts-en.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
</head>
</head>
<body>
<p id="main" style="border:1px solid red;height:400px;"></p>
</body></html>
js部分的代码
<script> var chart = echarts.init(document.getElementById('main'));
chart.setOption({
title:{
text : '异步加载',
},
tooltip: {},
legend:{
data:['销量'],
},
xAxis:{
data:[],
},
yAxis:{},
series:[{
name:'销量',
type:'bar',
data:[]
}]
}); var categories = [] , data = []; /*注意一下 {:url()} 这一块填写你要请求的地址 你可以是http://.....com 也可以是你项目中某块文件 Index/index*/
$.post("{:url('ticket/getSellRecord',['type'=>'week'])}").done(function (info) {
// 填入数据
/*特别注意这里 如果info是json对象就不用JSON.parse了 如果是json字符串就要转成对象*/
console.log(info);
info = JSON.parse(info); for(var i = 0 ; i < info.length ; i++)
{
categories.push(info[i]['seller_id']);
data.push(info[i]['amount']);
}
chart.setOption({
xAxis: {
data: categories
},
series: [{ // 根据名字对应到相应的系列
name: '销量',
data: data
}]
});
});</script>
php部分代码
<?php
/*你可以设个定值去测试 ， 动态的就是你从数据库去获取 这部分主要的是格式*/
/*返回的数据格式为json 在js中打印一下传过去的数据是json字符串还是json对象 如果是json字符串一定要转成json对象 可用JSON.parse */
$data = [["seller_id"=>2,"amount"=>"2000"],["seller_id"=>8,"amount"=>"501"]]; return json_encode($data);?>
相关推荐：
以上就是echart和php实现动态获取数据的详细内容，更多请关注其它相关文章！