移动web 页面显示echarts图表
play框架，使用jquery mobile做的移动web，显示柱状图、折线图、饼图
图表数据动态获取，记录一下
<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'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);
}