PHP 使用Echarts生成数据统计报表的实现代码

echarts统计，简单示例先看下效果图看下代码HTML页面为ECharts准备一个Dom，宽高自定义<divcl

echarts统计，简单示例

先看下效果图

看下代码

HTML页面 为ECharts准备一个Dom，宽高自定义

<div class="panel panel-info">
　　<div class="panel-body">
　　　　<div id="echart_show" style="height:500px"></div>
　　</div>
</div>

js文件可以参考官网，或者在这里下载，引入

<script type="text/javascript" src="__ROOT__/Public/admin/lib/jquery/nowdatachars/echarts-all.js"></script>

下面是具体方法

<script type="text/javascript">

 var date = [],num = [];
 $(document).ready(function () {
 // 绘制反馈量图形
 var init_echarts = function () {
 var refreshChart = function (show_data) {
 my_demo_chart = echarts.init(document.getElementById('echart_show'));

 my_demo_chart.showLoading({
 text: '加载中...',
 effect: 'whirling'
 });

 var echarts_all_option = {
 title: {
 text: '',
 subtext: '用户走势'
 },
 tooltip: {
 trigger: 'axis'
 },
 legend: {
 data: ['用户数', '用户消耗']
 },
 toolbox: {
 show: true,
 feature: {
 mark: {show: true},
 dataView: {show: true, readOnly: false},
 magicType: {show: true, type: ['line', 'bar']},
 restore: {show: true},
 saveAsImage: {show: true}
// myTool2: {
// show: true,
// title: '自定义扩展方法',
// icon: 'image://http://echarts.baidu.com/images/favicon.png',
// onclick: function (){
// alert('自定义')
// }
// }
 }
 },
 dataZoom: {
 show: false,
 start: 0,
 end: 100
 },
 xAxis: [
 {
 type: 'category',
 boundaryGap: true,
 data: show_data[1]
 },
 {
 type: 'category',
 boundaryGap: true,
 data: show_data[1]
 }
 ],
 yAxis: [
 {
 type: 'value',
 scale: true,
 name: '用户数',
 boundaryGap: [0, 0.5]
// boundaryGap: [0.2, 0.2]
 },
 {
 type: 'value',
 scale: true,
 name: '用户数',
 boundaryGap: [0, 0.5]
 }
 ],
 series: [
 {
 name: '用户消耗',
 type: 'bar',
 xAxisIndex: 1,
 data: show_data[0]
 },
 {
 name: '用户数',
 type: 'line',
 xAxisIndex: 1,
 data:show_data[0]
 }
 ]
 };
 my_demo_chart.hideLoading();
 my_demo_chart.setOption(echarts_all_option);
 };

 // 获取原始数据
 $.ajax({
 url:"__CONTROLLER__/getRes",
 async:false,
 dataType:'json',
 type:'post',

 success:function(msg){
 var result = msg.result;
 if(msg.code == 200){
 for(var i = 0 ; i < result.length; i++){
 date.push(result[i].date);
 num.push(result[i].count);
 msg[0] = num;
 msg[1] = date;
 refreshChart(msg);
 }
 }
 }
 });
 };

 // 默认加载
 var default_load = (function () {
 init_echarts();
 })();
 });


</script>

控制器中查询自己需要的数据 （这里查询的日期和对应的数量）

//折线统计
 public function getRes(){
 $user = M('account');
 $sql = "SELECT date(createTime) AS date,count(*) as count FROM t_account GROUP BY date ";
 $result = $user->query($sql);
 $this->ajaxReturn(array('code'=>200,'result'=>$result));
 }

至此，一个简单的echarts的统计图就出来了

对echarts中一些参数不太理解的，大家可以参考官网 Echarts Documentation