ECharts饼图试玩
处理类似提交问卷的数据,要生成图表,用了ECharts,好方便的。
简陋效果:

1.表单存储
有单选和多选题,单选直接存储各选项数字值,1,2,3,4...中一个;多选用|分隔存储选项值,如1|3,2|3|4
数据库存储后如下:

2.ECharts饼图
ECharts官网,以及新手上路都很清楚,饼图很简单:配置和数据如下示例
option = {
title: {
text: '名称',
},
series : [
{
type: 'pie',
radius: '56%',
data:[
{value:235, name:'视频广告'},
{value:274, name:'联盟广告'},
{value:310, name:'邮件营销'},
{value:335, name:'直接访问'},
{value:400, name:'搜索引擎'}
]
}
]
};
radius是饼图的半径,基于有高宽的DOM容器。
3.使用数据
SQL查出数据,把需要的数据输出到series的data即可:
<?php
$data=array( //data数组是需要输出的列分析饼图
'性别','年龄','年级','学科',.....
);
foreach($data as $k=>$v){
$x=$k+1;
echo '<div id="main'.$x.'" style="width:400px;height:300px" class="main"></div>';
echo "
<script type='text/javascript'>
var myChart$x = echarts.init(document.getElementById('main".($x)."'));
var option = {
title: {
text: '".$v."',
show:false
},
series : [
{
type: 'pie',
radius: '55%',
data:[";
echo redata($k);
echo "
], itemStyle:{
normal:{
label:{
show: true,
formatter: '{b}{c}({d}%)'
},
labelLine :{show:true}
}
}
}]
};
myChart$x.setOption(option);
</script>";
}
?>
循环出需要展示的列,执行自定义函数redata($id)每次返回需要的值,新东西normal:formatter主要是为了输出百分比(所以才说特别方便,全交给库处理了
拜托你了),手册里有介绍。
到这里,已经解决了饼图测试数据怎么放,然而数据如何获取并返回?只需要得到如下格式数据即可:
{value:23, name:'吃饭'},
{value:24, name:'起床'}
4.数据库获取数据
$sql="select $names as skey,count($names) as snum from `tablename` group by $names";
$names是需要获取的列名,比如需要age列数据

把这4条数据循环并成字符串: {value:235, name:'视频广告'} 这种就好。name如何来,就得规定好age选1时输出啥,age选2时输出啥,...:(示例的外层case 2是年龄对应的代码段)
case 2:
{
switch($row['skey']){
case 1:
$rowname='大一';
break;
case 2:
$rowname='大二';
break;
case 3:
$rowname='大三';
break;
case 4:
$rowname='大四';
break;
case 5:
$rowname='其他';
break;
}
}
break;
...其他有意义的代码
$rowname.='\n';//并入换行
$redata.="{value:".$row['snum'].", name:'".$rowname."'},";
$redata就是要返回的series:data段,最后别忘记去掉$redata多余的(,)英文逗号。
上面的只是单选数据,对于多选数据用同样的sql语句会出如下结果,以tvgoal字段为例:

WTF?直接把数据内容去分组算总和了,无效的数据
,修正后:

