首先了解官方入门示例,才能更好修改为项目需要的图表。
获取每周时间:
function getTime($time =array())
{
$stimestamp = strtotime($time['start_time']);
$etimestime = strtotime($time['end_time']);
//计算日期段内有多少天
$days = ($etimestime - $stimestamp) / 86400 + 1;
//保存每天日期
$date = array();
/* for循环本周一到周日 */
for ($i = 0; $i < $days; $i++) {
$date[] = date("Y-m-d", $stimestamp + (86400 * $i));
}
return $date;
}
json输出
public function listAction(){
$time['end_time'] = date('Y-m-d',time());//获取当前周一
$time['start_time'] =date("Y-m-d", strtotime("-6 day"));//获取当前周日
$time_all = $this->getTime($time);
$date_json = json_encode($time_all);//json格式输出
/* 遍历七天每天的人数 */
foreach ($time_all as $key => $value) {
/* 时间条件 */
$map = array();
$map["time"] = array(strtotime($value . " 00:00:00"), strtotime($value . " 23:59:59"));
$stime = $map["time"][0];//当天开始时间
$etime = $map["time"][1];//结束时间
$UserdataModel = new UserdataModel;
$totalCount = $UserdataModel->getTimeCount($stime,$etime);
$number[] = $totalCount;
}
$number = json_encode($number);json格式输出
$this->getView()->assign('number', $number);
$this->getView()->assign('date_json', $date_json);
$this->display('list');
}
model获取人数
public function getTimeCount($stime,$etime){
$sql = 'SELECT count(*) FROM user WHERE create_time >:stime and create_time <:etime';
$pdo = PDO::getInstance();
$statement = $pdo->prepare($sql);
$statement->bindParam(':stime', $stime);
$statement->bindParam(':etime', $etime);
$statement->execute();
$num = $statement->fetchColumn(0);
return $num;
}
view:
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 100%;height:400px;"></div>
<script>
$(function () {
var myChart = echarts.init(document.getElementById("main"));
var option = {
tooltip : {
trigger: 'axis'
},
legend: {
data:['当日注册']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data :
<?=$date_json?>,
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'当日注册',
type:'line',
stack: '人数',
smooth: true,
data:<?=$arr?>
},
]
};
myChart.setOption(option);
});
</script>
效果图
鼠标悬停在上面时提示信息显示乱码
引入文件改为 cdn引入试试,如果现实编码正常则是文件保存到本地时编码出现错误
https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js
更换echarts引入文件就好