您的位置：首页 > Web前端 > JavaScript

Echarts ajax动态加载json数据

2015-07-31 11:04 567 查看

后台php写的，给前台准备好json格式数据

public function actionGetOffline(){
$userid = Yii::$app->user->identity->user_id;
$connection = Yii::$app->db;
$command = $connection->createCommand("SELECT proc_phase_id from tb_pro where user_id like '%$userid%';");
$data = $command->queryAll();
// var_dump($data);
// die();
$count = array(0,0,0,0,0,0,0);
foreach ($data as $value) {
foreach ($value as $value1) {
switch ($value1){
case 0:
$count[0]=$count[0]+1;
break;
case 1:
$count[1]=$count[1]+1;
break;
case 3:
$count[2]=$count[2]+1;
break;
case 6:
$count[3]=$count[3]+1;
break;
case 10:
$count[4]=$count[4]+1;
break;
case 12:
$count[5]=$count[5]+1;
break;
case 16:
$count[6]=$count[6]+1;
break;
}
}
}
$res = array('countData'=>$count);
// var_dump($res);
// die();
return json_encode($res);
}
json数据格式如下：

前台Echarts直方图显示，数据通过ajax获得：

<head>
<meta charset="utf-8">
<title>Charts demo</title>
<script src="<?php echo Yii::getAlias('@web')?>/js/jquery.easing.min.js" type="text/javascript"></script>
<script src="<?php echo Yii::getAlias('@web')?>/js/echarts.js"></script>
</head>
<body>

<div id="main" style="height:400px;"></div>
<script type="text/javascript">

// 路径配置
require.config({
paths: {
echarts: '<?php echo Yii::getAlias('@web')?>/js/dist'
}
});

// 使用
require(
[
'echarts',
'echarts/chart/line',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
'echarts/chart/bar'
],
function (ec) {
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
legend: {
data:['不同进度状态的项目数']
},
xAxis : [
{
type : 'category',
data : ["项目新建","项目关闭","风控议款待商议","异议价格待商议","资料待提交","资料待商议","特批意见待商议"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",
"data": []
}
]
};

$.ajax({
url: "<?=ROOT_URL?>echarts/get-data",
dataType : 'json',
success: function(res){
// alert(res);
// $.each(res,function(i,val){
//     // alert(i);
//     // alert(val);
//     var counts= val;
//      alert(counts);
// });
if(res){
option.series[0].data = res.countData;
myChart.setOption(option);
}
}
});
}
);

</script>

</body>

最后给Echarts动态加载数据就成功了，简单的小例子：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： echarts ajax 动态数据

相关文章推荐

新的分享

章节导航