无为清净楼资源网 Design By www.qnjia.com
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="/UploadFiles/2021-04-02/echarts-all.js">
下面是具体方法
<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
无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
暂无评论...
更新日志
2024年09月25日
2024年09月25日
- 纯音入心系列纯音乐《天籁古筝》1CD[MP3][331MB]
- 男女对唱典藏天碟《发烧对唱·那个季节里的歌DSD》10CD[WAV]
- 群星2010-歌林精选辑[歌林][WAV+CUE]
- TrioZimbalist-PianoTriosofWeinberg,Auerbach,Dvorak(2024)[24-44,1]wav
- 群星.1992-滚石第一流台湾歌·12王牌大车拼【滚石】【WAV+CUE】
- 林子祥.1984-创作歌集【华纳】【WAV+CUE】
- 周汤豪.2010-周汤豪【华纳】【FLAC分轨】
- Mozart-TheStringQuintets-AmadeusQuartet,CecilAronowitz(2017)[24-44,1][WAV+CUE]
- JamesWilliamsDennisIrwin-Focus(2024,Red)[24-48]FLAC
- 藤泽麻衣《空みあげて》[WAV]
- 纯音入心系列纯音乐《中国古筝经典名曲》1CD[MP3][1.3GB]
- 纯音入心系列纯音乐《古筝新奏:岁月静好与筝语,细水流年与筝同》1CD[MP3][846.9MB]
- 670《脆弱敏感小女生》[320K/MP3][27.53MB]
- 曾琳.2011-好好爱我【南方】【WAV+CUE】
- 范晓萱.1995-RAIN【福茂】【WAV+CUE】