define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echarts-theme', 'template'], function ($, undefined, Backend, Datatable, Table, Echarts, undefined, Template) {var Controller = {
index: function () {
// 基于准备好的dom，初始化echarts实例
var myChart = Echarts.init(document.getElementById('echart'), 'walden');
var myChart2 = Echarts.init(document.getElementById('echart2'), 'walden');
var myChart3 = Echarts.init(document.getElementById('echart3'), 'walden');
// 指定图表的配置项和数据 目标
var option3 = {
tooltip : {
formatter: "{a}
{b} : {c}%"
},
toolbox: {
feature: {
restore: {},
saveAsImage: {}
}
},
series: [
{
name: '业务指标',
type: 'gauge',
detail: {formatter:'{value}%'},
data: [{value: 40, name: '完成率'}]
}
]
};
// 指定图表的配置项和数据 TOP10
var option2 = {
title : {
text: '放牛姐月服务费TOP10',
subtext: '平均延迟10分钟',
show: false,
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['上月','本月']
},
grid: [{
left: '50',
top: '50',
right: '50',
bottom: 50
}],
toolbox: {
show : false,
feature : {
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : []
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'本月',
type:'bar',
data:[],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'上月',
type:'bar',
data:[],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
/* markPoint : {data : [
{name : '月最高', value : 100.78, xAxis: 0, yAxis: 100.78},
{name : '月最低', value : 2.3, xAxis: 11, yAxis: 3}
]
},*/
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
};
// 指定图表的配置项和数据 每日对比
var option = {
title: {
text: '',
subtext: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['你', '第1名',__('Salesone'), __('Ordersone')]
},
toolbox: {
show: false,
feature: {
magicType: {show: true, type: ['stack', 'tiled']},
saveAsImage: {show: true}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: Orderdata.column
},
yAxis: {},
grid: [{
left: 'left',
top: '50',
right: '10',
bottom: 50
}],
series: [
{
name: '你',
type: 'line',
smooth: true,
areaStyle: {
normal: {}
},
lineStyle: {
normal: {
width: 1.5
}
},
data: Orderdata.paydata
},
{
name: '第1名',
type: 'line',
smooth: true,
areaStyle: {
normal: {}
},
lineStyle: {
normal: {
width: 1.5
}
},
data: Orderdata.createdata
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
myChart2.setOption(option2);
myChart3.setOption(option3);
//动态添加数据，可以通过Ajax获取数据然后填充
(function count3 () {
var names = []; //类别数组(实际用来盛放X轴坐标值)
var nums = []; //销量数组(实际用来盛放Y坐标值)
var snums = []; //销量数组(实际用来盛放Y坐标值)
$.ajax({
type: "post",
async: true, //异步请求(同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行)
url: "/fangniujieadd.php/dashboardno/newdata",
data: {},
dataType: "json", //返回数据形式为json
success: function (result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result) {
for (var i = 0; i <10; i++) {
//alert(result[i].name);
names.push(result.rows[i].admin.nickname); //挨个取出类别并填入类别数组
}
for (var i = 0; i <10; i++) {
nums.push(result.rows[i].thismonth); //挨个取出本月销量并填入别数组
}
for (var i = 0; i <10; i++) {
snums.push(result.rows[i].lastmonth); //挨个取出本月销量并填入别数组
}
/* amount=result.todaydata.today;
oneamount=result.rows[1].today; todaydata */
Orderdata.createdata.push(result.onetodaydata.today);
Orderdata.paydata.push(result.todaydata.today); //
/*onenames.push(result.rows[1].admin.nickname); //加入第一名的姓名
onename.push('自已');//加入自已*/
myChart.setOption({ //每日对比的数据
xAxis: {
data: Orderdata.column
},
legend: {
data: [result.todaydata.admin.nickname,result.onetodaydata.admin.nickname,]
},
series: [
{
name: result.todaydata.admin.nickname,
data: Orderdata.paydata
},
{
name:result.onetodaydata.admin.nickname,
data: Orderdata.createdata
}
]
});
myChart2.hideLoading(); //隐藏加载动画 TOP10的数据
myChart2.setOption({ //加载数据图表
xAxis: {
data: names
},
series: [
{
// 根据名字对应到相应的系列
name: '本月',
data: nums
},
{
// 根据名字对应到相应的系列
name: '上月',
data: snums
},
]
});
};
//加载比拼数据到模板
$("#challenge-list").html(Template("challenge", {challenge: result.orderchallenge})); //把模板challenge 放入challenge-list里面
},
error: function (errorMsg) {
//请求失败时执行该函数
/* alert("图表请求数据失败!");*/
myChart.hideLoading();
}
});
Orderdata.column.push((new Date()).toLocaleTimeString().replace(/^\D*/, '')); //根据本地时间把 Date 对象的时间部分转换为字符串：
/* var amount = Math.floor(Math.random() * 200) + 20; //取随机数
*/option3.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
myChart3.setOption(option3, true);
//按自己需求可以取消这个限制
if (Orderdata.column.length >= 20) { //移除最开始的一条数据
Orderdata.column.shift();
Orderdata.paydata.shift();
Orderdata.createdata.shift();
}
if ($("#echart").width() != $("#echart canvas").width() && $("#echart canvas").width() != $("#echart").width()) {
myChart.resize();
}
if ($("#echart2").width() != $("#echart2 canvas").width() && $("#echart2 canvas").width() != $("#echart2").width()) {
myChart2.resize();
}
if ($("#echart3").width() != $("#echart3 canvas").width() && $("#echart3 canvas").width() != $("#echart3").width()) {
myChart3.resize();
}
/*if(document.all) {
document.getElementById("target").click();
}
// 其它浏览器
else {
var e = document.createEvent("MouseEvents");
e.initEvent("click", true, true);
document.getElementById("target").dispatchEvent(e);
}
*/var ajax;
setInterval(function(){
if(ajax){
ajax.abort();
}else
{
count3
}
$.ajax();
},3000);
})();
$(window).resize(function () {
myChart.resize();
myChart2.resize();
myChart3.resize();
});
}
};
return Controller;
});
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
