echarts统计，简单示例
先看下效果图
看下代码
html页面 为echarts准备一个dom，宽高自定义
|
1
2
3
4
5
|
<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>
下面是具体方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
<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> |
控制器中查询自己需要的数据 （这里查询的日期和对应的数量）
|
1
2
3
4
5
6
7
|
//折线统计 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
原文链接：http://www.cnblogs.com/csd97/p/8079055.html
