diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts
index de4bf9a..635b463 100644
--- a/src/app/pages/home/home.component.ts
+++ b/src/app/pages/home/home.component.ts
@@ -228,13 +228,13 @@ export class HomeComponent implements OnInit {
return name + ' ' + target;
}
},
- //提示框
- tooltip: {
- trigger: 'item',
- formatter: '{b}:{c}份
占比:{d}%'
- },
- // 数据
- series: [{
+ //提示框
+ tooltip: {
+ trigger: 'item',
+ formatter: '{b}:{c}份
占比:{d}%'
+ },
+ // 数据
+ series: [{
type: 'pie',
center: ['55%', '55%'],
radius: ['25%', '60%'],
@@ -290,47 +290,48 @@ export class HomeComponent implements OnInit {
},
},
},
- data: [{
- value: 4128,
- name: '高层建筑'
- },
- {
- value: 1566,
- name: '地下建筑'
- },
-
- {
- value:1895,
- name: '地铁类'
- },
-
- {
- value:2112,
- name: '人员密集场所'
- },
- {
- value: 3008,
- name: '石油化工类'
- },
-
- {
- value: 2456,
- name: '大型城市综合体'
- },
- {
- value: 3522,
- name: '仓库、堆垛、厂房'
- },
- {
- value: 1421,
- name: '隧道'
- },
- {
- value: 2622,
- name: '其他'
- }
- ],
- }],
+ data: [
+ {
+ value: 4128,
+ name: '高层建筑'
+ },
+ {
+ value: 1566,
+ name: '地下建筑'
+ },
+
+ {
+ value:1895,
+ name: '地铁类'
+ },
+
+ {
+ value:2112,
+ name: '人员密集场所'
+ },
+ {
+ value: 3008,
+ name: '石油化工类'
+ },
+
+ {
+ value: 2456,
+ name: '大型城市综合体'
+ },
+ {
+ value: 3522,
+ name: '仓库、堆垛、厂房'
+ },
+ {
+ value: 1421,
+ name: '隧道'
+ },
+ {
+ value: 2622,
+ name: '其他'
+ }
+ ],
+ }],
};
data03:any = [
{
diff --git a/src/app/statistic-analysis/state/page-two-name/page-two-name.component.html b/src/app/statistic-analysis/state/page-two-name/page-two-name.component.html
index 1332578..ca6a914 100644
--- a/src/app/statistic-analysis/state/page-two-name/page-two-name.component.html
+++ b/src/app/statistic-analysis/state/page-two-name/page-two-name.component.html
@@ -1 +1,31 @@
-
page-two-name works!
+
\ No newline at end of file
diff --git a/src/app/statistic-analysis/state/page-two-name/page-two-name.component.scss b/src/app/statistic-analysis/state/page-two-name/page-two-name.component.scss
index e69de29..93b47ee 100644
--- a/src/app/statistic-analysis/state/page-two-name/page-two-name.component.scss
+++ b/src/app/statistic-analysis/state/page-two-name/page-two-name.component.scss
@@ -0,0 +1,16 @@
+.echartsBox{
+ width: 100%;
+ height: 100%;
+ #pie{
+ width: 100%;
+ height: 450px;
+ }
+ .histogramBox{
+ width: 100%;
+ .echart-item{
+ display: inline-block;
+ width: 50%;
+ height: 330px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/app/statistic-analysis/state/page-two-name/page-two-name.component.ts b/src/app/statistic-analysis/state/page-two-name/page-two-name.component.ts
index ffb20d1..30706a1 100644
--- a/src/app/statistic-analysis/state/page-two-name/page-two-name.component.ts
+++ b/src/app/statistic-analysis/state/page-two-name/page-two-name.component.ts
@@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core';
-
+import { Router,ActivatedRoute } from '@angular/router'
+declare var echarts: any;
@Component({
selector: 'app-page-two-name',
templateUrl: './page-two-name.component.html',
@@ -7,9 +8,306 @@ import { Component, OnInit } from '@angular/core';
})
export class PageTwoNameComponent implements OnInit {
- constructor() { }
+ constructor(private router:Router,private route:ActivatedRoute) { }
ngOnInit(): void {
+ setTimeout(() => {
+ this.planState()
+ this.planAdd()
+ this.passPlanEchart()
+ this.planMake()
+ this.planBack()
+ this.planAudit()
+ }, 0);
+
+ }
+ axisLabel = {
+ interval: 0,
+ formatter:function(value)
+ {
+ var ret = "";//拼接加\n返回的类目项
+ var maxLength = 2;//每项显示文字个数
+ var valLength = value.length;//X轴类目项的文字个数
+ var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
+ if (rowN > 1)//如果类目项的文字大于3,
+ {
+ for (var i = 0; i < rowN; i++) {
+ var temp = "";//每次截取的字符串
+ var start = i * maxLength;//开始截取的位置
+ var end = start + maxLength;//结束截取的位置
+ //这里也可以加一个是否是最后一行的判断,但是不加也没有影响,那就不加吧
+ temp = value.substring(start, end) + "\n";
+ ret += temp; //凭借最终的字符串
+ }
+ return ret;
+ }
+ else {
+ return value;
+ }
+ }
+ }//echarts两个字换行
+ zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"]
+ zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70]
+ //预案新增统计
+ planAdd () {
+ let _this = this
+ var addEchart = echarts.init(document.getElementById('addEchart'));
+ var option = {
+ title: {
+ text: "预案新增",
+ left: "center",
+ top: "15",
+ textStyle: {
+ fontSize: 23
+ }
+ },
+ xAxis: {
+ type: 'category',
+ data: this.zhiNameData,
+ axisLabel: this.axisLabel
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [{
+ data: this.zhiNumData,
+ type: 'bar',
+ showBackground: true,
+ backgroundStyle: {
+ color: 'rgba(220, 220, 220, 0.8)'
+ },
+ barWidth :'28'
+
+ }]
+ };
+ addEchart.setOption(option);
+ addEchart.on('click', function (params) {
+ _this.router.navigate(['/statisticanalysis/statePageTwo_details'],{queryParams:{'name':"预案新增"}})
+ });
+ }
+ //审核通过
+ passPlanEchart (){
+ let _this = this
+ var passPlanEchart = echarts.init(document.getElementById('passPlanEchart'));
+ var option = {
+ title: {
+ text: "预案审核通过",
+ left: "center",
+ top: "15",
+ textStyle: {
+ fontSize: 23
+ }
+ },
+ xAxis: {
+ type: 'category',
+ data: this.zhiNameData,
+ axisLabel: this.axisLabel
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [{
+ data: this.zhiNumData,
+ type: 'bar',
+ showBackground: true,
+ backgroundStyle: {
+ color: 'rgba(220, 220, 220, 0.8)'
+ },
+ barWidth :'28'
+ }]
+ };
+ passPlanEchart.setOption(option);
+ passPlanEchart.on('click', function (params) {
+ _this.router.navigate(['/statisticanalysis/statePageTwo_details'],{queryParams:{'name':"预案审核通过"}})
+ });
+ }
+
+ //预案编制
+ planMake (){
+ let _this = this
+ var passMakeEchart = echarts.init(document.getElementById('planMake'));
+ var option = {
+ title: {
+ text: "预案编制",
+ left: "center",
+ top: "15",
+ textStyle: {
+ fontSize: 23
+ }
+ },
+ xAxis: {
+ type: 'category',
+ data: this.zhiNameData,
+ axisLabel: this.axisLabel
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [{
+ data: this.zhiNumData,
+ type: 'bar',
+ showBackground: true,
+ backgroundStyle: {
+ color: 'rgba(220, 220, 220, 0.8)'
+ },
+ barWidth :'28'
+ }]
+ };
+ passMakeEchart.setOption(option);
+ passMakeEchart.on('click', function (params) {
+ _this.router.navigate(['/statisticanalysis/statePageTwo_details'],{queryParams:{'name':"预案编制"}})
+ });
}
+ //预案退回
+ planBack (){
+ let _this = this
+ var passBackEchart = echarts.init(document.getElementById('planBack'));
+ var option = {
+ title: {
+ text: "预案审核退回",
+ left: "center",
+ top: "15",
+ textStyle: {
+ fontSize: 23
+ }
+ },
+ xAxis: {
+ type: 'category',
+ data: this.zhiNameData,
+ axisLabel: this.axisLabel
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [{
+ data: this.zhiNumData,
+ type: 'bar',
+ showBackground: true,
+ backgroundStyle: {
+ color: 'rgba(220, 220, 220, 0.8)'
+ },
+ barWidth :'28'
+ }]
+ };
+ passBackEchart.setOption(option);
+ passBackEchart.on('click', function (params) {
+ _this.router.navigate(['/statisticanalysis/statePageTwo_details'],{queryParams:{'name':"预案审核退回"}})
+ });
+ }
+
+ //预案审核中
+ planAudit (){
+ let _this = this
+ var planAuditEchart = echarts.init(document.getElementById('planAudit'));
+ var option = {
+ title: {
+ text: "预案审核中",
+ left: "center",
+ top: "15",
+ textStyle: {
+ fontSize: 23
+ }
+ },
+ xAxis: {
+ type: 'category',
+ data: this.zhiNameData,
+ axisLabel: this.axisLabel
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [{
+ data: this.zhiNumData,
+ type: 'bar',
+ showBackground: true,
+ backgroundStyle: {
+ color: 'rgba(220, 220, 220, 0.8)'
+ },
+ barWidth :'28'
+ }]
+ };
+ planAuditEchart.setOption(option);
+ planAuditEchart.on('click', function (params) {
+
+ _this.router.navigate(['/statisticanalysis/statePageTwo_details'],{queryParams:{'name':"预案审核中"}})
+ });
+ }
+ //预案状态统计
+ planState(){
+ var shuju='[{"name":"浦东支队","number":"23","zhanbi":"21%"},{"name":"浦东支队","number":"23","zhanbi":"21%"},{"name":"浦东支队","number":"23","zhanbi":"21%"},{"name":"浦东支队","number":"23","zhanbi":"21%"},{"name":"浦东支队","number":"23","zhanbi":"21%"}]';
+ var jsonObj = JSON.parse(shuju);
+ var passPlanEchart = echarts.init(document.getElementById('pie'));
+ var option = {
+ title: {
+ text: '预案状态统计(7005份)',
+ left: 'center',
+ top: "11%",
+ textStyle: {
+ fontSize: 23
+ }
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: function (params){
+ var res = '预案补充'
+ res+='
';
+ res+='';
+ res+='名称 | ';
+ res+='数量 | '
+ res+='总占比 | '
+ res+='
'
+ res+='';
+ console.log(jsonObj)
+ for(var i=0;i'
+ res+=''+jsonObj[i].name+' | '
+ res+=''+jsonObj[i].number+' | '
+ res+=''+jsonObj[i].zhanbi+' | '
+ }
+ res+=''
+ res+='
'
+ return res
+ }
+
+ },
+ legend: {
+ orient: 'vertical',
+ right: '23%',
+ top: "26%",
+ data: ['预案新增', '预案审核通过', '预案编制', '预案审核退回', '预案审核中']
+ },
+ series: [
+ {
+ name: '访问来源',
+ type: 'pie',
+ radius: '60%',
+ center: ['50%', '60%'],
+ data: [
+ {value: 1585, name: '预案新增'},
+ {value: 2000, name: '预案审核通过'},
+ {value: 2600, name: '预案编制'},
+ {value: 1500, name: '预案审核退回'},
+ {value: 1800, name: '预案审核中'}
+ ],
+ label: {
+ formatter: '{b}({c}份)\n{d|{d}%}',
+ rich: {
+ d: {
+ align: 'center',
+ }
+ },
+ },
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ }
+ }
+ }
+ ]
+ }
+ passPlanEchart.setOption(option);
+ }
}
diff --git a/src/app/statistic-analysis/state/page-two-time/echarts.html b/src/app/statistic-analysis/state/page-two-time/echarts.html
index 15d7322..9f63ef7 100644
--- a/src/app/statistic-analysis/state/page-two-time/echarts.html
+++ b/src/app/statistic-analysis/state/page-two-time/echarts.html
@@ -1,7 +1,7 @@
-
-
-
-
-
-
-
\ No newline at end of file
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/app/statistic-analysis/state/page-two-time/page-two-time.component.html b/src/app/statistic-analysis/state/page-two-time/page-two-time.component.html
index 6db6075..b56df0a 100644
--- a/src/app/statistic-analysis/state/page-two-time/page-two-time.component.html
+++ b/src/app/statistic-analysis/state/page-two-time/page-two-time.component.html
@@ -1,7 +1,7 @@