|
|
|
@ -12,6 +12,168 @@ export class CriminalRecordsAdminComponent implements OnInit {
|
|
|
|
|
validateForm!: FormGroup; |
|
|
|
|
constructor(private fb: FormBuilder, private router: Router) { } |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
mybarChart: any //柱状图
|
|
|
|
|
baroption = { |
|
|
|
|
xAxis: { |
|
|
|
|
type: 'category', |
|
|
|
|
data: this.getThirtyDays(), |
|
|
|
|
axisLine: { |
|
|
|
|
show: false, |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#91CCFF' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
axisTick: {//刻度线
|
|
|
|
|
show: false |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
yAxis: { |
|
|
|
|
type: 'value', |
|
|
|
|
nameTextStyle: { |
|
|
|
|
color: '#C4E2FC' |
|
|
|
|
}, |
|
|
|
|
splitLine: {//分割线
|
|
|
|
|
lineStyle: { |
|
|
|
|
color: ['#0f4374'], |
|
|
|
|
width: 2 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
axisTick: {//刻度线
|
|
|
|
|
show: false |
|
|
|
|
}, |
|
|
|
|
axisLine: {//轴线
|
|
|
|
|
show: false, |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#C4E2FC' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 100, 101], |
|
|
|
|
type: 'bar', |
|
|
|
|
itemStyle: { |
|
|
|
|
color: { |
|
|
|
|
type: 'linear', |
|
|
|
|
x: 0, |
|
|
|
|
y: 0, |
|
|
|
|
x2: 0, |
|
|
|
|
y2: 1, |
|
|
|
|
colorStops: [{ |
|
|
|
|
offset: 0, color: '#23F0FF' // 0% 处的颜色
|
|
|
|
|
}, { |
|
|
|
|
offset: 1, color: 'rgba(35, 153, 255, 0.1)' // 100% 处的颜色
|
|
|
|
|
}], |
|
|
|
|
global: false // 缺省为 false
|
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
barWidth: '25%' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 100, 101], |
|
|
|
|
type: 'line', |
|
|
|
|
symbol: 'circle', |
|
|
|
|
symbolSize: 8, |
|
|
|
|
itemStyle: { |
|
|
|
|
color: '#fff', |
|
|
|
|
shadowColor: '#fff', |
|
|
|
|
shadowBlur: 10 |
|
|
|
|
}, |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#FFCC8A', |
|
|
|
|
width: 1 |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
grid: { |
|
|
|
|
left: '36px', |
|
|
|
|
right: '30px', |
|
|
|
|
bottom: '50px', |
|
|
|
|
top: '45px' |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
baroption2 = { |
|
|
|
|
xAxis: { |
|
|
|
|
type: 'value', |
|
|
|
|
show: false |
|
|
|
|
}, |
|
|
|
|
yAxis: { |
|
|
|
|
type: 'category', |
|
|
|
|
data: ['北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站'], |
|
|
|
|
axisLine: { |
|
|
|
|
show: false, |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#91CCFF', |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
axisTick: {//刻度线
|
|
|
|
|
show: false |
|
|
|
|
}, |
|
|
|
|
axisLabel: { |
|
|
|
|
formatter: function (value, index) { |
|
|
|
|
// 格式化成月/日,只在第一个刻度显示年份
|
|
|
|
|
return '{s|·}' + `{a|${value}}`; |
|
|
|
|
}, |
|
|
|
|
rich: { |
|
|
|
|
a: { |
|
|
|
|
color: '#C4E2FC', |
|
|
|
|
padding: [0, 0, 0, 8], |
|
|
|
|
}, |
|
|
|
|
s: { |
|
|
|
|
color: '#fff', |
|
|
|
|
borderWidth: 1, |
|
|
|
|
borderColor: '#23D9FF', |
|
|
|
|
backgroundColor: '#fff', |
|
|
|
|
width: 4, |
|
|
|
|
height: 4, |
|
|
|
|
shadowBlur: 3, |
|
|
|
|
shadowColor: "#fff" |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
series: |
|
|
|
|
{ |
|
|
|
|
label: { |
|
|
|
|
// 柱图头部显示值
|
|
|
|
|
show: true, |
|
|
|
|
position: "right", |
|
|
|
|
color: "#fff", |
|
|
|
|
fontSize: 12, |
|
|
|
|
formatter: '{c}', |
|
|
|
|
offset:[6,0] |
|
|
|
|
}, |
|
|
|
|
data: [40, 36, 30, 25, 19, 15, 14, 11, 10, 8].reverse(), |
|
|
|
|
type: 'bar', |
|
|
|
|
itemStyle: { |
|
|
|
|
color: { |
|
|
|
|
type: 'linear', |
|
|
|
|
x: 0, |
|
|
|
|
y: 0, |
|
|
|
|
x2: 1, |
|
|
|
|
y2: 0, |
|
|
|
|
colorStops: [{ |
|
|
|
|
offset: 0, color: '#063d72' // 0% 处的颜色
|
|
|
|
|
}, { |
|
|
|
|
offset: 1, color: '#FF9963' // 100% 处的颜色
|
|
|
|
|
}], |
|
|
|
|
global: false // 缺省为 false
|
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
barWidth: '36%', |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
, |
|
|
|
|
grid: { |
|
|
|
|
left: '138px', |
|
|
|
|
right: '60px', |
|
|
|
|
bottom: '3px', |
|
|
|
|
top: '20px' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
ngOnInit(): void { |
|
|
|
|
this.validateForm = this.fb.group({ |
|
|
|
|
level: [null], |
|
|
|
@ -86,72 +248,9 @@ export class CriminalRecordsAdminComponent implements OnInit {
|
|
|
|
|
// 绘制图表
|
|
|
|
|
myChart.setOption(option); |
|
|
|
|
|
|
|
|
|
let mybarChart = echarts.init(document.getElementById('barchart')); |
|
|
|
|
let baroption = { |
|
|
|
|
xAxis: { |
|
|
|
|
type: 'category', |
|
|
|
|
data: this.getThirtyDays(), |
|
|
|
|
axisLine: { |
|
|
|
|
show: false,
|
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#91CCFF' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
axisTick: {//刻度线
|
|
|
|
|
show: false |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
yAxis: { |
|
|
|
|
type: 'value', |
|
|
|
|
nameTextStyle: { |
|
|
|
|
color: '#C4E2FC' |
|
|
|
|
}, |
|
|
|
|
splitLine: {//分割线
|
|
|
|
|
lineStyle: { |
|
|
|
|
color: ['#0f4374'], |
|
|
|
|
width: 2 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
axisTick: {//刻度线
|
|
|
|
|
show: false |
|
|
|
|
}, |
|
|
|
|
axisLine: {//轴线
|
|
|
|
|
show: false,
|
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#C4E2FC' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 100, 101], |
|
|
|
|
type: 'bar', |
|
|
|
|
itemStyle: { |
|
|
|
|
color: { |
|
|
|
|
type: 'linear', |
|
|
|
|
x: 0, |
|
|
|
|
y: 0, |
|
|
|
|
x2: 0, |
|
|
|
|
y2: 1, |
|
|
|
|
colorStops: [{ |
|
|
|
|
offset: 0, color: '#23F0FF' // 0% 处的颜色
|
|
|
|
|
}, { |
|
|
|
|
offset: 1, color: 'rgba(35, 153, 255, 0.1)' // 100% 处的颜色
|
|
|
|
|
}], |
|
|
|
|
global: false // 缺省为 false
|
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
barWidth: '28%' |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
grid: { |
|
|
|
|
left: '36px', |
|
|
|
|
right: '30px', |
|
|
|
|
bottom: '50px', |
|
|
|
|
top: '45px' |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
mybarChart.setOption(baroption); |
|
|
|
|
this.mybarChart = echarts.init(document.getElementById('barchart')); |
|
|
|
|
|
|
|
|
|
this.mybarChart.setOption(this.baroption); |
|
|
|
|
} |
|
|
|
|
getThirtyDays() { |
|
|
|
|
//获取当前日期
|
|
|
|
@ -203,7 +302,7 @@ export class CriminalRecordsAdminComponent implements OnInit {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
list: any = [1,1,1,1,1,1,1,1,1,1,1,1] |
|
|
|
|
list: any = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1] |
|
|
|
|
look() { |
|
|
|
|
this.router.navigate(['home/records/petrolStation']) |
|
|
|
|
} |
|
|
|
@ -211,10 +310,18 @@ export class CriminalRecordsAdminComponent implements OnInit {
|
|
|
|
|
|
|
|
|
|
selectedType = '分布' |
|
|
|
|
selectedRankingType = '站点排名' |
|
|
|
|
echartClick(type){ |
|
|
|
|
echartClick(type) { |
|
|
|
|
this.selectedType = type |
|
|
|
|
this.mybarChart.dispose() |
|
|
|
|
this.mybarChart = echarts.init(document.getElementById('barchart')); |
|
|
|
|
if(type == '排名'){ |
|
|
|
|
this.mybarChart.setOption(this.baroption2); |
|
|
|
|
}else{ |
|
|
|
|
this.mybarChart.setOption(this.baroption); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
echartClick2(type){ |
|
|
|
|
echartClick2(type) { |
|
|
|
|
this.selectedRankingType = type |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|