移动web 页面显示echarts图表
来源：互联网 发布：dnf端口辅助黄金点 编辑：程序博客网 时间：2024/05/17 00:10
play框架，使用jquery mobile做的移动web，显示柱状图、折线图、饼图
图表数据动态获取，记录一下
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="/public/lib/jquerymobile/jquery.mobile-1.4.5.css"><link rel="stylesheet" href="/public/stylesheets/main.css"><script src="/public/lib/jquerymobile/jquery.js"></script><script src="/public/lib/jquerymobile/jquery.mobile-1.4.5.js"></script><script src="/public/javascripts/Chart.js"></script><script src="/public/javascripts/custom.js"></script></head><body> <div data-role="page" id="secondpage"> <script src="/public/echarts_mobile/js/dist/echarts.js"></script> <div data-role="header" style="background-color: #191970" data-position="fixed"> <a href="#reportpage">返回</a> <h1 id="titlename" class="title_text_color">大类销售统计</h1> </div> <div data-role="main" class="ui-content"> <div id="content"> <div id="showBar" class="show" style="width:400px;height:400px"></div> <script type="text/javascript"> require.config({ paths:{ echarts: '/public/echarts_mobile/js/dist', } }); // 使用 require( [ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载 ], function (ec) { // 基于准备好的dom，初始化echarts图表 var myChart = ec.init(document.getElementById('showBar')); myChart.showLoading({ text: '正在努力加载中...' }); var categories = []; var onenum = []; var twonum = []; // 同步执行 $.ajaxSettings.async = false; // 加载数据 $.getJSON('/secondnum', function (json) { categories = json.categories; onenum = json.onenum; twonum = json.twonum; }); var option = { tooltip: { show: true }, legend: { data:['数量','金额'] }, xAxis : [ { type : 'category', data : categories } ], yAxis : [ { type : 'value' } ], series : [ { "name":"数量", "type":"bar", "data":onenum }, { "name":"金额", "type":"bar", "data":twonum } ] }; // 为echarts对象加载数据 myChart.setOption(option); myChart.hideLoading(); resize(); window.onresize = function(){ resize(); } function resize(){ var height = document.documentElement.clientHeight - 50 + 'px'; var width = document.documentElement.clientWidth + 'px'; $('#content').height(height).width(width); $('.show').height(document.documentElement.clientHeight - 65 + 'px').width(width); myChart && myChart.resize(); } } ); </script> </div> </div> </div></body></html><div data-role="page" id="fouthpage"> <script src="/public/echarts_mobile/js/dist/echarts.js"></script> <div data-role="header" style="background-color: #191970" data-position="fixed"> <a href="#reportpage">返回</a> <h1 id="titlename" class="title_text_color">月营业走势</h1> </div> <div data-role="main" class="ui-content"> <div id="content"> <div id="showBar" class="show" style="width:400px;height:400px"></div> <script type="text/javascript"> require.config({ paths:{ echarts: '/public/echarts_mobile/js/dist', } }); // 使用 require( [ 'echarts', 'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载 ], function (ec) { // 基于准备好的dom，初始化echarts图表 var myChart = ec.init(document.getElementById('showBar')); myChart.showLoading({ text: '正在努力加载中...' }); var categories = []; var onenum = []; var twonum = []; var threenum = []; // 同步执行 $.ajaxSettings.async = false; // 加载数据 $.getJSON('/fouthnum', function (json) { categories = json.categories; onenum = json.onenum; twonum = json.twonum; threenum = json.threenum; }); var option = { tooltip: { show: true }, legend: { data:['客单数','来客数','销售额'] }, xAxis : [ { type : 'category', data :categories } ], yAxis : [ { type : 'value' } ], series : [ { "name":"客单数", "type":"line", "data":onenum }, { "name":"来客数", "type":"line", "data":twonum }, { "name":"销售额", "type":"line", "data":threenum } ] }; // 为echarts对象加载数据 myChart.setOption(option); myChart.hideLoading(); resize(); window.onresize = function(){ resize(); } function resize(){ var height = document.documentElement.clientHeight - 50 + 'px'; var width = document.documentElement.clientWidth + 'px'; $('#content').height(height).width(width); $('.show').height(document.documentElement.clientHeight - 65 + 'px').width(width); myChart && myChart.resize(); } } ); </script> </div> </div> </div><div data-role="page" id="fouthpage"> <script src="/public/echarts_mobile/js/dist/echarts.js"></script> <div data-role="header" style="background-color: #191970" data-position="fixed"> <a href="#reportpage">返回</a> <h1 id="titlename" class="title_text_color">付款方式统计</h1> </div> <div data-role="main" class="ui-content"> <div id="content"> <div id="showBar" class="show" style="width:400px;height:400px"></div> <script type="text/javascript"> require.config({ paths:{ echarts: '/public/echarts_mobile/js/dist', } }); // 使用 require( [ 'echarts', 'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载 ], function (ec) { // 基于准备好的dom，初始化echarts图表 var myChart = ec.init(document.getElementById('showBar')); myChart.showLoading({ text: '正在努力加载中...' }); var option = { tooltip: { show: true }, legend: { data:[] }, series : [] }; var lengndData = []; var seriesData = []; // 同步执行 $.ajaxSettings.async = false; // 加载数据 $.getJSON('/fifthnum', function (data) { //后台需要返回以下结构的json数据 if(data!=null && data['series'].length>0){ legendData=data['legen']; seriesData.push({ 'name':'付款方式', 'type':'pie', 'radius' : '55%', //饼图半径大小 'center': ['50%', '60%'],//饼图圆心位置x,y 'data':function(){ var t_data=[]; for(var i=0,len=data['series'].length;i<len;i++){ t_data.push({ 'name':legendData[i], 'value':data['series'][i] }); } return t_data; }() }); } option.legend.data=legendData; myChart.setOption(option); myChart.setSeries(seriesData); }); myChart.hideLoading(); resize(); window.onresize = function(){ resize(); } function resize(){ var height = document.documentElement.clientHeight - 50 + 'px'; var width = document.documentElement.clientWidth + 'px'; $('#content').height(height).width(width); $('.show').height(document.documentElement.clientHeight - 65 + 'px').width(width); myChart && myChart.resize(); } } ); </script> </div> </div> </div>后台数据
public static void second(String dogid,String sp,String start_time,String end_time) { dogids=dogid; sps=sp; start_times=start_time; end_times=end_time; render(); } public static void secondnum() { String result = doRest(dogids, sps, start_times, end_times);// String result="精美速食|17|85-精美速食2|11|81-"; ArrayList<String> categories = new ArrayList<String> (); ArrayList<String> onenum = new ArrayList<String> (); ArrayList<String> twonum = new ArrayList<String> (); for (int i = 0; i < result.split("-").length; i++) { if (result.split("-")[i].trim().length()!=0) { System.out.println(result.split("-")[i]); String[] res=result.split("-")[i].split("\\|"); if (res.length==3) { categories.add(res[0].trim()); onenum.add(res[1].trim()); twonum.add(res[2].trim()); } } } Map<String, Object> json = new HashMap<String, Object>(); json.put("categories", categories); json.put("onenum", onenum); json.put("twonum", twonum); renderJSON(json); } public static void fouthnum() { String result = doRest(dogids, sps, start_times, end_times);// String result="20151104|7|0|85-20151105|9|4|95-"; ArrayList<String> categories = new ArrayList<String> (); ArrayList<String> onenum = new ArrayList<String> (); ArrayList<String> twonum = new ArrayList<String> (); ArrayList<String> threenum = new ArrayList<String> (); for (int i = 0; i < result.split("-").length; i++) { if (result.split("-")[i].trim().length()!=0) { System.out.println(result.split("-")[i]); String[] res=result.split("-")[i].split("\\|"); if (res.length==4) { categories.add(res[0].trim()); onenum.add(res[1].trim()); twonum.add(res[2].trim()); threenum.add(res[3].trim()); } } } Map<String, Object> json = new HashMap<String, Object>(); json.put("categories", categories); json.put("onenum", onenum); json.put("twonum", twonum); json.put("threenum", threenum); renderJSON(json); } public static void fifthnum() { String result = doRest(dogids, sps, start_times, end_times); ArrayList<String> legen = new ArrayList<String> (); ArrayList<String> series = new ArrayList<String> (); for (int i = 0; i < result.split("-").length; i++) { if (result.split("-")[i].trim().length()!=0) { System.out.println(result.split("-")[i]); String[] res=result.split("-")[i].split("\\|"); if (res.length==2) { legen.add(res[0].trim()); series.add(res[1].trim()); } } } Map<String, Object> json = new HashMap<String, Object>(); json.put("legen", legen); json.put("series", series); System.out.println(json); renderJSON(json); } 0 0
- 移动web 页面显示echarts图表
- echarts图表显示问题
- 使用echarts显示图表
- echarts显示图表
- echarts初次使用 显示图表
- echarts实现一个页面同时显示多个不同形状的图表/动态往图表中存放数据
- echarts图表showLoading遮盖层显示问题
- WPF中使用Echarts显示图表
- Echarts图表数据动态单位显示
- Echarts图表中动态数据显示
- Echarts图表中的tooltip无法显示
- React Native使用百度Echarts显示图表
- web图表库百度开源：ECharts
- echarts图表文字显示问题，给图表添加点击事件
- Echarts图表
- echarts-图表
- echarts图表
- echarts图表
- 示例代码中的 SlidingTabLayout 简单使用（二）
- hdoj 自共轭Ferrers图 1246 （规律）
- 一些经验总结与常识--沉于思考，默默学习！
- Failed to upgrade Oracle Cluster Registry configuration
- IO_原理_分类_标准步骤JAVA146
- 移动web 页面显示echarts图表
- 实验三，温湿度模块
- Scala case类
- Android Studio搭建Android集成开发环境
- 视频图像传输与显示(2)——彩色模拟电视广播制式NTSC、PAL和SECAM
- input text 框当密码框使用（火狐下有默认值的bug）
- 思维导图操作书 读书笔记
- 基于VPS服务器的内网代理转发方案
- Linux-Unix系统编程手册学习笔记
