展示统计，简单示例

先看下效果图

看下代码

超文本标记语言页面为展示准备一个多姆，宽高自定义

div class=' panel panel-info ' div class=' panel-body ' div id=' echart _ show ' style=' height :500 px '/div/div/div js文件可以参考官网，或者在这里下载，引入

脚本类型=' text/JavaScript ' src=' http : _ _ ROOT _ _/Public/admin/lib/jquery/now data chars/echart-all。js /脚本

下面是具体方法

脚本类型='text/javascript' var date=[]，num=[]；$(文档)。就绪（函数(){ //绘制反馈量图形var init _ echart=function(){ var refresh chart=function(show _ data){ my _ demo _ chart=echart。init(文档。getelementbyid(' echart _ show '))；我的演示图表。显示加载({ text : '加载中.'，效果： '涡动' });var echart _ all _ option={ title : { text : }，subxt : '用户走势}，工具提示： { trigger : ' axis ' }，legend: { data: ['用户数', '用户消耗] }、toolbox: { show: true、feature : { mark : { show : true }、dataView: {show: true、readOnly: false}、magicType: {show: true、type 33:[' line '，' bar']}、restore: {show: true}、saveAsImage:自定义扩展方法，//图标： '图像：//http://图表。百度。com/images/fav图标png '，//onclick : function(){//alert('自定义)//}/} } } })，dataZoom: { show: false，start: 0，end: 100 }，xaxis 3360[{ type : ' category '，boundaryGap: true，data: show_data[1] }，{ type : ' category '，boundaryGap: true，data: show_data[1] }，yAxis:用户数，边界间隙： [0,0.5]//边界间隙： [0.2，0.2] }，{ type: 'value '，scale: true，name: '用户数，boundaryGap: [0，0.5] } ]，series: [ { name: '用户消耗，键入：“bar”，xAxisIndex: 1，data: show_data[0] }，名称：用户数，type: 'line '，xAxisIndex: 1，data : show _ data[0]}]}；我的演示图表。hide loading()；我的演示图表。SetOption(echart _ all _ option)；};//获取原始数据$.Ajax({ URL : ' _ _ CONTROLLER _ _/Getres '，async:false，dataType:'json '，type:'post '，success : function(msg){ var result=msg。结果；if(msg。code==200){ for(var I=0；我结果。长度；i ){ date.push(结果[i].日期);num.push(结果[i].计数);msg[0]=num；消息[1]=日期；刷新图表（消息);} } } });};//默认加载var default _ load=(function(){ init _ echart()；})();});/script控制器中查询自己需要的数据（这里查询的日期和对应的数量)

//折线统计公共函数getRes(){ $ user=M(' account ')；$sql='选择日期（创建时间)作为日期，计数(*)作为计数从t _ account GROUP BY date '；$ result=$ user-query($ SQL)；$this-ajaxReturn(数组(' code'=200，' result '=$ result))；}至此，一个简单的展示的统计图就出来了

对展示中一些参数不太理解的，大家可以参考官网电子艺术文献