一次查一条记录中某值(图中为2,字段为tvgoal)的总数。代码段:
case 5:
{
$namearr=array('韩剧','美剧','日剧','台剧','港剧','泰剧','内地','无所谓');
for($i=1;$i<=count($namearr);$i++){
$sql="select count(*) as snum from `tablename` where $i in (select replace(`各字段`,'|',',')) ";
$data=$ph->query($sql);
if($row=$ph->fetcharray($data)){
$rowname=$namearr[$i-1];
$rowname.='\n';
$redata.="{value:".$row['snum'].", name:'".$rowname."'},";
}
}
}
break;
其中,case 5是tvgoal的代码,而且,$namearr数组各值选项value为1,2,3,4,5...对应,才可依赖上述代码。别吐槽原生的查询=。=。顺便一说,这些数据也是虚拟出来的。
暂完。
ECharts饼图试玩的更多相关文章
- HTML5+JS 《五子飞》游戏实现(七)游戏试玩
前面第一至第六章我们已经把<五子飞>游戏的基本工作都已经讲得差不多了,这一章主要是把所有的代码分享给大家,然后小伙伴们也可以玩一玩. 至于人机对战的我们放到后面讲进行分析. 试玩地址:ht ...
- 一个小玩意 PHP实现微信红包金额拆分试玩
<meta charset="utf-8"> <?php // 新年红包金额拆分试玩 class CBonus { public $bonus;//红包 publ ...
- 1.2G内存试玩RAMOS_XP
1.2G内存试玩RAMOS_XP1.为了防止做系统时出现意外,用Bootice把C盘MBR修改为Grub4dos,这样子系统如果失败,可以进入PE重做. 2.进入PE格式化C盘,格式化的时候勾选启用N ...
- 8个经典的HTML5游戏在线试玩及源码学习
原文地址:http://www.oschina.net/news/32364/html5-games 游戏,毫无疑问是拿来供大家娱乐玩耍的,这也无可厚非,但是,今天给大家分享的8个HTML5游戏,在好 ...
- 将数据动态加载到Echarts饼图中
需求描述 Echarts中的官方示例是将数据的设定写好在页面的配置项中的,但在实际的开发展示中,我们需要按照需求通过调用后台的接口获取数据,再将数据加载到特定的Echarts饼图中. 实现效果 实现步 ...
- Apollo框架试玩
2017年7月5日,百度举行了AI开发者大会,在会上发布了Apollo项目,并进行了演示,该项目在Github上已经能够被访问.出于一个程序员的好奇,昨天试玩了一把,确实不错. http://apol ...
- 发布到FaceBook试玩广告,FaceBook要求要一个Html文件
Facebook 试玩广告具体要求: 试玩广告参数是创建试玩广告素材时要满足的要求. 试玩素材应为 HTML5 格式. 试玩广告素材不应使用 mraid.js 格式. 包含所有素材的试玩广告的单个 H ...
- [试玩] FMXLinux (Firemonkey for Linux) Linux 桌面开发(第三方插件)
FMXLinux 是一个可以用来开发 Linux 桌面软件的第三方插件,它需要配合 Delphi 10.2 Toyko 官网:http://www.fmxlinux.com/ 使用方法:开启 FMX ...
- ESP32 LyraT音频开发板试玩(二):播放音乐
我是卓波,很高兴你来看我的博客. 系列文章: ESP32 LyraT音频开发板试玩(一):搭建开发环境 ESP32 LyraT音频开发板试玩(二):播放音乐 本文延续上一篇博客 将D:\msys32\ ...
随机推荐
- JTabbedPane 和 JScrollBar 联合使用
需求:实现一个JTabbed, 当下拉到Tabbed的底部时,自动加载下一次的数据. 下面是具体代码: import java.awt.*; import javax.swing.table.Defa ...
- FreeRTOS学习及移植笔记之一:开始FreeRTOS之旅
1.必要的准备工作 工欲善其事,必先利其器,在开始学习和移植之前,相应的准备工作必不可少.所以在开始我们写要准备如下: 测试环境:我准备在STM32F103平台上移植和测试FreeRTOS系统 准备F ...
- R平方
参考其他网页 通常R2越大越好,但看到亦在后面标上P值,这两者之间有何联系? R2和p值没有必然联系.就像你做线性分析和(单因素或多因素)方差分析一样,若A和K线性相关,也有可能A对K么有显著性影响一 ...
- eclipse远程连接hive
创建项目,添加jar包,hive的s上,所以也需要hadoop的一些jar 这个图片是从网上找的,我直接使用的以前hadoop的项目 创建测试类,写测试代码 //获取jdbc链接 private ...
- C/C++中无条件花括号的妙用
C/C++中无条件花括号可以形成一个代码块,一个作用域.可以使括号内定义的变量就只在本域(就是这个大括号)内有效,而且不会影响其他域,即使名字相同. 在花括号内,如果变量前面带类型,则相当于新创建一个 ...
- 【Jsoup网页解析】
下载链接:http://jsoup.org/download 一.普通的请求方式(不带有cookie) 使用举例: 第一步: Connection conn=Jsoup.connect(url); 第 ...
- 使用Lua脚本语言开发出高扩展性的系统,AgileEAS.NET SOA中间件Lua脚本引擎介绍
一.前言 AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速开发应用平台.用于帮助中小型软件企业建立一条适合市 ...
- 11g新特性-dba_users安全性的一些增强
1.dba_user表的password(除了GLOBAL和EXTERNAL的密码)不再保存密码. 查询10g的dba_user表 SQL> select username,password f ...
- Xcode UUID查询
打开终端,输入: defaults read /Applications/Xcode.app/Contents/Info DVTPlugInCompatibilityUUID
- LightOJ1171 Knights in Chessboard (II)(二分图最大点独立集)
题目 Source http://www.lightoj.com/volume_showproblem.php?problem=1171 Description Given an m x n ches ...