797 lines
29 KiB
JavaScript
797 lines
29 KiB
JavaScript
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;
|
||
})
|
||
;
|