Echarts ajax动态加载json数据
发布时间:2020-12-16 01:54:55 所属栏目:百科 来源:网络整理
导读:后台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 '%$u
后台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); 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动态加载数据就成功了,简单的小例子: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐
- 利用TinyXML读取VOC2012数据集的XML标注文件裁剪
- BitmapData.draw比BitmapData.copyPixel能做得更
- Vuejs第十二篇之动态组件全面解析
- jsoncpp的使用
- Cocos2dx 学习笔记26 CCNotificationCenter的使用
- ruby-on-rails – 如何访问rails action mailer中
- app.json 配置plugins 字段后,无法修改wx对象
- Stonebraker教授的文章:Thoughts on the VLDB c
- 我应该在C中使用相同的名称作为成员变量和函数参
- 如何使用PowerShell / XPath更改XML并保存文档?
热点阅读