init
This commit is contained in:
MeSHard
796
public/assets/js/backend/dashboard.js
Normal file
796
public/assets/js/backend/dashboard.js
Normal file
@@ -0,0 +1,796 @@
|
||||
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 xData = function () {
|
||||
var data = []
|
||||
for (var i = 1; i <= 12; i++) {
|
||||
data.push(i + '月份')
|
||||
}
|
||||
return data;
|
||||
}()
|
||||
// 指定图表的配置项和数据
|
||||
var optionYear = {
|
||||
backgroundColor: '#344b58',
|
||||
title: {
|
||||
text: '企业进出车辆数趋势',
|
||||
subtext: '',
|
||||
x: "4%",
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: '22',
|
||||
},
|
||||
subtextStyle: {
|
||||
color: '#90979c',
|
||||
fontSize: '16'
|
||||
}
|
||||
},
|
||||
// color: [
|
||||
// "#18d1b1",
|
||||
// "#3fb1e3",
|
||||
// "#626c91",
|
||||
// "#a0a7e6",
|
||||
// "#c4ebad",
|
||||
// "#96dee8"
|
||||
// ],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
x: "4%",
|
||||
top: '8%',
|
||||
textStyle: {
|
||||
color: '#90979c',
|
||||
},
|
||||
data: ['A企业', 'B企业', 'C企业', 'D企业']
|
||||
},
|
||||
"calculabel": true,
|
||||
// toolbox: {
|
||||
// show: false,
|
||||
// feature: {
|
||||
// magicType: {show: true, type: ['stack', 'tiled']},
|
||||
// saveAsImage: {show: true}
|
||||
// }
|
||||
// },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#90979c'
|
||||
}
|
||||
},
|
||||
data: xData
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#90979c'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
borderWidth: 0,
|
||||
top: 110,
|
||||
bottom: 95,
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
"dataZoom": [
|
||||
// {
|
||||
// "show": true,
|
||||
// "height": 30,
|
||||
// "xAxisIndex": [
|
||||
// 0
|
||||
// ],
|
||||
// bottom: 30,
|
||||
// "start": 10,
|
||||
// "end": 80,
|
||||
// handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
|
||||
// handleSize: '110%',
|
||||
// handleStyle: {
|
||||
// color: "#d3dee5",
|
||||
//
|
||||
// },
|
||||
// textStyle: {
|
||||
// color: "#fff"
|
||||
// },
|
||||
// borderColor: "#90979c"
|
||||
//
|
||||
//
|
||||
// },
|
||||
// {
|
||||
// "type": "inside",
|
||||
// "show": true,
|
||||
// "height": 15,
|
||||
// "start": 1,
|
||||
// "end": 35
|
||||
// }
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"name": "A企业",
|
||||
"type": "bar",
|
||||
"stack": "总量",
|
||||
"barMaxWidth": 35,
|
||||
"barGap": "10%",
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"color": "rgba(255,144,128,1)",
|
||||
"label": {
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#fff"
|
||||
},
|
||||
"position": "inside",
|
||||
formatter: function (p) {
|
||||
return p.value > 0 ? (p.value) : '';
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [709,
|
||||
1917,
|
||||
2455,
|
||||
2610,
|
||||
1719,
|
||||
1433,
|
||||
1544,
|
||||
3285,
|
||||
5208,
|
||||
3372,
|
||||
2484,
|
||||
4078]
|
||||
},
|
||||
{
|
||||
"name": "B企业",
|
||||
"type": "bar",
|
||||
"stack": "总量",
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"color": "rgba(0,191,183,1)",
|
||||
"barBorderRadius": 0,
|
||||
"label": {
|
||||
"show": true,
|
||||
"position": "inside",
|
||||
formatter: function (p) {
|
||||
return p.value > 0 ? (p.value) : '';
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"data": [
|
||||
327,
|
||||
1776,
|
||||
507,
|
||||
1200,
|
||||
800,
|
||||
482,
|
||||
204,
|
||||
1390,
|
||||
1001,
|
||||
951,
|
||||
381,
|
||||
220
|
||||
]
|
||||
}, {
|
||||
"name": "总数",
|
||||
"type": "line",
|
||||
symbolSize: 10,
|
||||
symbol: 'circle',
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"color": "rgba(252,230,48,1)",
|
||||
"barBorderRadius": 0,
|
||||
"label": {
|
||||
"show": true,
|
||||
"position": "top",
|
||||
formatter: function (p) {
|
||||
return p.value > 0 ? (p.value) : '';
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"data": [
|
||||
1036,
|
||||
3693,
|
||||
2962,
|
||||
3810,
|
||||
2519,
|
||||
1915,
|
||||
1748,
|
||||
4675,
|
||||
6209,
|
||||
4323,
|
||||
2865,
|
||||
4298
|
||||
]
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(optionYear);
|
||||
|
||||
|
||||
|
||||
|
||||
var myChart1 = Echarts.init(document.getElementById('echart1'), 'walden');
|
||||
var myChart2 = Echarts.init(document.getElementById('echart2'), 'walden');
|
||||
var myChart3 = Echarts.init(document.getElementById('echart3'), 'walden');
|
||||
<!--当天的统计-->
|
||||
optionDay = {
|
||||
title: {
|
||||
text: '当日车牌号统计',
|
||||
subtext: '截止当前时间',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#999',
|
||||
fontWeight: 'normal',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '车牌号统计',
|
||||
type: 'pie',
|
||||
radius: [20,60],
|
||||
center: ['50%', '60%'],
|
||||
itemStyle: {
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
label: {
|
||||
alignTo: 'edge',
|
||||
formatter: '{name|{b}}\n{time|{c} 辆}',
|
||||
minMargin: 5,
|
||||
edgeDistance: 10,
|
||||
lineHeight: 15,
|
||||
rich: {
|
||||
time: {
|
||||
fontSize: 10,
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{value: 335, name: '蓝牌车'},
|
||||
{value: 310, name: '黄牌车'},
|
||||
{value: 234, name: '绿牌车'},
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
<!--本周的统计-->
|
||||
optionWeek = {
|
||||
title: {
|
||||
text: '本周车牌号统计',
|
||||
subtext: '截止当前时间的一周',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data: ['蓝牌车', '黄牌车', '绿牌车']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '访问来源',
|
||||
type: 'pie',
|
||||
radius: '55%',
|
||||
center: ['50%', '60%'],
|
||||
data: [
|
||||
{value: 335, name: '蓝牌车'},
|
||||
{value: 310, name: '黄牌车'},
|
||||
{value: 234, name: '绿牌车'},
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
<!--本月的统计-->
|
||||
optionMonth = {
|
||||
title: {
|
||||
text: '本月车牌号统计',
|
||||
subtext: '截止当前时间的一月',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data: ['蓝牌车', '黄牌车', '绿牌车']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '访问来源',
|
||||
type: 'pie',
|
||||
radius: '55%',
|
||||
center: ['50%', '60%'],
|
||||
data: [
|
||||
{value: 335, name: '蓝牌车'},
|
||||
{value: 310, name: '黄牌车'},
|
||||
{value: 234, name: '绿牌车'},
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
myChart1.setOption(optionDay);
|
||||
myChart2.setOption(optionWeek);
|
||||
myChart3.setOption(optionMonth);
|
||||
|
||||
|
||||
//当月每天车辆数
|
||||
var myChart4 = Echarts.init(document.getElementById('echart4'),'dark')
|
||||
option4 = {
|
||||
|
||||
};
|
||||
myChart4.setOption(option4);
|
||||
|
||||
|
||||
|
||||
$(window).resize(function () {
|
||||
myChart.resize();
|
||||
});
|
||||
|
||||
$(document).on("click", ".btn-refresh", function () {
|
||||
setTimeout(function () {
|
||||
myChart.resize();
|
||||
}, 0);
|
||||
});
|
||||
|
||||
},
|
||||
chart:function () {
|
||||
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = Echarts.init(document.getElementById('echart'), 'walden');
|
||||
|
||||
var xData = function () {
|
||||
var data = []
|
||||
for (var i = 1; i <= 12; i++) {
|
||||
data.push(i + '月份')
|
||||
}
|
||||
return data;
|
||||
}()
|
||||
// 指定图表的配置项和数据
|
||||
var optionYear = {
|
||||
backgroundColor: '#344b58',
|
||||
title: {
|
||||
text: '企业进出车辆数趋势',
|
||||
subtext: '',
|
||||
x: "4%",
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: '22',
|
||||
},
|
||||
subtextStyle: {
|
||||
color: '#90979c',
|
||||
fontSize: '16'
|
||||
}
|
||||
},
|
||||
// color: [
|
||||
// "#18d1b1",
|
||||
// "#3fb1e3",
|
||||
// "#626c91",
|
||||
// "#a0a7e6",
|
||||
// "#c4ebad",
|
||||
// "#96dee8"
|
||||
// ],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
x: "4%",
|
||||
top: '8%',
|
||||
textStyle: {
|
||||
color: '#90979c',
|
||||
},
|
||||
// data: ['A企业', 'B企业', 'C企业', 'D企业']
|
||||
},
|
||||
"calculabel": true,
|
||||
// toolbox: {
|
||||
// show: false,
|
||||
// feature: {
|
||||
// magicType: {show: true, type: ['stack', 'tiled']},
|
||||
// saveAsImage: {show: true}
|
||||
// }
|
||||
// },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#90979c'
|
||||
}
|
||||
},
|
||||
data: xData
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#90979c'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
borderWidth: 0,
|
||||
top: 110,
|
||||
bottom: 95,
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
"dataZoom": [
|
||||
// {
|
||||
// "show": true,
|
||||
// "height": 30,
|
||||
// "xAxisIndex": [
|
||||
// 0
|
||||
// ],
|
||||
// bottom: 30,
|
||||
// "start": 10,
|
||||
// "end": 80,
|
||||
// handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
|
||||
// handleSize: '110%',
|
||||
// handleStyle: {
|
||||
// color: "#d3dee5",
|
||||
//
|
||||
// },
|
||||
// textStyle: {
|
||||
// color: "#fff"
|
||||
// },
|
||||
// borderColor: "#90979c"
|
||||
//
|
||||
//
|
||||
// },
|
||||
// {
|
||||
// "type": "inside",
|
||||
// "show": true,
|
||||
// "height": 15,
|
||||
// "start": 1,
|
||||
// "end": 35
|
||||
// }
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"name": "A企业",
|
||||
"type": "bar",
|
||||
"stack": "总量",
|
||||
"barMaxWidth": 35,
|
||||
"barGap": "10%",
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"color": "rgba(255,144,128,1)",
|
||||
"label": {
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#fff"
|
||||
},
|
||||
"position": "inside",
|
||||
formatter: function (p) {
|
||||
return p.value > 0 ? (p.value) : '';
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [709,
|
||||
1917,
|
||||
2455,
|
||||
2610,
|
||||
1719,
|
||||
1433,
|
||||
1544,
|
||||
3285,
|
||||
5208,
|
||||
3372,
|
||||
2484,
|
||||
4078]
|
||||
},
|
||||
{
|
||||
"name": "B企业",
|
||||
"type": "bar",
|
||||
"stack": "总量",
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"color": "rgba(0,191,183,1)",
|
||||
"barBorderRadius": 0,
|
||||
"label": {
|
||||
"show": true,
|
||||
"position": "inside",
|
||||
formatter: function (p) {
|
||||
return p.value > 0 ? (p.value) : '';
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"data": [
|
||||
327,
|
||||
1776,
|
||||
507,
|
||||
1200,
|
||||
800,
|
||||
482,
|
||||
204,
|
||||
1390,
|
||||
1001,
|
||||
951,
|
||||
381,
|
||||
220
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "总数",
|
||||
"type": "line",
|
||||
symbolSize: 10,
|
||||
symbol: 'circle',
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"color": "rgba(252,230,48,1)",
|
||||
"barBorderRadius": 0,
|
||||
"label": {
|
||||
"show": true,
|
||||
"position": "top",
|
||||
formatter: function (p) {
|
||||
return p.value > 0 ? (p.value) : '';
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"data": [
|
||||
1036,
|
||||
3693,
|
||||
2962,
|
||||
3810,
|
||||
2519,
|
||||
1915,
|
||||
1748,
|
||||
4675,
|
||||
6209,
|
||||
4323,
|
||||
2865,
|
||||
4298
|
||||
]
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(optionYear);
|
||||
|
||||
|
||||
|
||||
|
||||
var myChart1 = Echarts.init(document.getElementById('echart1'), 'walden');
|
||||
var myChart2 = Echarts.init(document.getElementById('echart2'), 'walden');
|
||||
var myChart3 = Echarts.init(document.getElementById('echart3'), 'walden');
|
||||
<!--当天的统计-->
|
||||
optionDay = {
|
||||
title: {
|
||||
text: '当日车牌号统计',
|
||||
subtext: '截止当前时间',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#999',
|
||||
fontWeight: 'normal',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '车牌号统计',
|
||||
type: 'pie',
|
||||
radius: [20,60],
|
||||
center: ['50%', '60%'],
|
||||
itemStyle: {
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
label: {
|
||||
alignTo: 'edge',
|
||||
formatter: '{name|{b}}\n{time|{c} 辆}',
|
||||
minMargin: 5,
|
||||
edgeDistance: 10,
|
||||
lineHeight: 15,
|
||||
rich: {
|
||||
time: {
|
||||
fontSize: 10,
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{value: 335, name: '蓝牌车'},
|
||||
{value: 310, name: '黄牌车'},
|
||||
{value: 234, name: '绿牌车'},
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
<!--本周的统计-->
|
||||
optionWeek = {
|
||||
title: {
|
||||
text: '本周车牌号统计',
|
||||
subtext: '截止当前时间的一周',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data: ['蓝牌车', '黄牌车', '绿牌车']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '访问来源',
|
||||
type: 'pie',
|
||||
radius: '55%',
|
||||
center: ['50%', '60%'],
|
||||
data: [
|
||||
{value: 335, name: '蓝牌车'},
|
||||
{value: 310, name: '黄牌车'},
|
||||
{value: 234, name: '绿牌车'},
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
<!--本月的统计-->
|
||||
optionMonth = {
|
||||
title: {
|
||||
text: '本月车牌号统计',
|
||||
subtext: '截止当前时间的一月',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data: ['蓝牌车', '黄牌车', '绿牌车']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '访问来源',
|
||||
type: 'pie',
|
||||
radius: '55%',
|
||||
center: ['50%', '60%'],
|
||||
data: [
|
||||
{value: 335, name: '蓝牌车'},
|
||||
{value: 310, name: '黄牌车'},
|
||||
{value: 234, name: '绿牌车'},
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
myChart1.setOption(optionDay);
|
||||
myChart2.setOption(optionWeek);
|
||||
myChart3.setOption(optionMonth);
|
||||
|
||||
|
||||
//当月每天车辆数
|
||||
var myChart4 = Echarts.init(document.getElementById('echart4'),'dark')
|
||||
option4 = {
|
||||
|
||||
};
|
||||
myChart4.setOption(option4);
|
||||
|
||||
|
||||
|
||||
$(window).resize(function () {
|
||||
myChart.resize();
|
||||
});
|
||||
|
||||
$(document).on("click", ".btn-refresh", function () {
|
||||
setTimeout(function () {
|
||||
myChart.resize();
|
||||
}, 0);
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
return Controller;
|
||||
})
|
||||
;
|
||||
Reference in New Issue
Block a user