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;
|
|||
|
|
})
|
|||
|
|
;
|