- 图表展示开发案例
- 案例数据
- 基于echarts制图
- 柱状图
- 折线图
- 饼图
- 中国地图
- 基于EasyUI制表
- 基础表
- 图表组合：计算同比、环比
- ETL定时汇总数据
- 数据表透视功能
案例数据
本案例的数据为模拟创建的2017年某公司销售数据，字段如下：
所有示例可在以下地址操作演示： http://demo.boubei.com， 账号: demo 密码: www.boubei.com
基于echarts制图
引入百度echarts可视化组件和jQuery，通过jQuery发送AJAX请求向TSS查询报表数据，组装后通过echarts展现成各式图表。
<script src="../../tools/easyui/jquery.min.js"></script> <script src="../../tools/echarts/echarts-all-2.1.10.js"></script>Echarts快速入门参考《5 分钟上手 ECharts》
柱状图
先创建一个数据服务，然后在展示页面里通过AJAX请求数据服务。
/*
示例：
var label = ["广东", "浙江", "江苏", "四川", "山东", "湖北", "河南", "湖南", "河北", "安徽", "上海", "福建", "北京", "辽宁", "江西"];
var data = [5782, 5672, 5167, 4610, 4560, 4475, 4168, 4022, 3690, 3470, 3290, 3168, 2914, 2567, 2538];
show(label, data);
*/
function show(label, data) {
var myChart = echarts.init(document.getElementById('chart1'));
var option = {
title: {
text: 'TSS 展示入门示例'
},
tooltip: {},
legend: {
data:['各省销量']
},
xAxis: {
data: label
},
yAxis: {},
series: [{
name: '各省销量',
type: 'bar',
data: data
}]
};
myChart.setOption(option);
}
// 请求数据服务【id=52】，地址：/tss/data/json/52，获取数据，简单组装后即可展示。
$.getJSON("/tss/data/json/52", {}, function(result) {
var data = [], label = [];
// result格式：[{"pro":"广东","num":5782},{"pro":"浙江","num":5672},......]
for(var i = 0; i < result.length; i++) {
var item = result[i];
data.push(item.num);
label.push(item.pro);
}
show(label, data);
});
折线图
数据服务：
select MONTH(day) month, count(*) num from order_17
group by MONTH(day)
order by month
JS代码：
function show(label, data) {
var myChart = echarts.init(document.getElementById('chart1'));
var option = {
title: {
text: 'TSS 展示入门示例'
},
tooltip: {},
legend: {
data:['月销量']
},
xAxis: {
data: label
},
yAxis: {},
series: [{
name: '月销量',
type: 'line',
data: data
}]
};
myChart.setOption(option);
}
$.getJSON("/tss/data/json/53", {}, function(result) {
var data = [], label = [];
for(var i = 0; i < result.length; i++) {
var item = result[i];
data.push(item.num);
label.push(item.month);
}
show(label, data);
});
饼图
略，同上且参考demo页面。
中国地图
具体实现参考： http://demo.boubei.com/tss/more/bi_template/distribute.html， 账号: demo 密码: www.boubei.com
基于EasyUI制表
引入EasyUI结合TSS框架制表，通过jQuery发送AJAX请求向TSS查询报表数据，组装后通过EasyUI展现成各式表格。
EasyUI入门示例请参考：EasyUI demo
<link rel="stylesheet" href="../../css/easyui.css">
<link rel="stylesheet" href="../../tools/easyui/themes/default/easyui.css">
<script src="../../tools/tssJS/tssJS.all.js">
<script src="../../tools/easyui/jquery.min.js">
<script src="../../tools/easyui/jquery.easyui.min.js">
<script src="../../tools/easyui/easyui-lang-zh_CN.js">
基础表
数据服务：
select year(day) year, month(day) month ,sum(qty) num, round(sum(money),2) money from order_17
<#if param1??>where year(day) = '${param1}'
group by year(day), month(day)
JS代码
$(function() {
$('#year').combobox({//类型
valueField:'value',
textField:'text',
data: [{text: "全部",value:'全部',selected:true},{text: "2018",value:'2018'}, {text: "2017",value:'2017'}]
});
query();
});
var FIELDS=[
{field: 'year', title: '年份', width: 80, align: 'center'},
{field: 'month', title: '月份', width: 80, align: 'center'},
{field: 'num', title: '销售数量', width: 120, align: 'center'},
{field: 'money', title: '销售金额', width: 120, align: 'center'}
];
function query(){
var params={};
if($('#year').combobox('getValue') != '全部'){
params.param1 = $('#year').combobox('getValue');
}
$.getJSON("/tss/data/json/75", params, function(result) {
dg = $('#t1').datagrid({
data: result,
pageList:[100,300,500,1000],
pageSize : 100,
pagination: true,
fit: true,
fitColumns: true,
checkOnSelect: true,
selectOnCheck: true,
columns:[FIELDS]
});
})
};
HTML的BODY内容
<div id="main" class="easyui-layout" fit="true">
<div id="dataContainer" border="false" style="height: 100%;">
<table id="t1" class="easyui-datagrid" data-options="toolbar:'#t2'" border="flase"></table>
</div>
<div id="t2" style="padding:5px">
<label>年份</label>
<input id='year' class='easyui-combobox' style="width:100px"/>
<a id="qutn" href="#" class="easyui-linkbutton" onclick="query()">查询</a>
</div>
</div>
图表组合：计算同比、环比
同比环比，输入标准格式数据：月份、数值1、数值2，自动出来折线图
（本例子数据格式有：年 月 销售量 销售额）
<link rel="stylesheet" href="../../css/easyui.css"> <link rel="stylesheet" href="../../tools/easyui/themes/default/easyui.css"> <script src="../../tools/echarts/echarts-all-3.1.2.js"></script>//图 <script src="../../tools/easyui/jquery.min.js"></script> <script src="../../tools/easyui/jquery.easyui.min.js"></script> <script src="../../tools/easyui/easyui-lang-zh_CN.js"></script>数据服务见上一内容-基础表的数据
JS代码
function show(label,data1,data2,data3,data4){
var dom = document.getElementById('chart1');
var myChart = echarts.init(dom);
var option = {
title: {
text: 'TSS 展示入门示例',
},
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross',crossStyle: {color: '#999'} }
},
legend: { data:['销量','金额（百元）','销量环比','金额同比'] },
xAxis: [{ data: label }],
yAxis: [
{min: 0,max: 25000,interval: 5000},
{name: '%',min: -100,max: 300,interval: 80}
],
series: [
{
name:'销量',
type:'bar',
data:data1
},
{
name:'金额（百元）',
type:'bar',
data:data2
},
{
name:'销量环比',
type:'line',
yAxisIndex: 1,
data:data3
},
{
name:'金额同比',
type:'line',
yAxisIndex: 1,
data:data4
}
]
}
myChart.setOption(option, true);
}
function split_arr(arr,len){
var newArr = [];
for (var i =0;i < arr.length ;i+=len){
newArr.push(arr.slice(i,i+len));
}
return newArr
}
$.getJSON("/tss/data/json/75", {}, function(result) {
var label =[],data1 = [], data2 = [], data3 = [], data4 = [],totaldata =[];
var data = split_arr(result,result.length/2);
for(var j=0; j< data[1].length; j++){
var item = data[1][j],item1 = data[1][j-1] || data[1][j],item2 = data[0][j];
label.push(item.month);
data1.push(item.num);
data2.push(Math.round(item.money)/100);
data3.push( Math.round( (item.num - item1.num)/item1.num * 10000)/100 );
data3[0] = null ;
data4.push( Math.round( (item.num - item2.num)/item2.num * 10000)/100 );
totaldata.push({'label':label[j],'data1':data1[j],'data2':data2[j],'data3':(data3[j]||'--')+'%','data4':data4[j] + '%'});
dg = $('#t1').datagrid({
data: totaldata,
fit: true,
fitColumns: true,
checkOnSelect: true,
selectOnCheck: true,
columns:[[
{title:'月份', field:'label', width: 90, align:'center'},
{title:'销量', field:'data1', width: 120, align:'center'},
{title:'金额（百元）', field:'data2', width: 150, align:'center'},
{title:'销量环比', field:'data3', width: 95, align:'center'},
{title:'金额同比', field:'data4', width: 95, align:'center'}
]]
});
}
show(label, data1,data2,data3,data4);
});
ETL定时汇总数据
数据表透视功能