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