From 29a3a1a46ec67aaa99ec51e90c906d38bbe1502a Mon Sep 17 00:00:00 2001 From: chenjingyu Date: Thu, 10 Sep 2020 10:52:19 +0800 Subject: [PATCH] =?UTF-8?q?[=E7=BB=BC=E5=90=88=E5=88=86=E6=9E=90]=E6=89=80?= =?UTF-8?q?=E6=9C=89=E9=A1=B5=E9=9D=A2=E4=B8=BB=E9=A2=98=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../add-unit-one/add-unit-one.component.ts | 18 +- .../add-unit-three-bar-details.component.scss | 2 +- .../add-unit-three-bar-details.component.ts | 82 ++- .../add-unit-two-time.component.html | 12 +- .../add-unit-two-time.component.scss | 21 +- .../add-unit-two-time.component.ts | 30 +- .../add-unit-two-type-details.component.html | 11 +- .../add-unit-two-type-details.component.scss | 15 +- .../add-unit-two-type-details.component.ts | 80 ++- ...dd-unit-two-type-statistics.component.html | 14 +- ...dd-unit-two-type-statistics.component.scss | 13 +- .../add-unit-two-type-statistics.component.ts | 127 ++--- .../building-type-one.component.ts | 19 +- ...building-type-three-details.component.html | 11 +- ...building-type-three-details.component.scss | 24 +- .../building-type-three-details.component.ts | 77 ++- .../building-type-two-forward.component.html | 15 +- .../building-type-two-forward.component.scss | 5 +- .../building-type-two-forward.component.ts | 143 ++--- .../building-type-two-reverse.component.ts | 127 ++--- .../delete-four/delete-four.component.scss | 2 +- .../delete-four/delete-four.component.ts | 69 ++- .../delete-one/delete-one.component.ts | 25 +- .../delete-there-line-details.component.scss | 17 +- .../delete-there-line-details.component.ts | 51 +- .../delete-there/delete-there.component.scss | 2 +- .../delete-there/delete-there.component.ts | 175 +++--- .../delete-two/delete-two.component.html | 60 +- .../delete-two/delete-two.component.scss | 119 +--- .../delete-two/delete-two.component.ts | 63 +-- .../echarts-data.service.ts | 114 +++- .../statistic-analysis/home/home.component.ts | 7 +- .../scheduled-updates/publicEcharts.html | 12 +- .../scheduled-updates.component.ts | 95 ++-- .../scheduled-updates/verified.html | 12 +- .../state/page-one/page-one.component.ts | 21 +- .../page-two-name.component.html | 10 +- .../page-two-name.component.scss | 1 + .../page-two-name/page-two-name.component.ts | 224 ++++---- .../page-two-time.component.html | 14 +- .../page-two-time/page-two-time.component.ts | 106 +++- .../page-zhong-dui-details.component.scss | 2 +- .../page-zhong-dui-details.component.ts | 75 ++- src/assets/chartstheme/walden.js | 512 ++++++++++++++++++ src/assets/chartstheme/walden.project.json | 167 ++++++ 45 files changed, 1895 insertions(+), 906 deletions(-) create mode 100644 src/assets/chartstheme/walden.js create mode 100644 src/assets/chartstheme/walden.project.json diff --git a/src/app/statistic-analysis/addUnit/add-unit-one/add-unit-one.component.ts b/src/app/statistic-analysis/addUnit/add-unit-one/add-unit-one.component.ts index 7d30c8e..9d1acc1 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-one/add-unit-one.component.ts +++ b/src/app/statistic-analysis/addUnit/add-unit-one/add-unit-one.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; +import {EchartsDataService,} from '../../echarts-data.service'; declare var echarts: any; @Component({ selector: 'app-add-unit-one', @@ -8,7 +9,7 @@ declare var echarts: any; }) export class AddUnitOneComponent implements OnInit { - constructor(private router: Router) { } + constructor(private router: Router,public echartsData:EchartsDataService) { } setTimeoutObj//延时器需要清除 @@ -28,7 +29,7 @@ export class AddUnitOneComponent implements OnInit { indexBzt//首页饼状图实例 /* 首页饼状图 */ initCharts(){ - this.indexBzt = echarts.init(document.getElementById('indexBzt')); + this.indexBzt = echarts.init(document.getElementById('indexBzt'),'walden'); let options={ title: { text: '新增单位统计(8900家)', @@ -41,16 +42,17 @@ export class AddUnitOneComponent implements OnInit { tooltip: { trigger: 'item', formatter: (params)=>{ - return this.biaogeTishi(params.name) - }, - backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 - borderWidth:'1', - borderRadius :'0' + return this.echartsData.biaogeTishiZhi(params.name) + } }, legend: { orient: 'vertical', right: 150, top:80, + textStyle:{ + fontSize:18, + color:"#000000" + }, data: ['高层', '地下', '轨道交通', '化工生产', '储罐类' , '厂房','古建筑', '商市场', '医院', '学校', '宾馆' , '娱乐场所','餐饮业', '影剧院', '展览建筑' , '隧道'] }, series: [ @@ -61,7 +63,7 @@ export class AddUnitOneComponent implements OnInit { center: ['50%', '53%'], label:{ show:true, - fontSize:13, + fontSize:18, formatter:'{b}{c}家\n{d|({d}%)}', rich: { d: { diff --git a/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.scss b/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.scss index ed72dc3..5bedfb2 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.scss +++ b/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.scss @@ -67,7 +67,7 @@ overflow: auto; #barEchart{ width: 100%; - height: 350px; + height: 550px; position: absolute; left: 50%; top: 50%; diff --git a/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.ts b/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.ts index 70f4843..66a3862 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.ts +++ b/src/app/statistic-analysis/addUnit/add-unit-three-bar-details/add-unit-three-bar-details.component.ts @@ -21,10 +21,12 @@ export class AddUnitThreeBarDetailsComponent implements OnInit { ngOnInit(): void { this.dateInit () + this.route.queryParams.subscribe(params => { this.time = params['time']; this.buildingTypeName = params['buildingTpye']; this.level = params['level']; + this.bianli() }); this.setTimeoutObj = window.setTimeout(()=>{ this.detailEcharts() @@ -68,51 +70,87 @@ export class AddUnitThreeBarDetailsComponent implements OnInit { } }//柱状图数值顶部显示 zhongNameData = ["浦东中队","黄埔中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"] - zhongNumData = [200,190,180,170,160,150,140,130,120,110,100] + zhongNumData = [300,290,280,270,260,250,240,230,220,210,200] zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队"] zhiNumData = [300,290,280,270,260,250,240,230,220,210,200] - + tiaoshiPao:any + //气泡提示数据获取 + bianli(){ + this.tiaoshiPao=null + var arrshuzu='['; + if(this.level == 'zhidui'){ + for(var i=0;i{ return this.tableTooltip(params) }, - backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 - borderWidth:'1', - borderRadius :'0', position:this.serviceData.tableTooltipNoShow2 }, series: [{ data: this.zhiNumData, type: 'bar', - showBackground: true, + markPoint: { + symbolSize:[65, 65], + data: this.tiaoshiPao + }, barWidth :'58', backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' }, - label: this.topTextlabel + //label: this.topTextlabel }] }; @@ -155,23 +193,23 @@ export class AddUnitThreeBarDetailsComponent implements OnInit { {name:params.name,number:params.value,zhanbi:(params.value/1340 * 100).toFixed(2) + "%"} ] } - var res = '
'+params.name+'
' - res+='
'; - res+=''; - res+=''; - res+='' - res+='' + var res = '
'+params.name+'
' + res+='
名称数量总占比
'; + res+=''; + res+=''; + res+='' + res+='' res+='' res+=''; for(var i=0;i' - res+='' - res+='' + res+='' + res+='' + res+='' } res+='' - // res+='' + res+='' res+='
名称数量总占比
'+data[i].number+''+data[i].zhanbi+'
'+data[i].name+''+data[i].number+''+data[i].zhanbi+'
总计135619%
总计135619%
' return res } diff --git a/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.html b/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.html index 91c0fd8..7f4c0ed 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.html +++ b/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.html @@ -1,3 +1,11 @@ +
@@ -60,8 +68,8 @@
-->
- - + +
diff --git a/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.scss b/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.scss index a09ebfa..72ca5fc 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.scss +++ b/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.scss @@ -46,18 +46,17 @@ } } .btnbox{ - height: 80px; display: flex; - flex-direction:column; - justify-content: space-around; - position: fixed; - top: 64px; - right: 4%; - width: 88px; - button{ - width: 88px; - height: 36px; - } + flex-direction:row-reverse; + //float: right; + justify-content: center; + align-items: center; + height: 100%; + button{ + width: 88px; + height: 36px; + } + margin-right:4%; } } diff --git a/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.ts b/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.ts index 424f308..d8ea4f9 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.ts +++ b/src/app/statistic-analysis/addUnit/add-unit-two-time/add-unit-two-time.component.ts @@ -20,6 +20,7 @@ export class AddUnitTwoTimeComponent implements OnInit { setTimeoutObj//延时器需要清除 ngOnInit(): void { this.dateInit () + this.bianli() this.setTimeoutObj = setTimeout(() => { this.oneInit (this.date,this.dateNum) this.twoInit (this.date,this.dateNum,'month') @@ -133,6 +134,19 @@ export class AddUnitTwoTimeComponent implements OnInit { date = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'] dateNum = [270, 253, 244, 199, 189, 173, 160, 198,200] + tiaoshiPao:any + //气泡提示数据获取 + bianli(){ + var arrshuzu='['; + for(var i=0;i{ return this.serviceData.tableTooltip(this.serviceData.buildingType,params[0].name) }, @@ -207,6 +218,11 @@ export class AddUnitTwoTimeComponent implements OnInit { series: [{ name: '新增数量', type: 'line', + markPoint: { + + symbolSize:[65, 65], + data: this.tiaoshiPao + }, data: dateNum, } ], @@ -239,9 +255,6 @@ export class AddUnitTwoTimeComponent implements OnInit { //提示框 tooltip: { trigger: 'axis', - backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 - borderWidth:'1', - borderRadius :'0', formatter: (params)=>{ if(params[0].seriesName == "year"){ return this.serviceData.tableTooltip(this.serviceData.monthTooltip,params[0].name) @@ -288,6 +301,11 @@ export class AddUnitTwoTimeComponent implements OnInit { series: [{ name: typeName, type: 'line', + markPoint: { + + symbolSize:[65, 65], + data: this.tiaoshiPao + }, data: dateNum, } ], diff --git a/src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.html b/src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.html index 8b8182f..c82a174 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.html +++ b/src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.html @@ -1,8 +1,15 @@ +
- - +
diff --git a/src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.scss b/src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.scss index 9246bae..067157b 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.scss +++ b/src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.scss @@ -11,18 +11,17 @@ min-height: 80px; border-bottom: 1px gray solid; .btnbox{ - height: 80px; display: flex; - flex-direction:column; - justify-content: space-around; - position: fixed; - top: 64px; - right: 4%; - width: 88px; + flex-direction:row-reverse; + float: right; + justify-content: center; + align-items: center; + height: 100%; button{ width: 88px; height: 36px; } + margin-right:4%; } } @@ -32,7 +31,7 @@ overflow: auto; #barEchart{ width: 100%; - height: 350px; + height: 550px; position: absolute; left: 50%; top: 50%; diff --git a/src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.ts b/src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.ts index b3cf3f9..9bd327e 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.ts +++ b/src/app/statistic-analysis/addUnit/add-unit-two-type-details/add-unit-two-type-details.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { ActivatedRoute } from '@angular/router'; +import {EchartsDataService} from '../../echarts-data.service'; declare var echarts: any; @Component({ selector: 'app-add-unit-two-type-details', @@ -9,18 +10,24 @@ declare var echarts: any; }) export class AddUnitTwoTypeDetailsComponent implements OnInit { - constructor(public route: ActivatedRoute,private router: Router) { } + constructor(public route: ActivatedRoute,private router: Router,public echartsData:EchartsDataService) { } forward(){ this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type']) } reverse(){ this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time']) } + //返回 + goBack () { + history.go(-1) + this.echartsData.statefulInspectionToggle = true + } organizationName:String buildingTypeName:String setTimeoutObj//延时器需要清除 ngOnInit(): void { + this.bianli() this.route.queryParams.subscribe(params => { this.organizationName = params['organizationName']; this.buildingTypeName = params['buildingTypeName']; @@ -46,44 +53,73 @@ export class AddUnitTwoTypeDetailsComponent implements OnInit { }//柱状图数值顶部显示 zhongNameData = ["浦东中队","黄埔中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"] zhongNumData = [200,190,180,170,160,150,140,130,120,110,100] + tiaoshiPao:any + //气泡提示数据获取 + bianli(){ + var arrshuzu='['; + for(var i=0;i{ return this.tableTooltip(params) - }, - backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 - borderWidth:'1', - borderRadius :'0' + } }, series: [{ data: this.zhongNumData, type: 'bar', - showBackground: true, - barWidth :'58', + markPoint: { + symbolSize:[65, 65], + data: this.tiaoshiPao + }, + barWidth :'38', backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' }, - label: this.topTextlabel + //label: this.topTextlabel }] }; this.detailPlanEchart.setOption(option); @@ -94,19 +130,19 @@ export class AddUnitTwoTypeDetailsComponent implements OnInit { var data = [ {name:params.name,number:params.value,zhanbi:(params.value/1340 * 100).toFixed(2) + "%"} ] - var res = '
'+params.name+'
' - res+='
'; - res+=''; - res+=''; - res+='' - res+='' + var res = '
'+params.name+'
' + res+='
名称数量总占比
'; + res+=''; + res+=''; + res+='' + res+='' res+='' res+=''; for(var i=0;i' - res+='' - res+='' + res+='' + res+='' + res+='' } res+='' diff --git a/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.html b/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.html index af237b6..e366b59 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.html +++ b/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.html @@ -1,15 +1,23 @@ +
- - + +
-
+
diff --git a/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.scss b/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.scss index 52ab7a7..7ff4670 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.scss +++ b/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.scss @@ -11,18 +11,17 @@ min-height: 80px; border-bottom: 1px gray solid; .btnbox{ - height: 80px; display: flex; - flex-direction:column; - justify-content: space-around; - position: fixed; - top: 64px; - right: 4%; - width: 88px; + flex-direction:row-reverse; + float: right; + justify-content: center; + align-items: center; + height: 100%; button{ width: 88px; height: 36px; } + margin-right:4%; } } diff --git a/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.ts b/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.ts index 92e2b58..e1ae705 100644 --- a/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.ts +++ b/src/app/statistic-analysis/addUnit/add-unit-two-type-statistics/add-unit-two-type-statistics.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; +import {EchartsDataService} from '../../echarts-data.service'; declare var echarts: any; @Component({ selector: 'app-add-unit-two-type-statistics', @@ -8,7 +9,7 @@ declare var echarts: any; }) export class AddUnitTwoTypeStatisticsComponent implements OnInit { - constructor(private router: Router) { } + constructor(private router: Router,public data:EchartsDataService) { } forward(){ this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_type']) @@ -20,6 +21,7 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit { setTimeoutObj//延时器需要清除 ngOnInit(): void { this.setTimeoutObj = window.setTimeout(()=>{ + this.bianli() this.initCharts() this.barEcharts() },0) @@ -36,6 +38,10 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit { axisLabel = { interval: 0, + textStyle:{ + fontSize :16, + color:'#000000' + }, formatter:function(value) { var ret = "";//拼接加\n返回的类目项 @@ -105,6 +111,19 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit { {name:"崇明中队",number:"55",zhanbi:"0.3%"} ] zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"] zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70] + tiaoshiPao:any + //气泡提示数据获取 + bianli(){ + var arrshuzu='['; + for(var i=0;i{ return this.tableTooltip(this.tableDataZhi,params.name) }, - backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 - borderWidth:'1', - borderRadius :'0', - position: function (point, params, dom, rect, size) { - // 鼠标坐标和提示框位置的参考坐标系是:以外层div的左上角那一点为原点,x轴向右,y轴向下 - // 提示框位置 - var x = 0; // x坐标位置 - var y = 0; // y坐标位置 - - // 当前鼠标位置 - var pointX = point[0]; - var pointY = point[1]; - - // 外层div大小 - // var viewWidth = size.viewSize[0]; - // var viewHeight = size.viewSize[1]; - - // 提示框大小 - var boxWidth = size.contentSize[0]; - var boxHeight = size.contentSize[1]; - - // boxWidth > pointX 说明鼠标左边放不下提示框 - if (boxWidth > pointX) { - x = 35; - } else { // 左边放的下 - x = pointX + 80; - } - - // boxHeight > pointY 说明鼠标上边放不下提示框 - if (boxHeight > pointY) { - y = 65; - } else { // 上边放得下 - y = pointY - boxHeight; - } - - return [pointX, pointY]; - } + position: this.data.tableTooltipNoShow2 }, legend: { orient: 'vertical', right: 150, top:80, + textStyle:{ + fontSize:18, + color:"#000000" + }, data: ['高层', '地下', '轨道交通', '化工生产', '储罐类' , '厂房','古建筑', '商市场', '医院', '学校', '宾馆' , '娱乐场所','餐饮业', '影剧院', '展览建筑' , '隧道'] }, series: [ @@ -191,7 +178,7 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit { center: ['50%', '60%'], label:{ show:true, - fontSize:13, + fontSize:16, formatter:'{b}{c}家\n{d|({d}%)}', rich: { d: { @@ -236,12 +223,13 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit { barEcharts(){ this.forArr.forEach(item=>{ let _this = this - item.echart = echarts.init(document.getElementById(item.id)); + item.echart = echarts.init(document.getElementById(item.id),'walden'); let option = { title: { - text: item.name, + text: item.name+':总数(1024)', left: "center", - top: "15", + top: "0", + //bottom: '80%', textStyle: { fontSize: 23 } @@ -252,26 +240,26 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit { axisLabel: this.axisLabel }, yAxis: { - type: 'value' + type: 'value', + axisLabel:this.axisLabel, }, tooltip: { trigger: 'item', formatter: (params)=>{ return this.tableTooltip(this.tableDataZhong,params.name) - }, - backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 - borderWidth:'1', - borderRadius :'0' + } }, series: [{ data: this.zhiNumData, type: 'bar', - showBackground: true, + markPoint: { + data: this.tiaoshiPao + }, backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' }, barWidth :'28', - label: this.topTextlabel + //label: this.topTextlabel }] }; item.echart.setOption(option); @@ -284,25 +272,26 @@ export class AddUnitTwoTypeStatisticsComponent implements OnInit { //提示框表格 tableTooltip(dataArr,title:string){ let data = dataArr - var res = '
'+title+'
' - res+='
名称数量总占比
'+data[i].number+''+data[i].zhanbi+'
'+data[i].name+''+data[i].number+''+data[i].zhanbi+'
'; - res+=''; - res+=''; - res+='' - res+='' - res+='' - res+=''; - for(var i=0;i' - res+='' - res+='' - } - - res+='' - res+='' - res+='
名称数量总占比
'+data[i].number+''+data[i].zhanbi+'
总计135619%
' - return res + var res = '
'+title+'
' + res+='
'; + res+=''; + res+=''; + res+='' + res+='' + res+='' + res+=''; + //var res='
'+biaotou+'
' + for(var i=0;i' + res+='
' + res+='' + } + + res+='' + res+='' + res+='
名称数量总占比
'+this.tableDataZhong[i].number+''+this.tableDataZhong[i].zhanbi+'
总计135619%
' + return res } } diff --git a/src/app/statistic-analysis/buildingType/building-type-one/building-type-one.component.ts b/src/app/statistic-analysis/buildingType/building-type-one/building-type-one.component.ts index 15595a2..53e4bfa 100644 --- a/src/app/statistic-analysis/buildingType/building-type-one/building-type-one.component.ts +++ b/src/app/statistic-analysis/buildingType/building-type-one/building-type-one.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; +import {EchartsDataService,} from '../../echarts-data.service' declare var echarts: any; @Component({ selector: 'app-building-type-one', @@ -8,7 +9,7 @@ declare var echarts: any; }) export class BuildingTypeOneComponent implements OnInit { - constructor(private router: Router) { } + constructor(private router: Router,public echartsData:EchartsDataService) { } ngOnInit(): void { window.setTimeout(()=>{ @@ -22,7 +23,7 @@ export class BuildingTypeOneComponent implements OnInit { /* 首页饼状图 */ indexBzt initCharts(){ - this.indexBzt = echarts.init(document.getElementById('indexBzt')); + this.indexBzt = echarts.init(document.getElementById('indexBzt'),'walden'); let options={ title: { text: '建筑类型统计(8900家)', @@ -34,17 +35,19 @@ export class BuildingTypeOneComponent implements OnInit { }, tooltip: { trigger: 'item', + position: this.echartsData.tableTooltipNoShow2, formatter: (params)=>{ - return this.biaogeTishi(params.name) - }, - backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 - borderWidth:'1', - borderRadius :'0' + return this.echartsData.biaogeTishiZhi(params.name) + } }, legend: { orient: 'vertical', right: 150, top:80, + textStyle:{ + fontSize:18, + color:"#000000" + }, data: ['高层', '地下', '轨道交通', '化工生产', '储罐类' , '厂房','古建筑', '商市场', '医院', '学校', '宾馆' , '娱乐场所','餐饮业', '影剧院', '展览建筑' , '隧道'] }, series: [ @@ -55,7 +58,7 @@ export class BuildingTypeOneComponent implements OnInit { center: ['50%', '53%'], label:{ show:true, - fontSize:13, + fontSize:16, formatter:'{b}{c}家\n{d|({d}%)}', rich: { d: { diff --git a/src/app/statistic-analysis/buildingType/building-type-three-details/building-type-three-details.component.html b/src/app/statistic-analysis/buildingType/building-type-three-details/building-type-three-details.component.html index 14f2882..d582ab3 100644 --- a/src/app/statistic-analysis/buildingType/building-type-three-details/building-type-three-details.component.html +++ b/src/app/statistic-analysis/buildingType/building-type-three-details/building-type-three-details.component.html @@ -1,8 +1,15 @@ +
- - +
diff --git a/src/app/statistic-analysis/buildingType/building-type-three-details/building-type-three-details.component.scss b/src/app/statistic-analysis/buildingType/building-type-three-details/building-type-three-details.component.scss index 98f42c4..9a84115 100644 --- a/src/app/statistic-analysis/buildingType/building-type-three-details/building-type-three-details.component.scss +++ b/src/app/statistic-analysis/buildingType/building-type-three-details/building-type-three-details.component.scss @@ -10,16 +10,18 @@ height: 80px; border-bottom: 1px gray solid; .btnbox{ - display: flex; - flex-direction:column; - float: right; - justify-content: space-around; - height: 100%; - button{ - width: 88px; - height: 36px; - } - margin-right:4%; + height: 80px; + display: flex; + flex-direction:column; + justify-content: space-around; + position: fixed; + top: 64px; + right: 4%; + width: 88px; + button{ + width: 88px; + height: 36px; + } } } .echartsbox{ @@ -28,7 +30,7 @@ overflow: auto; #barEchart{ width: 100%; - height: 350px; + height: 550px; position: absolute; left: 50%; top: 50%; diff --git a/src/app/statistic-analysis/buildingType/building-type-three-details/building-type-three-details.component.ts b/src/app/statistic-analysis/buildingType/building-type-three-details/building-type-three-details.component.ts index 6a22850..be484f1 100644 --- a/src/app/statistic-analysis/buildingType/building-type-three-details/building-type-three-details.component.ts +++ b/src/app/statistic-analysis/buildingType/building-type-three-details/building-type-three-details.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { ActivatedRoute } from '@angular/router'; +import {EchartsDataService} from '../../echarts-data.service'; declare var echarts: any; @Component({ selector: 'app-building-type-three-details', @@ -9,19 +10,25 @@ declare var echarts: any; }) export class BuildingTypeThreeDetailsComponent implements OnInit { - constructor(public route: ActivatedRoute,private router: Router) { } + constructor(public route: ActivatedRoute,private router: Router,public echartsData:EchartsDataService) { } forward(){ this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_forward']) } reverse(){ this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_reverse']) } + //返回 + goBack () { + history.go(-1) + this.echartsData.statefulInspectionToggle = true + } organizationName:String buildingTypeName:String ngOnInit(): void { this.route.queryParams.subscribe(params => { + this.bianli() this.organizationName = params['organizationName']; this.buildingTypeName = params['buildingTypeName']; }); @@ -45,43 +52,73 @@ export class BuildingTypeThreeDetailsComponent implements OnInit { }//柱状图数值顶部显示 zhongNameData = ["浦东中队","黄埔中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"] zhongNumData = [200,190,180,170,160,150,140,130,120,110,100] + tiaoshiPao:any + //气泡提示数据获取 + bianli(){ + var arrshuzu='['; + for(var i=0;i{ return this.tableTooltip(params) }, - backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 - borderWidth:'1', - borderRadius :'0' + position: this.echartsData.tableTooltipNoShow2 }, series: [{ data: this.zhongNumData, type: 'bar', - showBackground: true, - barWidth :'58', + barWidth :'38', + markPoint: { + symbolSize:[65, 65], + data: this.tiaoshiPao + }, backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' }, - label: this.topTextlabel + //label: this.topTextlabel }] }; this.detailPlanEchart.setOption(option); @@ -92,19 +129,19 @@ export class BuildingTypeThreeDetailsComponent implements OnInit { var data = [ {name:params.name,number:params.value,zhanbi:(params.value/1340 * 100).toFixed(2) + "%"} ] - var res = '
'+params.name+'
' - res+='
'; - res+=''; - res+=''; - res+='' - res+='' + var res = '
'+params.name+'
' + res+='
名称数量总占比
'; + res+=''; + res+=''; + res+='' + res+='' res+='' res+=''; for(var i=0;i' - res+='' - res+='' + res+='' + res+='' + res+='' } res+='' diff --git a/src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.html b/src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.html index 1d84921..3678117 100644 --- a/src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.html +++ b/src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.html @@ -1,15 +1,24 @@ +
- - + +
-
+
diff --git a/src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.scss b/src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.scss index 6eac21d..2e45848 100644 --- a/src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.scss +++ b/src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.scss @@ -11,9 +11,10 @@ border-bottom: 1px gray solid; .btnbox{ display: flex; - flex-direction:column; + flex-direction:row-reverse; float: right; - justify-content: space-around; + justify-content: center; + align-items: center; height: 100%; button{ width: 88px; diff --git a/src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.ts b/src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.ts index c55884c..46dd671 100644 --- a/src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.ts +++ b/src/app/statistic-analysis/buildingType/building-type-two-forward/building-type-two-forward.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; +import {EchartsDataService} from '../../echarts-data.service'; declare var echarts: any; @Component({ selector: 'app-building-type-two-forward', @@ -8,7 +9,7 @@ declare var echarts: any; }) export class BuildingTypeTwoForwardComponent implements OnInit { - constructor(private router: Router) { } + constructor(private router: Router,public data:EchartsDataService) { } forward(){ this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_forward']) } @@ -17,6 +18,7 @@ export class BuildingTypeTwoForwardComponent implements OnInit { } ngOnInit(): void { window.setTimeout(()=>{ + this.bianli() this.initCharts() this.barEcharts() },0) @@ -29,8 +31,17 @@ export class BuildingTypeTwoForwardComponent implements OnInit { item.echart.dispose() }) } + //返回 + goBack () { + history.go(-1) + this.data.statefulInspectionToggle = true + } axisLabel = { interval: 0, + textStyle:{ + fontSize :16, + color:'#000000' + }, formatter:function(value) { var ret = "";//拼接加\n返回的类目项 @@ -99,7 +110,20 @@ export class BuildingTypeTwoForwardComponent implements OnInit { {name:"金山中队",number:"65",zhanbi:"0.4%"}, {name:"崇明中队",number:"55",zhanbi:"0.3%"} ] zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队",'青浦支队'] - zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70,60] + zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70,60,50] + tiaoshiPao:any + //气泡提示数据获取 + bianli(){ + var arrshuzu='['; + for(var i=0;i{ - return this.tableTooltip(this.tableDataZhi,params.name) + return this.data.biaogeTishi(params.name) }, - backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 + /* backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 borderWidth:'1', - borderRadius :'0', - position: function (point, params, dom, rect, size) { - // 鼠标坐标和提示框位置的参考坐标系是:以外层div的左上角那一点为原点,x轴向右,y轴向下 - // 提示框位置 - var x = 0; // x坐标位置 - var y = 0; // y坐标位置 - - // 当前鼠标位置 - var pointX = point[0]; - var pointY = point[1]; - - // 外层div大小 - // var viewWidth = size.viewSize[0]; - // var viewHeight = size.viewSize[1]; - - // 提示框大小 - var boxWidth = size.contentSize[0]; - var boxHeight = size.contentSize[1]; - - // boxWidth > pointX 说明鼠标左边放不下提示框 - if (boxWidth > pointX) { - x = 35; - } else { // 左边放的下 - x = pointX + 80; - } - - // boxHeight > pointY 说明鼠标上边放不下提示框 - if (boxHeight > pointY) { - y = 65; - } else { // 上边放得下 - y = pointY - boxHeight; - } - - return [pointX, pointY]; - } + borderRadius :'0', */ + position: this.data.tableTooltipNoShow2 }, legend: { orient: 'vertical', right: 150, top:80, + textStyle:{ + fontSize:18, + color:"#000000" + }, data:this.zhiNameData }, series: [ @@ -207,7 +202,7 @@ export class BuildingTypeTwoForwardComponent implements OnInit { center: ['50%', '60%'], label:{ show:true, - fontSize:13, + fontSize:16, formatter:'{b}{c}家\n{d|({d}%)}', rich: { d: { @@ -235,13 +230,14 @@ export class BuildingTypeTwoForwardComponent implements OnInit { barEcharts(){ this.forArr.forEach(item=>{ let _this = this - item.echart = echarts.init(document.getElementById(item.id)); + item.echart = echarts.init(document.getElementById(item.id),'walden'); let option = { color: ['#3398DB'], title: { - text: item.name, + text: item.name+':总数(1024)', left: "center", - top: "15", + top: "0", + //bottom: '80', textStyle: { fontSize: 23 } @@ -252,26 +248,34 @@ export class BuildingTypeTwoForwardComponent implements OnInit { axisLabel: this.axisLabel }, yAxis: { - type: 'value' + type: 'value', + axisLabel:{ + //this.axisLabel, + textStyle:{ + fontSize :16, + color:'#000000' + } + + } }, tooltip: { trigger: 'item', formatter: (params)=>{ return this.tableTooltip(this.tableDataZhong,params.name) }, - backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 - borderWidth:'1', - borderRadius :'0' + position: this.data.tableTooltipNoShow2 }, series: [{ data: this.buildingTypeNum, type: 'bar', - showBackground: true, + markPoint: { + data: this.tiaoshiPao + }, backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' }, barWidth :'28', - label: this.topTextlabel + //label: this.topTextlabel }] }; item.echart.setOption(option); @@ -284,24 +288,25 @@ export class BuildingTypeTwoForwardComponent implements OnInit { //提示框表格 tableTooltip(dataArr,title:string){ let data = dataArr - var res = '
'+title+'
' - res+='
名称数量总占比
'+data[i].number+''+data[i].zhanbi+'
'+data[i].name+''+data[i].number+''+data[i].zhanbi+'
'; - res+=''; - res+=''; - res+='' - res+='' - res+='' - res+=''; - for(var i=0;i' - res+='' - res+='' - } - - res+='' - res+='' - res+='
名称数量总占比
'+data[i].number+''+data[i].zhanbi+'
总计135619%
' - return res + var res = '
'+title+'
' + res+='
'; + res+=''; + res+=''; + res+='' + res+='' + res+='' + res+=''; + //var res='
'+biaotou+'
' + for(var i=0;i' + res+='
' + res+='' + } + + res+='' + res+='' + res+='
名称数量总占比
'+this.tableDataZhi[i].number+''+this.tableDataZhi[i].zhanbi+'
总计135619%
' + return res } } diff --git a/src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.ts b/src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.ts index 15b3f06..5fdfb97 100644 --- a/src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.ts +++ b/src/app/statistic-analysis/buildingType/building-type-two-reverse/building-type-two-reverse.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; +import {EchartsDataService} from '../../echarts-data.service'; declare var echarts: any; @Component({ selector: 'app-building-type-two-reverse', @@ -8,7 +9,7 @@ declare var echarts: any; }) export class BuildingTypeTwoReverseComponent implements OnInit { - constructor(private router: Router) { } + constructor(private router: Router,public data:EchartsDataService) { } forward(){ this.router.navigate(['/statisticanalysis/buildingType_one/buildingType_two_forward']) @@ -18,6 +19,7 @@ export class BuildingTypeTwoReverseComponent implements OnInit { } ngOnInit(): void { window.setTimeout(()=>{ + this.bianli() this.initCharts() this.barEcharts() },0) @@ -31,7 +33,11 @@ export class BuildingTypeTwoReverseComponent implements OnInit { }) } axisLabel = { - interval: 0, + interval: 0, + textStyle:{ + fontSize :16, + color:'#000000' + }, formatter:function(value) { var ret = "";//拼接加\n返回的类目项 @@ -101,6 +107,19 @@ export class BuildingTypeTwoReverseComponent implements OnInit { {name:"崇明中队",number:"55",zhanbi:"0.3%"} ] zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"] zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70] + tiaoshiPao:any + //气泡提示数据获取 + bianli(){ + var arrshuzu='['; + for(var i=0;i{ return this.tableTooltip(this.tableDataZhi,params.name) }, - backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 - borderWidth:'1', - borderRadius :'0', - position: function (point, params, dom, rect, size) { - // 鼠标坐标和提示框位置的参考坐标系是:以外层div的左上角那一点为原点,x轴向右,y轴向下 - // 提示框位置 - var x = 0; // x坐标位置 - var y = 0; // y坐标位置 - - // 当前鼠标位置 - var pointX = point[0]; - var pointY = point[1]; - - // 外层div大小 - // var viewWidth = size.viewSize[0]; - // var viewHeight = size.viewSize[1]; - - // 提示框大小 - var boxWidth = size.contentSize[0]; - var boxHeight = size.contentSize[1]; - - // boxWidth > pointX 说明鼠标左边放不下提示框 - if (boxWidth > pointX) { - x = 35; - } else { // 左边放的下 - x = pointX + 80; - } - - // boxHeight > pointY 说明鼠标上边放不下提示框 - if (boxHeight > pointY) { - y = 65; - } else { // 上边放得下 - y = pointY - boxHeight; - } - - return [pointX, pointY]; - } + position: this.data.tableTooltipNoShow2 }, legend: { orient: 'vertical', right: 150, top:80, + textStyle:{ + fontSize:18, + color:"#000000" + }, data: ['高层', '地下', '轨道交通', '化工生产', '储罐类' , '厂房','古建筑', '商市场', '医院', '学校', '宾馆' , '娱乐场所','餐饮业', '影剧院', '展览建筑' , '隧道'] }, series: [ @@ -188,7 +175,7 @@ export class BuildingTypeTwoReverseComponent implements OnInit { center: ['50%', '60%'], label:{ show:true, - fontSize:13, + fontSize:16, formatter:'{b}{c}家\n{d|({d}%)}', rich: { d: { @@ -233,12 +220,13 @@ export class BuildingTypeTwoReverseComponent implements OnInit { barEcharts(){ this.forArr.forEach(item=>{ let _this = this - item.echart = echarts.init(document.getElementById(item.id)); + item.echart = echarts.init(document.getElementById(item.id),'walden'); let option = { title: { - text: item.name, + text: item.name+':总数(1024)', left: "center", top: "15", + bottom: '80', textStyle: { fontSize: 23 } @@ -249,26 +237,28 @@ export class BuildingTypeTwoReverseComponent implements OnInit { axisLabel: this.axisLabel }, yAxis: { - type: 'value' + type: 'value', + axisLabel:this.axisLabel, }, tooltip: { trigger: 'item', formatter: (params)=>{ return this.tableTooltip(this.tableDataZhong,params.name) }, - backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 - borderWidth:'1', - borderRadius :'0' + position: this.data.tableTooltipNoShow2 }, series: [{ data: this.zhiNumData, type: 'bar', - showBackground: true, + markPoint: { + data: this.tiaoshiPao + }, + //showBackground: true, backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' }, barWidth :'28', - label: this.topTextlabel + //label: this.topTextlabel }] }; item.echart.setOption(option); @@ -280,24 +270,25 @@ export class BuildingTypeTwoReverseComponent implements OnInit { //提示框表格 tableTooltip(dataArr,title:string){ let data = dataArr - var res = '
'+title+'
' - res+='
'; - res+=''; - res+=''; - res+='' - res+='' - res+='' - res+=''; - for(var i=0;i' - res+='' - res+='' - } - - res+='' - res+='' - res+='
名称数量总占比
'+data[i].number+''+data[i].zhanbi+'
总计135619%
' - return res + var res = '
'+title+'
' + res+='
'; + res+=''; + res+=''; + res+='' + res+='' + res+='' + res+=''; + //var res='
'+biaotou+'
' + for(var i=0;i' + res+='
' + res+='' + } + + res+='' + res+='' + res+='
名称数量总占比
'+this.tableDataZhong[i].number+''+this.tableDataZhong[i].zhanbi+'
总计135619%
' + return res } } diff --git a/src/app/statistic-analysis/deleteUnit/delete-four/delete-four.component.scss b/src/app/statistic-analysis/deleteUnit/delete-four/delete-four.component.scss index cde1652..db0b22f 100644 --- a/src/app/statistic-analysis/deleteUnit/delete-four/delete-four.component.scss +++ b/src/app/statistic-analysis/deleteUnit/delete-four/delete-four.component.scss @@ -4,7 +4,7 @@ position: relative; #detailBox{ width: 100%; - height: 350px; + height: 550px; position: absolute; left: 50%; top: 45%; diff --git a/src/app/statistic-analysis/deleteUnit/delete-four/delete-four.component.ts b/src/app/statistic-analysis/deleteUnit/delete-four/delete-four.component.ts index f43c0b6..f46228b 100644 --- a/src/app/statistic-analysis/deleteUnit/delete-four/delete-four.component.ts +++ b/src/app/statistic-analysis/deleteUnit/delete-four/delete-four.component.ts @@ -4,7 +4,7 @@ * @Author: sueRimn * @Date: 2020-09-02 16:22:58 * @LastEditors: sueRimn - * @LastEditTime: 2020-09-07 13:33:44 + * @LastEditTime: 2020-09-10 09:17:32 */ import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @@ -23,9 +23,22 @@ export class DeleteFourComponent implements OnInit { constructor(public route: ActivatedRoute,public data: EchartsDataService,public snackBar: MatSnackBar,private adapter: DateAdapter) { } zhongNameData = ["浦东中队","黄埔中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"] zhongNumData = [200,190,180,170,160,150,140,130,120,110,100] + tiaoshiPao:any + //气泡提示数据获取 + bianli(){ + var arrshuzu='['; + for(var i=0;i{ this.level=param.level //console.log(this.level) @@ -41,22 +54,37 @@ export class DeleteFourComponent implements OnInit { } detailEcharts(level){ - var detailPlanEchart = echarts.init(document.getElementById('detailBox')); + var detailPlanEchart = echarts.init(document.getElementById('detailBox'),'walden'); var option = { title: { - text: level, + text: level+':总数(666)', left: "center", + top:"0", textStyle: { - fontSize: 28 + fontSize: 30 } }, xAxis: { type: 'category', data: this.zhongNameData, + axisLabel:{ + textStyle:{ + fontSize :18, + color:'#000000' + } + + } // axisLabel: this.axisLabel }, yAxis: { - type: 'value' + type: 'value', + axisLabel:{ + textStyle:{ + fontSize :18, + color:'#000000' + } + + } }, tooltip: { trigger: 'item', @@ -64,14 +92,17 @@ export class DeleteFourComponent implements OnInit { console.log(666,params) return this.tableTooltip(params) }, - backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 - borderWidth:'1', - borderRadius :'0' + position: this.data.tableTooltipNoShow2 }, series: [{ data: this.zhongNumData, type: 'bar', - showBackground: true, + //showBackground: true, + markPoint: { + symbolSize:[65, 65], + data: this.tiaoshiPao + }, + barWidth :'38', backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' } @@ -85,19 +116,19 @@ export class DeleteFourComponent implements OnInit { var data = [ {name:params.name,number:params.value,zhanbi:(params.value/1340 * 100).toFixed(2) + "%"} ] - var res = '
'+params.name+'
' - res+='
'; - res+=''; - res+=''; - res+='' - res+='' + var res = '
'+params.name+'
' + res+='
名称数量总占比
'; + res+=''; + res+=''; + res+='' + res+='' res+='' res+=''; for(var i=0;i' - res+='' - res+='' + res+='' + res+='' + res+='' } res+='' diff --git a/src/app/statistic-analysis/deleteUnit/delete-one/delete-one.component.ts b/src/app/statistic-analysis/deleteUnit/delete-one/delete-one.component.ts index a284c14..9c96473 100644 --- a/src/app/statistic-analysis/deleteUnit/delete-one/delete-one.component.ts +++ b/src/app/statistic-analysis/deleteUnit/delete-one/delete-one.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; +import {EchartsDataService,} from '../../echarts-data.service' declare var echarts: any; @Component({ @@ -12,7 +13,7 @@ export class DeleteOneComponent implements OnInit { indexBzt//echarts实例 - constructor(private router: Router) { } + constructor(private router: Router,public echartsData:EchartsDataService) { } ngOnInit() { window.setTimeout(()=>{ @@ -29,7 +30,7 @@ export class DeleteOneComponent implements OnInit { //console.log(document.getElementById('indexBzt')) var ec = echarts as any; - this.indexBzt = ec.init(document.getElementById('indexBzt')); + this.indexBzt = ec.init(document.getElementById('indexBzt'),'walden'); var options={ title: { text: '删除单位统计(8900家)', @@ -41,14 +42,11 @@ export class DeleteOneComponent implements OnInit { }, tooltip: { trigger: 'item', + position: this.echartsData.tableTooltipNoShow2, formatter: (params)=>{ - return this.biaogeTishi(params.name) - } , - backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 - borderWidth:'1', - borderRadius :'0' - - + //return this.biaogeTishi(params.name) + return this.echartsData.biaogeTishi(params.name) + } }, legend: { orient: 'vertical', @@ -57,9 +55,10 @@ export class DeleteOneComponent implements OnInit { //padding:20, // itemWidth:60, // itemHeight:25, - /* textStyle:{ - fontSize:28 - }, */ + textStyle:{ + fontSize:18, + color:"#000000" + }, data: ['高层', '地下', '轨道交通', '化工生产', '储罐类', '厂房', '古建筑', '商市场', '医院', '学校', '宾馆', '娱乐场所', '餐饮业', '影剧院', '展览建筑', '隧道'] }, series: [ @@ -70,7 +69,7 @@ export class DeleteOneComponent implements OnInit { center: ['50%', '60%'], label:{ show:true, - fontSize:13, + fontSize:16, formatter:'{b}{c}家\n{d|({d}%)}', rich: { d: { diff --git a/src/app/statistic-analysis/deleteUnit/delete-there-line-details/delete-there-line-details.component.scss b/src/app/statistic-analysis/deleteUnit/delete-there-line-details/delete-there-line-details.component.scss index febdae8..792ae79 100644 --- a/src/app/statistic-analysis/deleteUnit/delete-there-line-details/delete-there-line-details.component.scss +++ b/src/app/statistic-analysis/deleteUnit/delete-there-line-details/delete-there-line-details.component.scss @@ -1,11 +1,11 @@ .box{ width: 100%; - height: 92%; + height: 100%; display: flex; flex-direction: column; overflow: hidden; position: relative; - .echartsbox{ + /* .echartsbox{ width: 100%; height: 100%; overflow: auto; @@ -14,7 +14,7 @@ width: 50%; height: 420px; margin: 50px auto; - } + } */ } .publicCss{ height: 350px; @@ -64,13 +64,14 @@ .echartsbox{ width: 100%; height: 100%; - overflow: auto; + position: relative; + // overflow: auto; #barEchart{ - width: 60%; - height: 350px; + width: 80%; + height: 50%; position: absolute; left: 50%; - top: 50%; - transform: translate(-50%,-50%); + top: 45%; + transform: translate(-50%,-60%); } } \ No newline at end of file diff --git a/src/app/statistic-analysis/deleteUnit/delete-there-line-details/delete-there-line-details.component.ts b/src/app/statistic-analysis/deleteUnit/delete-there-line-details/delete-there-line-details.component.ts index d9e4263..c26084d 100644 --- a/src/app/statistic-analysis/deleteUnit/delete-there-line-details/delete-there-line-details.component.ts +++ b/src/app/statistic-analysis/deleteUnit/delete-there-line-details/delete-there-line-details.component.ts @@ -21,6 +21,7 @@ export class DeleteThereLineDetailsComponent implements OnInit { setTimeoutObj//延时器需要清除 ngOnInit(): void { this.dateInit () + this.bianli() this.route.queryParams.subscribe(params => { this.year = params['level']; this.buildingTypeName = params['headtext']; @@ -71,7 +72,19 @@ export class DeleteThereLineDetailsComponent implements OnInit { zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队"] zhiNumData = [300,290,280,270,260,250,240,230,220,210,200] - + tiaoshiPao:any + //气泡提示数据获取 + bianli(){ + var arrshuzu='['; + for(var i=0;i{ if(params[0].seriesName == "year"){ return this.serviceData.tableTooltip(this.serviceData.monthTooltip,params[0].name) @@ -118,6 +129,10 @@ export class DeleteThereLineDetailsComponent implements OnInit { data: this.date, axisLabel: { color: "#000", //刻度线标签颜色 + textStyle:{ + fontSize :15, + color:'#000000' + } }, //设置坐标轴字体颜色和宽度 axisLine: { @@ -137,7 +152,11 @@ export class DeleteThereLineDetailsComponent implements OnInit { type: 'value', name: '个', axisLabel: { - color: "#000" //刻度线标签颜色 + //color: "#000", //刻度线标签颜色 + textStyle:{ + fontSize :15, + color:'#000000' + } }, //设置坐标轴字体颜色和宽度 axisLine: { @@ -150,6 +169,10 @@ export class DeleteThereLineDetailsComponent implements OnInit { series: [{ name: 'xxx', type: 'line', + markPoint: { + symbolSize:[65, 65], + data: this.tiaoshiPao + }, data: this.dateNum, } ], @@ -173,19 +196,19 @@ export class DeleteThereLineDetailsComponent implements OnInit { var data = [ {name:params.name,number:params.value,zhanbi:(params.value/1340 * 100).toFixed(2) + "%"} ] - var res = '
'+params.name+'
' - res+='
名称数量总占比
'+data[i].number+''+data[i].zhanbi+'
'+data[i].name+''+data[i].number+''+data[i].zhanbi+'
'; - res+=''; - res+=''; - res+='' - res+='' + var res = '
'+params.name+'
' + res+='
名称数量总占比
'; + res+=''; + res+=''; + res+='' + res+='' res+='' res+=''; for(var i=0;i' - res+='' - res+='' + res+='' + res+='' + res+='' } res+='' diff --git a/src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.scss b/src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.scss index 7581631..e8fd8e2 100644 --- a/src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.scss +++ b/src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.scss @@ -67,7 +67,7 @@ overflow: auto; #zhidui{ width: 100%; - height: 350px; + height: 550px; position: absolute; left: 50%; top: 50%; diff --git a/src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.ts b/src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.ts index f39b7a6..554344f 100644 --- a/src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.ts +++ b/src/app/statistic-analysis/deleteUnit/delete-there/delete-there.component.ts @@ -4,7 +4,7 @@ * @Author: sueRimn * @Date: 2020-09-02 16:22:35 * @LastEditors: sueRimn - * @LastEditTime: 2020-09-07 13:33:00 + * @LastEditTime: 2020-09-10 09:16:42 */ import { Component, OnInit } from '@angular/core'; import { Router,ActivatedRoute } from '@angular/router'; @@ -26,22 +26,24 @@ export class DeleteThereComponent implements OnInit { time:String buildingTypeName:String setTimeoutObj//延时器需要清除 + headtext:string; ngOnDestroy():void{ this.zhutu.clear() this.zhutu.dispose() } ngOnInit(): void { + this.bianli(); this.dateInit(); - let headtext:string; + //let headtext:string; let datayuex:string; let headName:string; console.log(this.activatedRoute.queryParams.subscribe) //headtext=this.activatedRoute.queryParams["headtext"]; this.activatedRoute.queryParams.subscribe(param=>{ - headtext=param.headtext + this.headtext=param.headtext datayuex=param.level - headName=headtext+''+datayuex; + headName=this.headtext+''+datayuex; //console.log(headName) }); window.setTimeout(()=>{ @@ -84,6 +86,19 @@ export class DeleteThereComponent implements OnInit { }//柱状图数值顶部显示 zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"] zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70] + tiaoshiPao:any + //气泡提示数据获取 + bianli(){ + var arrshuzu='['; + for(var i=0;i{ - return this.tableTooltip2(params.name) + return this.echartsData.biaogeTishi(params.name) }, - backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 + position: this.echartsData.tableTooltipNoShow2 + /* backgroundColor:'rgba(255,255,255,1)', borderWidth:'1', - borderRadius :'0' + borderRadius :'0' */ }, series: [{ data: this.zhiNumData, type: 'bar', - showBackground: true, + markPoint: { + symbolSize:[65, 65], + data: this.tiaoshiPao + }, backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' }, - barWidth :'58', + barWidth :'38', //label: this.topTextlabel }] }; @@ -168,7 +202,7 @@ export class DeleteThereComponent implements OnInit { if (this.zhutu.containPixel('grid',pointInPixel)) { let xIndex=this.zhutu.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; /*事件处理代码书写位置*/ - this.router.navigate(['/statisticanalysis/delete_one/delete_four'],{queryParams:{'level':this.option.xAxis.data[xIndex]}}); + this.router.navigate(['/statisticanalysis/delete_one/delete_four'],{queryParams:{'level':this.option.xAxis.data[xIndex]+this.headtext}}); } }); /* this.zhutu.on('click', (params) => { @@ -178,94 +212,6 @@ export class DeleteThereComponent implements OnInit { }); */ this.zhutu.setOption(this.option); } - - /*折线图 */ - detailEcharts(headName:string){ - this.zhutu = echarts.init(document.getElementById('zhidui'), 'skinUpp'); - this.option = { - grid: { - top: 50, - left:40, - right: 20, - bottom: 20, - }, - // 标题 - title: { - text: `${headName}`, - top: -4, - left: 'center', - textStyle:{ - //文字颜色 - color:'#000', - } - }, - //提示框 - tooltip: { - trigger: 'axis', - backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 - borderWidth:'1', - borderRadius :'0', - formatter: (params)=>{ - /* if(params[0].seriesName == "year"){ - return this.serviceData.tableTooltip(this.serviceData.monthTooltip,params[0].name) - }else{ - return this.serviceData.tableTooltip(this.serviceData.tableDataZhi,params[0].name) - } */ - }, - // position:this.serviceData.tableTooltipNoShow2 - }, - // x轴 - xAxis: { - type: 'category', - data: this.date, - axisLabel: { - color: "#000", //刻度线标签颜色 - }, - //设置坐标轴字体颜色和宽度 - axisLine: { - lineStyle: { - color: "#000", - }, - }, - splitLine: {//分割线配置 - show:true, - lineStyle: { - color: '#999', - } - } - }, - // y轴 - yAxis: { - type: 'value', - name: '个', - axisLabel: { - color: "#000" //刻度线标签颜色 - }, - //设置坐标轴字体颜色和宽度 - axisLine: { - lineStyle: { - color: "#000", - } - } - }, - // 数据 - series: [{ - name: 'xxx', - type: 'line', - data: this.dateNum, - } - ], - }; - this.zhutu.setOption(this.option); - this.zhutu.getZr().on('click',params=>{ - const pointInPixel= [params.offsetX, params.offsetY]; - if (this.zhutu.containPixel('grid',pointInPixel)) { - let xIndex=this.zhutu.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; - /*事件处理代码书写位置*/ - this.router.navigate(['/statisticanalysis/addUnit_one/addUnit_two_time/three_barDetails'],{queryParams:{'level':'zhidui','time':this.option.xAxis.data[xIndex],'buildingTpye':this.buildingTypeName}}); - } - }); - } /* 鼠标悬停提示 */ tableTooltip2(biaotou:string){ @@ -278,23 +224,24 @@ export class DeleteThereComponent implements OnInit { shuju+='{"name":"嘉定中队","number":"78","zhanbi":"0.6%"},{"name":"松江中队","number":"75","zhanbi":"0.5%"},' shuju+='{"name":"金山中队","number":"65","zhanbi":"0.4%"},{"name":"崇明中队","number":"55","zhanbi":"0.3%"}]' var jsonObj = JSON.parse(shuju); - var res = '
'+biaotou+'
' - res+='
名称数量总占比
'+data[i].number+''+data[i].zhanbi+'
'+data[i].name+''+data[i].number+''+data[i].zhanbi+'
'; - res+=''; - res+=''; - res+='' - res+='' + var res = '
'+biaotou+'
' + res+='
名称数量总占比
'; + res+=''; + res+=''; + res+='' + res+='' res+='' res+=''; + //var res='
'+biaotou+'
' for(var i=0;i' - res+='
' - res+='' + res+='' + res+='' + res+='' } res+='' - res+='' + res+='' res+='
名称数量总占比
'+jsonObj[i].number+''+jsonObj[i].zhanbi+'
'+jsonObj[i].name+''+jsonObj[i].number+''+jsonObj[i].zhanbi+'
总计135619%
总计135619%
' return res } diff --git a/src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.html b/src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.html index c859182..8bf34c7 100644 --- a/src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.html +++ b/src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.html @@ -4,12 +4,10 @@ * @Author: sueRimn * @Date: 2020-09-02 16:21:18 * @LastEditors: sueRimn - * @LastEditTime: 2020-09-07 15:57:47 + * @LastEditTime: 2020-09-08 15:18:57 --> - - +
-
@@ -71,48 +69,20 @@
-->
-
-
-
-
-
-
- -
-
-
- -
-
-
- -
-
-
- -
+
+
+
-
-
-
- -
-
-
- -
-
-
- -
-
-
- -
+
+
+
+
+
+
+
+
+
-
- +
-
- diff --git a/src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.scss b/src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.scss index 85cadc3..0807342 100644 --- a/src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.scss +++ b/src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.scss @@ -1,15 +1,36 @@ -body{ +.box{ + width: 100%; + height: 92%; + display: flex; + flex-direction: column; overflow: hidden; + position: relative; + .echartsbox{ + width: 100%; + height: 100%; + overflow: auto; + } + #Line{ + width: 50%; + height: 420px; + margin: 50px auto; + } +} +.publicCss{ + height: 350px; + width: 50%; + display: inline-block; + box-sizing: border-box; + padding: 20px; } //头部搜索栏 .header { - width: 90%; - position: fixed ; border-bottom: 1px solid #999; - height: 68px; - //min-height: 81px; + height: 80px; + min-height: 81px;; box-sizing: border-box; + // padding: 0 15px; display: flex; flex-direction: row; flex-wrap: wrap; @@ -26,87 +47,7 @@ body{ } } - -/* 最上面的折线图 */ -.heads{ - text-align:center; - margin:0 auto; - width: 800px; - height: 450px; - //padding-top: 150px; - margin-top: 50px; -} -/* 其余折线图 */ -.mainbox { - margin-top: 80px; - //padding-top: 50px; - padding-bottom: 50px; - min-width: 1024px; - max-width: 1920px; - padding: 0.125rem 0.125rem 0; - display: flex; - .column { - flex: 2; - - } - } - .panel { - position: relative; - height: 330px; - width:780px; - //border: 1px solid rgba(25, 186, 139, 0.17); - padding: 0 0.1875rem 0.5rem; - margin-bottom: 0.1875rem; - margin-top: 80px; - &::before { - position: absolute; - top: 0; - left: 0; - content: ""; - width: 10px; - height: 10px; - border-top: 2px ; - border-left: 2px ; - } - &::after { - position: absolute; - top: 0; - right: 0; - content: ""; - width: 10px; - height: 10px; - border-top: 2px ; - border-right: 2px ; - } - .panel-footer { - position: absolute; - left: 0; - bottom: 0; - width: 100%; - &::before { - position: absolute; - bottom: 0; - left: 0; - content: ""; - width: 10px; - height: 10px; - border-bottom: 2px ; - border-left: 2px ; - } - &::after { - position: absolute; - bottom: 0; - right: 0; - content: ""; - width: 10px; - height: 10px; - border-bottom: 2px ; - border-right: 2px ; - } - } - - - .chart { - height: 3rem; - } - } \ No newline at end of file +.selectedBtn{ + background-color: #2196f3; + color: white; +} \ No newline at end of file diff --git a/src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.ts b/src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.ts index 21920f5..5e4284d 100644 --- a/src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.ts +++ b/src/app/statistic-analysis/deleteUnit/delete-two/delete-two.component.ts @@ -4,7 +4,7 @@ * @Author: sueRimn * @Date: 2020-09-02 16:21:18 * @LastEditors: sueRimn - * @LastEditTime: 2020-09-07 11:31:41 + * @LastEditTime: 2020-09-09 11:11:46 */ import { Component, OnInit, ViewChild } from '@angular/core'; import { Router } from '@angular/router'; @@ -32,10 +32,10 @@ export class DeleteTwoComponent implements OnInit { ngOnInit(): void { this.dateInit() - + this.bianli() window.setTimeout(()=>{ - this.headZhexian('heads','删除数量总统计',this.datayuex,this.datayuey) + this.headZhexian('Line','删除数量总统计',this.datayuex,this.datayuey) this.headZhexian('leftOne','高层',this.datayuex,this.datayuey) this.headZhexian('leftTwo','轨道交通',this.datayuex,this.datayuey) this.headZhexian('leftThere','储罐类',this.datayuex,this.datayuey) @@ -67,6 +67,22 @@ export class DeleteTwoComponent implements OnInit { selectType:string = 'month'; //选择当前的 查询类型 按月/年 headZx//echarts实例 + zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"] + zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70] + tiaoshiPao:any + //气泡提示数据获取 + bianli(){ + var arrshuzu='['; + for(var i=0;i{ - return this.biaogeTishi(`${headtext}`) + return this.echartsData.biaogeTishiZhi(`${headtext}`) }, - backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 + /* backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 borderWidth:'1', - borderRadius :'0', - position: this.echartsData.tableTooltipNoShow + borderRadius :'0', */ + position: this.echartsData.tableTooltipNoShow2 }, xAxis: { type: 'category', @@ -250,27 +266,12 @@ export class DeleteTwoComponent implements OnInit { series: [{ data: datayuey, type: 'line', + markPoint: { + + symbolSize:[65, 65], + data: this.tiaoshiPao + }, clickable:false, - /* lineStyle:{ - color:'#1369bf' - }, */ - /* markLine: { - symbol: ['none', 'none'], - label: {show: false}, - lineStyle:{ - color:'#9A9A9A', - type:'solid', - }, - data: [ - {xAxis: 1}, - {xAxis: 2}, - {xAxis: 3}, - {xAxis: 4}, - {xAxis: 5}, - {xAxis: 6}, - {xAxis: 7} - ] - }, */ }] }; this.headZx.getZr().on('click', (params) => { diff --git a/src/app/statistic-analysis/echarts-data.service.ts b/src/app/statistic-analysis/echarts-data.service.ts index 1bb95a5..163dedd 100644 --- a/src/app/statistic-analysis/echarts-data.service.ts +++ b/src/app/statistic-analysis/echarts-data.service.ts @@ -36,8 +36,8 @@ export class EchartsDataService { {name:"嘉定支队",number:"78",zhanbi:"0.6%"}, {name:"松江支队",number:"75",zhanbi:"0.5%"}, {name:"金山支队",number:"65",zhanbi:"0.4%"}, - {name:"崇明支队",number:"55",zhanbi:"0.3%"}, - {name:"总计",number:"1356",zhanbi:"19%"} + {name:"崇明支队",number:"55",zhanbi:"0.3%"}/* , + {name:"总计",number:"1356",zhanbi:"19%"} */ ] //中队提示框 tableDataZhong = [ @@ -56,8 +56,8 @@ export class EchartsDataService { {name:"嘉定中队",number:"78",zhanbi:"0.6%"}, {name:"松江中队",number:"75",zhanbi:"0.5%"}, {name:"金山中队",number:"65",zhanbi:"0.4%"}, - {name:"崇明中队",number:"55",zhanbi:"0.3%"}, - {name:"总计",number:"1356",zhanbi:"19%"} + {name:"崇明中队",number:"55",zhanbi:"0.3%"}/* , + {name:"总计",number:"1356",zhanbi:"19%"} */ ] //建筑类型提示框 buildingType = [ @@ -76,8 +76,8 @@ export class EchartsDataService { {name:"餐饮业",number:"78",zhanbi:"0.6%"}, {name:"影剧院",number:"75",zhanbi:"0.5%"}, {name:"展览建筑",number:"65",zhanbi:"0.4%"}, - {name:"隧道",number:"55",zhanbi:"0.3%"}, - {name:"总计",number:"1356",zhanbi:"19%"} + {name:"隧道",number:"55",zhanbi:"0.3%"}/* , + {name:"总计",number:"1356",zhanbi:"19%"} */ ] //月份提示框 monthTooltip = [ @@ -101,29 +101,30 @@ export class EchartsDataService { {name:"预案审核通过",number:"144",zhanbi:"21%"}, {name:"预案编制",number:"133",zhanbi:"20%"}, {name:"预案审核退回",number:"122",zhanbi:"17%"}, - {name:"预案审核中",number:"120",zhanbi:"23%"}, - {name:"总计",number:"561",zhanbi:"100%"}, + {name:"预案审核中",number:"120",zhanbi:"23%"}/* , + {name:"总计",number:"561",zhanbi:"100%"}, */ ] //提示框表格 tableTooltip(dataArr,title:string){ let data = dataArr - var res = '
'+title+'
' - res+='
'; + var res = '
'+title+'
' + res+='
'; res+=''; - res+=''; - res+='' - res+='' + res+=''; + res+='' + res+='' res+='' res+=''; for(var i=0;i' - res+='' - res+='' + res+='' + res+='' + res+='' } res+='' + res+='' res+='
名称数量总占比名称数量总占比
'+data[i].number+''+data[i].zhanbi+'
'+data[i].name+''+data[i].number+''+data[i].zhanbi+'
总计135619%
' return res } @@ -215,7 +216,84 @@ export class EchartsDataService { // }, // position:this.serviceData.tableTooltipNoShow // } - - +/** + * @name: 中队表格提示框封装 + * @test: test font + * @msg: + * @param {string(表头)} + * @return {type} + */ + biaogeTishi(biaotou:string){ + var res = '
'+biaotou+'
' + res+='
'; + res+=''; + res+=''; + res+='' + res+='' + res+='' + res+=''; + //var res='
'+biaotou+'
' + for(var i=0;i' + res+='
' + res+='' + } + + res+='' + res+='' + res+='
名称数量总占比
'+this.tableDataZhong[i].number+''+this.tableDataZhong[i].zhanbi+'
总计135619%
' + return res + } + /** + * @name: 支队表格提示框封装 + * @test: test font + * @msg: + * @param {string(表头)} + * @return {type} + */ + biaogeTishiZhi(biaotou:string){ + var res = '
'+biaotou+'
' + res+='
'; + res+=''; + res+=''; + res+='' + res+='' + res+='' + res+=''; + //var res='
'+biaotou+'
' + for(var i=0;i' + res+='
' + res+='' + } + + res+='' + res+='' + res+='
名称数量总占比
'+this.tableDataZhi[i].number+''+this.tableDataZhi[i].zhanbi+'
总计135619%
' + return res + } + zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"] + zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70] + tiaoshiPao:any; + arrshuzu='['; +/** + * @name: 气泡封装 + * @test: test font + * @msg: + * @param {} + * @return {type} + */ + qipao():any{ + for(var i=0;i { this.router.navigate(['/statisticanalysis/statePageOne']) @@ -615,7 +616,7 @@ export class HomeComponent implements OnInit { ], }; unitData () { - this.chartDwsjcj = echarts.init(document.getElementById('chartDwsjcj'), 'skinUpp'); + this.chartDwsjcj = echarts.init(document.getElementById('chartDwsjcj'), 'walden'); this.chartDwsjcj.setOption(this.chartDwsjcjOptionsZhi); this.chartDwsjcj.on("click",(params) => { if(params.seriesName == "新增单位"){ @@ -755,7 +756,7 @@ export class HomeComponent implements OnInit { }; //建筑类型统计 keyUnit () { - this.chartZdgzqy = echarts.init(document.getElementById('chartZdgzqy'), 'skinUpp'); + this.chartZdgzqy = echarts.init(document.getElementById('chartZdgzqy'), 'walden'); this.chartZdgzqy.setOption(this.chartZdgzqyOptionsZhi); this.chartZdgzqy.on("click",(params) => { diff --git a/src/app/statistic-analysis/scheduled-updates/publicEcharts.html b/src/app/statistic-analysis/scheduled-updates/publicEcharts.html index 73238da..270e790 100644 --- a/src/app/statistic-analysis/scheduled-updates/publicEcharts.html +++ b/src/app/statistic-analysis/scheduled-updates/publicEcharts.html @@ -1,3 +1,11 @@ +
@@ -10,8 +18,8 @@
- - + +
diff --git a/src/app/statistic-analysis/scheduled-updates/scheduled-updates.component.ts b/src/app/statistic-analysis/scheduled-updates/scheduled-updates.component.ts index cfa0063..f62680e 100644 --- a/src/app/statistic-analysis/scheduled-updates/scheduled-updates.component.ts +++ b/src/app/statistic-analysis/scheduled-updates/scheduled-updates.component.ts @@ -27,7 +27,7 @@ export class ScheduledUpdatesComponent implements OnInit { example:any; /* 首页饼状图 */ initCharts(){ - this.example= echarts.init(document.getElementById('center')); + this.example= echarts.init(document.getElementById('center'),'walden'); var options={ title: { text: '计划更新统计(7100家)', @@ -39,13 +39,10 @@ export class ScheduledUpdatesComponent implements OnInit { }, tooltip: { trigger: 'item', - backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 - borderWidth:'1', - borderRadius :'0', formatter: (params)=>{ - return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,params.name) + return this.echartsData.biaogeTishiZhi(params.name) }, - position:this.echartsData.tableTooltipNoShow + position:this.echartsData.tableTooltipNoShow2 }, legend: { orient: 'vertical', @@ -53,9 +50,10 @@ export class ScheduledUpdatesComponent implements OnInit { top:80, // itemWidth:60, // itemHeight:25, - // textStyle:{ - // fontSize:28 - // }, + textStyle:{ + fontSize:18, + color:"#000000" + }, data: ['已核查无需修改', '已核查修改中', '已核查提交审核', '未核查'] }, series: [{ @@ -67,7 +65,7 @@ export class ScheduledUpdatesComponent implements OnInit { normal:{ show:true, // position: 'inner', - // fontSize:18, + fontSize:18, formatter:'{b} {c}家\n{d|({d}%)}', rich: { d: { @@ -171,7 +169,7 @@ export class verifiedComponent implements OnInit { oneEcharts:any; oneInit () { - this.oneEcharts = echarts.init(document.getElementById('center'), 'skinUpp'); + this.oneEcharts = echarts.init(document.getElementById('center'),'walden'); var option = { grid: { top: 50, @@ -187,15 +185,15 @@ export class verifiedComponent implements OnInit { textStyle:{ //文字颜色 color:'#000', - fontSize: 22, + fontSize: 32, } }, //提示框 tooltip: { trigger: 'axis', - backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 + /* backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 borderWidth:'1', - borderRadius :'0', + borderRadius :'0', */ formatter: (params)=>{ return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,params[0].name) }, @@ -206,8 +204,12 @@ export class verifiedComponent implements OnInit { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月','10月','11月','12月'], boundaryGap: false, - axisLabel: { - color: "#000", //刻度线标签颜色 + axisLabel:{ + textStyle:{ + fontSize :15, + color:'#000000' + } + }, //设置坐标轴字体颜色和宽度 axisLine: { @@ -226,6 +228,7 @@ export class verifiedComponent implements OnInit { yAxis: { type: 'value', axisLabel: { + fontSize :13, color: "#000" //刻度线标签颜色 }, //设置坐标轴字体颜色和宽度 @@ -260,7 +263,7 @@ export class verifiedComponent implements OnInit { left: 'center', textStyle:{ color:'#000', - fontSize: 18, + fontSize: 30, } }, //提示框 @@ -269,10 +272,14 @@ export class verifiedComponent implements OnInit { }, legend: { data: ['平均值','平均值2倍','平均值3倍', '已核查无需修改', '已核查修改中', '已核查提交审核'], - textStyle: { color: '#000' } + textStyle: { fontSize :15,color: '#000' } }, xAxis: [{ axisLabel: { + textStyle:{ + fontSize :18, + color:'#000000' + }, color: "#000", //刻度线标签颜色 }, //设置坐标轴字体颜色和宽度 @@ -287,10 +294,16 @@ export class verifiedComponent implements OnInit { { //设置坐标轴字体颜色和宽度 axisLine: { - lineStyle: {color: "#000"}, + lineStyle:{ + color:'#000000' + } }, type: 'value', axisLabel: { + textStyle:{ + fontSize :18, + color:'#000000' + }, color: "#000", //刻度线标签颜色 formatter: '{value}' } @@ -314,20 +327,21 @@ export class verifiedComponent implements OnInit { type: 'bar', stack: '总数', data: [68, 56, 69, 57, 43, 79, 78, 66, 49, 34, 49, 78, 45], + barWidth :'38', }, { name: '已核查修改中', type: 'bar', stack: '总数', - data: [39, 43, 49, 27, 53, 29, 38, 49, 29, 40, 40, 27, 54], - itemStyle:{color: '#DC143C'} + data: [39, 3, 4, 7, 3, 2, 3, 4, 29, 40, 40, 2, 4], + itemStyle:{color: '#626c91'} }, { name: '已核查提交审核', type: 'bar', stack: '总数', - data: [48, 42, 43, 53, 47, 39, 25, 26, 54, 34, 39, 24, 14], - itemStyle:{color:'#00BB00'} + data: [48, 2, 3, 3, 4, 3, 2, 26, 4, 3, 3, 24, 14], + itemStyle:{color:'#c4ebad'} }, { name: '平均值', @@ -341,7 +355,7 @@ export class verifiedComponent implements OnInit { type: 'line', // yAxisIndex: 1, data: [98, 90, 106, 94, 98, 86, 96, 82, 76, 78, 82, 86, 74], - itemStyle:{color: '#FF00FF'} + itemStyle:{color: '#6be6c1'} }, { name: '平均值3倍', @@ -404,9 +418,6 @@ export class notVerifiedComponent implements OnInit { }, tooltip: { trigger: 'axis', - backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 - borderWidth:'1', - borderRadius :'0', formatter: (params)=>{ return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'未核查') }, @@ -560,14 +571,14 @@ export class detailedInformationComponent implements OnInit { type: 'bar', stack: '总数', data: [39, 43, 49, 27, 53, 29, 38, 49, 29, 40, 40, 27, 54], - itemStyle:{color: '#DC143C'} + itemStyle:{color: '#626c91'} }, { name: '已核查提交审核', type: 'bar', stack: '总数', data: [48, 42, 43, 53, 47, 39, 25, 26, 54, 34, 39, 24, 14], - itemStyle:{color:'#00BB00'} + itemStyle:{color:'#c4ebad'} }, { name: '平均值', @@ -581,7 +592,7 @@ export class detailedInformationComponent implements OnInit { type: 'line', // yAxisIndex: 1, data: [98, 90, 106, 94, 98, 86, 96, 82, 76, 78, 82, 86, 74], - itemStyle:{color: '#FF00FF'} + itemStyle:{color: '#6be6c1'} }, { name: '平均值3倍', @@ -689,19 +700,19 @@ export class moreTableComponent implements OnInit { displayedColumns: string[]=['team','header','time']; dataSource:any = [ - {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-03',team: '浦东支队'}, - {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '徐汇支队'}, - {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '普陀支队'}, - {content: '1月份已核查案件 高于平均值', time: '2020-02-05',team: '黄浦支队'}, - {content: '1月份已核查案件 高于平均值', time: '2020-02-05',team: '长宁支队'}, - {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '静安支队'}, - {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '虹口支队'}, - {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '杨浦支队'}, - {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '闵行支队'}, - {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '宝山支队'}, - {content: '1月份已核查案件 高于平均值', time: '2020-02-07',team: '嘉定支队'}, - {content: '1月份已核查案件 高于平均值', time: '2020-02-07',team: '崇明支队'}, {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '金山支队'}, + {content: '1月份已核查案件 高于平均值', time: '2020-02-07',team: '崇明支队'}, + {content: '1月份已核查案件 高于平均值', time: '2020-02-07',team: '嘉定支队'}, + {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '宝山支队'}, + {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '闵行支队'}, + {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-07',team: '杨浦支队'}, + {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '虹口支队'}, + {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '静安支队'}, + {content: '1月份已核查案件 高于平均值', time: '2020-02-05',team: '长宁支队'}, + {content: '1月份已核查案件 高于平均值', time: '2020-02-05',team: '黄浦支队'}, + {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '普陀支队'}, + {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-05',team: '徐汇支队'}, + {content: '1月份已核查案件 高于平均值2倍', time: '2020-02-03',team: '浦东支队'} ] diff --git a/src/app/statistic-analysis/scheduled-updates/verified.html b/src/app/statistic-analysis/scheduled-updates/verified.html index acace8e..c10d9d9 100644 --- a/src/app/statistic-analysis/scheduled-updates/verified.html +++ b/src/app/statistic-analysis/scheduled-updates/verified.html @@ -1,7 +1,15 @@ +
-
-
+
+
diff --git a/src/app/statistic-analysis/state/page-one/page-one.component.ts b/src/app/statistic-analysis/state/page-one/page-one.component.ts index d477ca4..e697d7e 100644 --- a/src/app/statistic-analysis/state/page-one/page-one.component.ts +++ b/src/app/statistic-analysis/state/page-one/page-one.component.ts @@ -4,10 +4,11 @@ * @Author: sueRimn * @Date: 2020-09-01 15:24:39 * @LastEditors: sueRimn - * @LastEditTime: 2020-09-02 16:52:44 + * @LastEditTime: 2020-09-08 15:37:55 */ import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; +import {EchartsDataService,} from '../../echarts-data.service' declare var echarts: any; @Component({ @@ -18,7 +19,7 @@ declare var echarts: any; export class PageOneComponent implements OnInit { options:any; - constructor(private router: Router) { } + constructor(private router: Router,public echartsData:EchartsDataService) { } ngOnInit() { window.setTimeout(()=>{ @@ -35,7 +36,7 @@ export class PageOneComponent implements OnInit { indexBzt initCharts(){ var ec = echarts as any; - this.indexBzt = ec.init(document.getElementById('indexBzt')); + this.indexBzt = ec.init(document.getElementById('indexBzt'),'walden'); var options={ title: { text: '预案状态统计(7005家)', @@ -48,13 +49,8 @@ export class PageOneComponent implements OnInit { tooltip: { trigger: 'item', formatter: (params)=>{ - return this.biaogeTishi(params.name) - } , - backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 - borderWidth:'1', - borderRadius :'0' - - + return this.echartsData.biaogeTishiZhi(params.name) + } }, legend: { orient: 'vertical', @@ -64,7 +60,8 @@ export class PageOneComponent implements OnInit { // itemWidth:60, // itemHeight:25, textStyle:{ - // fontSize:28 + fontSize:18, + color:"#000000" }, data: ['预案新增', '预案审核通过', '预案编制', '预案审核退回', '预案审核中'] }, @@ -78,7 +75,7 @@ export class PageOneComponent implements OnInit { normal:{ show:true, // position: 'inner', - // fontSize:18, + fontSize:18, formatter:'{b} {c}\n({d}%)', }, rich: { 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 34eb310..0bde65c 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,8 +1,16 @@ +
-
+
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 93b47ee..08baac9 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 @@ -4,6 +4,7 @@ #pie{ width: 100%; height: 450px; + // padding-top: 20px; } .histogramBox{ width: 100%; 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 12d64cd..02aa1b3 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,7 +1,7 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { Router,ActivatedRoute } from '@angular/router' import { PageZhongDuiDetailsComponent } from '../page-zhong-dui-details/page-zhong-dui-details.component'; -import {EchartsDataService} from '../../echarts-data.service' +import {EchartsDataService} from '../../echarts-data.service'; declare var echarts: any; @Component({ selector: 'app-page-two-name', @@ -16,6 +16,7 @@ export class PageTwoNameComponent implements OnInit { ngOnInit(): void { setTimeout(() => { + this.bianli() this.planState() this.planAdd() this.passPlanEchart() @@ -46,7 +47,11 @@ export class PageTwoNameComponent implements OnInit { } axisLabel = { - interval: 0, + interval: 0, + textStyle:{ + fontSize :16, + color:'#000000' + }, formatter:function(value) { var ret = "";//拼接加\n返回的类目项 @@ -83,17 +88,30 @@ export class PageTwoNameComponent implements OnInit { zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"] zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70] - + tiaoshiPao:any + //气泡提示数据获取 + bianli(){ + var arrshuzu='['; + for(var i=0;i{ - return this.tableTooltip2(params.name) + return this.data.biaogeTishi(params.name) }, - backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 - borderWidth:'1', - borderRadius :'0' + position: this.data.tableTooltipNoShow2 }, series: [{ data: this.zhiNumData, type: 'bar', - showBackground: true, + markPoint: { + data: this.tiaoshiPao + }, backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' }, barWidth :'28', - label: this.topTextlabel + //label: this.topTextlabel }] }; this.addEchart.setOption(option); @@ -137,12 +163,13 @@ export class PageTwoNameComponent implements OnInit { //预案审核通过 passPlanEchart (){ let _this = this - this.passPlanEchartObj = echarts.init(document.getElementById('passPlanEchart')); + this.passPlanEchartObj = echarts.init(document.getElementById('passPlanEchart'),'walden'); var option = { title: { - text: "预案审核通过", + text: "预案审核通过:总数(1024)", left: "center", - top: "15", + top: "0", + bottom: '100%', textStyle: { fontSize: 23 } @@ -153,26 +180,33 @@ export class PageTwoNameComponent implements OnInit { axisLabel: this.axisLabel }, yAxis: { - type: 'value' + type: 'value', + axisLabel:{ + //this.axisLabel, + textStyle:{ + fontSize :16, + color:'#000000' + } + } }, tooltip: { trigger: 'item', formatter: (params)=>{ - return this.tableTooltip2(params.name) + return this.data.biaogeTishi(params.name) }, - backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 - borderWidth:'1', - borderRadius :'0' + position: this.data.tableTooltipNoShow2 }, series: [{ data: this.zhiNumData, type: 'bar', - showBackground: true, + markPoint: { + data: this.tiaoshiPao + }, backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' }, barWidth :'28', - label: this.topTextlabel + //label: this.topTextlabel }] }; this.passPlanEchartObj.setOption(option); @@ -185,12 +219,13 @@ export class PageTwoNameComponent implements OnInit { //预案编制 planMake (){ let _this = this - this.passMakeEchart = echarts.init(document.getElementById('planMake')); + this.passMakeEchart = echarts.init(document.getElementById('planMake'),'walden'); var option = { title: { - text: "预案编制", + text: "预案编制:总数(1024)", left: "center", - top: "15", + top: "0", + bottom: '100%', textStyle: { fontSize: 23 } @@ -201,26 +236,34 @@ export class PageTwoNameComponent implements OnInit { axisLabel: this.axisLabel }, yAxis: { - type: 'value' + type: 'value', + axisLabel:{ + //this.axisLabel, + textStyle:{ + fontSize :16, + color:'#000000' + } + } }, tooltip: { trigger: 'item', formatter: (params)=>{ - return this.tableTooltip2(params.name) + return this.data.biaogeTishi(params.name) }, - backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 - borderWidth:'1', - borderRadius :'0' + position: this.data.tableTooltipNoShow2 + }, series: [{ data: this.zhiNumData, type: 'bar', - showBackground: true, + markPoint: { + data: this.tiaoshiPao + }, backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' }, barWidth :'28', - label: this.topTextlabel + //label: this.topTextlabel }] }; this.passMakeEchart.setOption(option); @@ -233,12 +276,13 @@ export class PageTwoNameComponent implements OnInit { //预案审核退回 planBack (){ let _this = this - this.passBackEchart = echarts.init(document.getElementById('planBack')); + this.passBackEchart = echarts.init(document.getElementById('planBack'),'walden'); var option = { title: { - text: "预案审核退回", + text: "预案审核退回:总数(1024)", left: "center", - top: "15", + top: "0", + bottom: '100%', textStyle: { fontSize: 23 } @@ -249,26 +293,34 @@ export class PageTwoNameComponent implements OnInit { axisLabel: this.axisLabel }, yAxis: { - type: 'value' + type: 'value', + axisLabel:{ + //this.axisLabel, + textStyle:{ + fontSize :16, + color:'#000000' + } + } }, tooltip: { trigger: 'item', formatter: (params)=>{ - return this.tableTooltip2(params.name) + return this.data.biaogeTishi(params.name) }, - backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 - borderWidth:'1', - borderRadius :'0' + position: this.data.tableTooltipNoShow2 + }, series: [{ data: this.zhiNumData, type: 'bar', - showBackground: true, + markPoint: { + data: this.tiaoshiPao + }, backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' }, barWidth :'28', - label: this.topTextlabel + //label: this.topTextlabel }] }; this.passBackEchart.setOption(option); @@ -281,12 +333,13 @@ export class PageTwoNameComponent implements OnInit { //预案审核中 planAudit (){ let _this = this - this.planAuditEchart = echarts.init(document.getElementById('planAudit')); + this.planAuditEchart = echarts.init(document.getElementById('planAudit'),'walden'); var option = { title: { - text: "预案审核中", + text: "预案审核中:总数(1024)", left: "center", - top: "15", + top: "0", + bottom: '100%', textStyle: { fontSize: 23 } @@ -297,26 +350,34 @@ export class PageTwoNameComponent implements OnInit { axisLabel: this.axisLabel }, yAxis: { - type: 'value' + type: 'value', + axisLabel:{ + //this.axisLabel, + textStyle:{ + fontSize :16, + color:'#000000' + } + } }, tooltip: { trigger: 'item', formatter: (params)=>{ - return this.tableTooltip2(params.name) + return this.data.biaogeTishi(params.name) }, - backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 - borderWidth:'1', - borderRadius :'0' + position: this.data.tableTooltipNoShow2 + }, series: [{ data: this.zhiNumData, type: 'bar', - showBackground: true, + markPoint: { + data: this.tiaoshiPao + }, backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' }, barWidth :'28', - label: this.topTextlabel + //label: this.topTextlabel }] }; this.planAuditEchart.setOption(option); @@ -328,70 +389,38 @@ export class PageTwoNameComponent implements OnInit { topEchart //预案状态统计 planState(){ - this.topEchart = echarts.init(document.getElementById('pie')); + this.topEchart = echarts.init(document.getElementById('pie'),'walden'); var option = { title: { text: '预案状态统计(7005份)', left: 'center', - top: "11%", + top: "6%", textStyle: { - fontSize: 23 + fontSize: 30 } }, tooltip: { trigger: 'item', formatter: (params)=>{ - return this.tableTooltip(params.name) + return this.data.biaogeTishi(params.name) }, - backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 - borderWidth:'1', - borderRadius :'0', - position: function (point, params, dom, rect, size) { - // 鼠标坐标和提示框位置的参考坐标系是:以外层div的左上角那一点为原点,x轴向右,y轴向下 - // 提示框位置 - var x = 0; // x坐标位置 - var y = 0; // y坐标位置 - - // 当前鼠标位置 - var pointX = point[0]; - var pointY = point[1]; - - // 外层div大小 - // var viewWidth = size.viewSize[0]; - // var viewHeight = size.viewSize[1]; - - // 提示框大小 - var boxWidth = size.contentSize[0]; - var boxHeight = size.contentSize[1]; - - // boxWidth > pointX 说明鼠标左边放不下提示框 - if (boxWidth > pointX) { - x = 35; - } else { // 左边放的下 - x = pointX + 80; - } - - // boxHeight > pointY 说明鼠标上边放不下提示框 - if (boxHeight > pointY) { - y = 65; - } else { // 上边放得下 - y = pointY - boxHeight; - } - - return [pointX, pointY]; - } + position: this.data.tableTooltipNoShow2 }, legend: { orient: 'vertical', - right: '23%', + right: '13%', top: "26%", + textStyle:{ + fontSize:18, + color:"#000000" + }, data: ['预案新增', '预案审核通过', '预案编制', '预案审核退回', '预案审核中'] }, series: [ { name: '访问来源', type: 'pie', - radius: '60%', + radius: '80%', center: ['50%', '60%'], data: [ {value: 1585, name: '预案新增'}, @@ -402,6 +431,7 @@ export class PageTwoNameComponent implements OnInit { ], label: { formatter: '{b}({c}份)\n{d|{d}%}', + fontSize :18, rich: { d: { align: 'center', 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 6539f62..89a5e27 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,3 +1,11 @@ +
@@ -59,13 +67,13 @@
- - + +
-
+
diff --git a/src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts b/src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts index 8426b44..596caca 100644 --- a/src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts +++ b/src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts @@ -22,6 +22,7 @@ export class PageTwoTimeComponent implements OnInit { ngOnInit(): void { this.echartsData.statefulInspectionToggle = true this.dateInit() + this.bianli() } isQuery:boolean = true; //横纵向查询 @@ -48,6 +49,21 @@ export class PageTwoTimeComponent implements OnInit { //查询数据 years:any = [] selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12] + tiaoshiPao:any + datayuey=[270, 253, 244, 199, 189, 173, 160, 198,200] + datayuex=['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'] + //气泡提示数据获取 + bianli(){ + var arrshuzu='['; + for(var i=0;i,public echartsData:EchartsDataService) { } + tiaoshiPao:any + datayuey=[270, 253, 244, 199, 189, 173, 160, 198,200] + datayuex=['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'] + //气泡提示数据获取 + bianli(){ + var arrshuzu='['; + for(var i=0;i{ + this.bianli() this.oneInit() this.twoInit() this.threeInit() @@ -148,19 +180,16 @@ export class echartsComponent implements OnInit { oneExample:any; oneInit () { - this.oneExample = echarts.init(document.getElementById('one'), 'skinUpp'); + this.oneExample = echarts.init(document.getElementById('one'),'walden'); var option = { grid: { top: 50, left:40, right: 20, - bottom: 20, + }, tooltip: { trigger: 'axis', - backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 - borderWidth:'1', - borderRadius :'0', formatter: (params)=>{ return this.echartsData.tableTooltip(this.echartsData.planData,params[0].name) }, @@ -186,7 +215,7 @@ export class echartsComponent implements OnInit { xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'], - boundaryGap: false, + boundaryGap: true, axisLabel: { color: "#000", //刻度线标签颜色 }, @@ -221,6 +250,11 @@ export class echartsComponent implements OnInit { series: [{ name: '单位预案编制数量', type: 'line', + markPoint: { + + symbolSize:[65, 65], + data: this.tiaoshiPao + }, data: [270, 253, 244, 199, 189, 173, 160, 198,200], } ], @@ -244,6 +278,7 @@ export class echartsComponent implements OnInit { text: '预案新增', top: -4, left: 'center', + bottom: 100, textStyle:{ //文字颜色 color:'#000', @@ -251,9 +286,7 @@ export class echartsComponent implements OnInit { }, tooltip: { trigger: 'axis', - backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 - borderWidth:'1', - borderRadius :'0', + formatter: (params)=>{ return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案新增') } @@ -262,7 +295,7 @@ export class echartsComponent implements OnInit { xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'], - boundaryGap: false, + boundaryGap: true, axisLabel: { color: "#000", //刻度线标签颜色 }, @@ -297,6 +330,11 @@ export class echartsComponent implements OnInit { series: [{ name: '单位预案编制数量', type: 'line', + markPoint: { + + symbolSize:[65, 65], + data: this.tiaoshiPao + }, data: [270, 253, 244, 199, 189, 173, 160, 198,200], } ], @@ -317,13 +355,13 @@ export class echartsComponent implements OnInit { top: 50, left:40, right: 20, - bottom: 20, }, // 标题 title: { text: '预案审核通过', top: -4, left: 'center', + bottom: 100, textStyle:{ //文字颜色 color:'#000', @@ -332,9 +370,6 @@ export class echartsComponent implements OnInit { //提示框 tooltip: { trigger: 'axis', - backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 - borderWidth:'1', - borderRadius :'0', formatter: (params)=>{ return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案审核通过') } @@ -343,7 +378,7 @@ export class echartsComponent implements OnInit { xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'], - boundaryGap: false, + boundaryGap: true, axisLabel: { color: "#000", //刻度线标签颜色 }, @@ -378,6 +413,11 @@ export class echartsComponent implements OnInit { series: [{ name: '单位预案编制数量', type: 'line', + markPoint: { + + symbolSize:[65, 65], + data: this.tiaoshiPao + }, data: [270, 253, 244, 199, 189, 173, 160, 198,200], } ], @@ -398,13 +438,13 @@ export class echartsComponent implements OnInit { top: 50, left:40, right: 20, - bottom: 20, }, // 标题 title: { text: '预案编制', top: -4, left: 'center', + bottom: 100, textStyle:{ //文字颜色 color:'#000', @@ -413,9 +453,7 @@ export class echartsComponent implements OnInit { //提示框 tooltip: { trigger: 'axis', - backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 - borderWidth:'1', - borderRadius :'0', + formatter: (params)=>{ return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案编制') } @@ -424,7 +462,7 @@ export class echartsComponent implements OnInit { xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'], - boundaryGap: false, + boundaryGap: true, axisLabel: { color: "#000", //刻度线标签颜色 }, @@ -459,6 +497,11 @@ export class echartsComponent implements OnInit { series: [{ name: '单位预案编制数量', type: 'line', + markPoint: { + + symbolSize:[65, 65], + data: this.tiaoshiPao + }, data: [270, 253, 244, 199, 189, 173, 160, 198,200], } ], @@ -486,6 +529,7 @@ export class echartsComponent implements OnInit { text: '预案审核退回', top: -4, left: 'center', + bottom: 100, textStyle:{ //文字颜色 color:'#000', @@ -494,9 +538,7 @@ export class echartsComponent implements OnInit { //提示框 tooltip: { trigger: 'axis', - backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 - borderWidth:'1', - borderRadius :'0', + formatter: (params)=>{ return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案审核退回') } @@ -505,7 +547,7 @@ export class echartsComponent implements OnInit { xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'], - boundaryGap: false, + boundaryGap: true, axisLabel: { color: "#000", //刻度线标签颜色 }, @@ -540,6 +582,11 @@ export class echartsComponent implements OnInit { series: [{ name: '单位预案编制数量', type: 'line', + markPoint: { + + symbolSize:[65, 65], + data: this.tiaoshiPao + }, data: [270, 253, 244, 199, 189, 173, 160, 198,200], } ], @@ -575,9 +622,7 @@ export class echartsComponent implements OnInit { //提示框 tooltip: { trigger: 'axis', - backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 - borderWidth:'1', - borderRadius :'0', + formatter: (params)=>{ return this.echartsData.tableTooltip(this.echartsData.tableDataZhi,'预案审核中') } @@ -586,7 +631,7 @@ export class echartsComponent implements OnInit { xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'], - boundaryGap: false, + boundaryGap: true, axisLabel: { color: "#000", //刻度线标签颜色 }, @@ -621,6 +666,11 @@ export class echartsComponent implements OnInit { series: [{ name: '单位预案编制数量', type: 'line', + markPoint: { + + symbolSize:[65, 65], + data: this.tiaoshiPao + }, data: [270, 253, 244, 199, 189, 173, 160, 198,200], } ], diff --git a/src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.scss b/src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.scss index 1e25505..3c24667 100644 --- a/src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.scss +++ b/src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.scss @@ -4,7 +4,7 @@ position: relative; #detailBox{ width: 100%; - height: 350px; + height: 550px; position: absolute; left: 50%; top: 45%; diff --git a/src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.ts b/src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.ts index 9ee875a..98b0e83 100644 --- a/src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.ts +++ b/src/app/statistic-analysis/state/page-zhong-dui-details/page-zhong-dui-details.component.ts @@ -1,3 +1,11 @@ +/* + * @Descripttion: + * @version: + * @Author: sueRimn + * @Date: 2020-09-05 13:50:45 + * @LastEditors: sueRimn + * @LastEditTime: 2020-09-10 09:51:32 + */ import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import {EchartsDataService} from '../../echarts-data.service' @@ -13,9 +21,23 @@ export class PageZhongDuiDetailsComponent implements OnInit { zhongNameData = ["浦东中队","黄埔中队","徐汇中队","长宁中队","静安中队","普陀中队","虹口中队","杨浦中队","闵行中队","宝山中队","嘉定中队"] zhongNumData = [200,190,180,170,160,150,140,130,120,110,100] + tiaoshiPao:any + //气泡提示数据获取 + bianli(){ + var arrshuzu='['; + for(var i=0;i{ + this.bianli() this.detailEcharts() }) } @@ -25,40 +47,57 @@ export class PageZhongDuiDetailsComponent implements OnInit { } detailPlanEchart detailEcharts(){ - this.detailPlanEchart = echarts.init(document.getElementById('detailBox')); + this.detailPlanEchart = echarts.init(document.getElementById('detailBox'),'walden'); var option = { title: { - text: this.data.statefulInspectionName, + text: this.data.statefulInspectionName+':总数(666)', left: "center", + top: "0", textStyle: { - fontSize: 28 + fontSize: 30 } }, xAxis: { type: 'category', data: this.zhongNameData, - // axisLabel: this.axisLabel + axisLabel:{ + //this.axisLabel, + textStyle:{ + fontSize :18, + color:'#000000' + } + + } }, yAxis: { - type: 'value' + type: 'value', + axisLabel:{ + textStyle:{ + fontSize :18, + color:'#000000' + } + + } }, tooltip: { trigger: 'item', formatter: (params)=>{ return this.tableTooltip(params) }, - backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度 - borderWidth:'1', - borderRadius :'0' + position: this.data.tableTooltipNoShow2 }, series: [{ data: this.zhongNumData, type: 'bar', - showBackground: true, + markPoint: { + + symbolSize:[65, 65], + data: this.tiaoshiPao + }, backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' }, - barWidth :'58' + barWidth :'38' }] }; this.detailPlanEchart.setOption(option); @@ -69,19 +108,19 @@ export class PageZhongDuiDetailsComponent implements OnInit { var data = [ {name:params.name,number:params.value,zhanbi:(params.value/1340 * 100).toFixed(2) + "%"} ] - var res = '
'+params.name+'
' - res+='
'; + var res = '
'+params.name+'
' + res+='
'; res+=''; - res+=''; - res+='' - res+='' + res+=''; + res+='' + res+='' res+='' res+=''; for(var i=0;i' - res+='' - res+='' + res+='' + res+='' + res+='' } res+='' diff --git a/src/assets/chartstheme/walden.js b/src/assets/chartstheme/walden.js new file mode 100644 index 0000000..4b74cf5 --- /dev/null +++ b/src/assets/chartstheme/walden.js @@ -0,0 +1,512 @@ + +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module. + define(['exports', 'echarts'], factory); + } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') { + // CommonJS + factory(exports, require('echarts')); + } else { + // Browser globals + factory({}, root.echarts); + } +}(this, function (exports, echarts) { + var log = function (msg) { + if (typeof console !== 'undefined') { + console && console.error && console.error(msg); + } + }; + if (!echarts) { + log('ECharts is not Loaded'); + return; + } + echarts.registerTheme('walden', { + "color": [ + "#3fb1e3", + "#6be6c1", + "#626c91", + "#a0a7e6", + "#c4ebad", + "#96dee8" + ], + "backgroundColor": "rgba(252,252,252,0)", + "textStyle": {}, + "title": { + "textStyle": { + "color": "#666666" + }, + "subtextStyle": { + "color": "#999999" + } + }, + "line": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "3" + } + }, + "symbolSize": "8", + "symbol": "emptyCircle", + "smooth": false + }, + "radar": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "3" + } + }, + "symbolSize": "8", + "symbol": "emptyCircle", + "smooth": false + }, + "bar": { + "itemStyle": { + "normal": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + }, + "emphasis": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + } + } + }, + "pie": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "scatter": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "boxplot": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "parallel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "sankey": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "funnel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "gauge": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "candlestick": { + "itemStyle": { + "normal": { + "color": "#e6a0d2", + "color0": "transparent", + "borderColor": "#e6a0d2", + "borderColor0": "#3fb1e3", + "borderWidth": "2" + } + } + }, + "graph": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "lineStyle": { + "normal": { + "width": "1", + "color": "#cccccc" + } + }, + "symbolSize": "8", + "symbol": "emptyCircle", + "smooth": false, + "color": [ + "#3fb1e3", + "#6be6c1", + "#626c91", + "#a0a7e6", + "#c4ebad", + "#96dee8" + ], + "label": { + "normal": { + "textStyle": { + "color": "#ffffff" + } + } + } + }, + "map": { + "itemStyle": { + "normal": { + "areaColor": "#eeeeee", + "borderColor": "#aaaaaa", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(63,177,227,0.25)", + "borderColor": "#3fb1e3", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#ffffff" + } + }, + "emphasis": { + "textStyle": { + "color": "#3fb1e3" + } + } + } + }, + "geo": { + "itemStyle": { + "normal": { + "areaColor": "#eeeeee", + "borderColor": "#aaaaaa", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(63,177,227,0.25)", + "borderColor": "#3fb1e3", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#ffffff" + } + }, + "emphasis": { + "textStyle": { + "color": "#3fb1e3" + } + } + } + }, + "categoryAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "valueAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "logAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "timeAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "toolbox": { + "iconStyle": { + "normal": { + "borderColor": "#999999" + }, + "emphasis": { + "borderColor": "#666666" + } + } + }, + "legend": { + "textStyle": { + "color": "#999999" + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "color": "#cccccc", + "width": 1 + }, + "crossStyle": { + "color": "#cccccc", + "width": 1 + } + } + }, + "timeline": { + "lineStyle": { + "color": "#626c91", + "width": 1 + }, + "itemStyle": { + "normal": { + "color": "#626c91", + "borderWidth": 1 + }, + "emphasis": { + "color": "#626c91" + } + }, + "controlStyle": { + "normal": { + "color": "#626c91", + "borderColor": "#626c91", + "borderWidth": 0.5 + }, + "emphasis": { + "color": "#626c91", + "borderColor": "#626c91", + "borderWidth": 0.5 + } + }, + "checkpointStyle": { + "color": "#3fb1e3", + "borderColor": "rgba(63,177,227,0.15)" + }, + "label": { + "normal": { + "textStyle": { + "color": "#626c91" + } + }, + "emphasis": { + "textStyle": { + "color": "#626c91" + } + } + } + }, + "visualMap": { + "color": [ + "#2a99c9", + "#afe8ff" + ] + }, + "dataZoom": { + "backgroundColor": "rgba(255,255,255,0)", + "dataBackgroundColor": "rgba(222,222,222,1)", + "fillerColor": "rgba(114,230,212,0.25)", + "handleColor": "#cccccc", + "handleSize": "100%", + "textStyle": { + "color": "#999999" + } + }, + "markPoint": { + "label": { + "normal": { + "textStyle": { + "color": "#ffffff" + } + }, + "emphasis": { + "textStyle": { + "color": "#ffffff" + } + } + } + } + }); +})); diff --git a/src/assets/chartstheme/walden.project.json b/src/assets/chartstheme/walden.project.json new file mode 100644 index 0000000..cf27f4a --- /dev/null +++ b/src/assets/chartstheme/walden.project.json @@ -0,0 +1,167 @@ +{ + "version": 1, + "themeName": "walden", + "theme": { + "seriesCnt": "3", + "backgroundColor": "rgba(252,252,252,0)", + "titleColor": "#666666", + "subtitleColor": "#999999", + "textColorShow": false, + "textColor": "#333", + "markTextColor": "#ffffff", + "color": [ + "#3fb1e3", + "#6be6c1", + "#626c91", + "#a0a7e6", + "#c4ebad", + "#96dee8" + ], + "borderColor": "#ccc", + "borderWidth": 0, + "visualMapColor": [ + "#2a99c9", + "#afe8ff" + ], + "legendTextColor": "#999999", + "kColor": "#e6a0d2", + "kColor0": "transparent", + "kBorderColor": "#e6a0d2", + "kBorderColor0": "#3fb1e3", + "kBorderWidth": "2", + "lineWidth": "3", + "symbolSize": "8", + "symbol": "emptyCircle", + "symbolBorderWidth": "2", + "lineSmooth": false, + "graphLineWidth": "1", + "graphLineColor": "#cccccc", + "mapLabelColor": "#ffffff", + "mapLabelColorE": "#3fb1e3", + "mapBorderColor": "#aaaaaa", + "mapBorderColorE": "#3fb1e3", + "mapBorderWidth": 0.5, + "mapBorderWidthE": 1, + "mapAreaColor": "#eeeeee", + "mapAreaColorE": "rgba(63,177,227,0.25)", + "axes": [ + { + "type": "all", + "name": "通用坐标轴", + "axisLineShow": true, + "axisLineColor": "#cccccc", + "axisTickShow": false, + "axisTickColor": "#333", + "axisLabelShow": true, + "axisLabelColor": "#999999", + "splitLineShow": false, + "splitLineColor": [ + "#eeeeee" + ], + "splitAreaShow": false, + "splitAreaColor": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + }, + { + "type": "category", + "name": "类目坐标轴", + "axisLineShow": true, + "axisLineColor": "#333", + "axisTickShow": true, + "axisTickColor": "#333", + "axisLabelShow": true, + "axisLabelColor": "#333", + "splitLineShow": false, + "splitLineColor": [ + "#ccc" + ], + "splitAreaShow": false, + "splitAreaColor": [ + "rgba(250,250,250,0.3)", + "rgba(200,200,200,0.3)" + ] + }, + { + "type": "value", + "name": "数值坐标轴", + "axisLineShow": true, + "axisLineColor": "#333", + "axisTickShow": true, + "axisTickColor": "#333", + "axisLabelShow": true, + "axisLabelColor": "#333", + "splitLineShow": true, + "splitLineColor": [ + "#ccc" + ], + "splitAreaShow": false, + "splitAreaColor": [ + "rgba(250,250,250,0.3)", + "rgba(200,200,200,0.3)" + ] + }, + { + "type": "log", + "name": "对数坐标轴", + "axisLineShow": true, + "axisLineColor": "#333", + "axisTickShow": true, + "axisTickColor": "#333", + "axisLabelShow": true, + "axisLabelColor": "#333", + "splitLineShow": true, + "splitLineColor": [ + "#ccc" + ], + "splitAreaShow": false, + "splitAreaColor": [ + "rgba(250,250,250,0.3)", + "rgba(200,200,200,0.3)" + ] + }, + { + "type": "time", + "name": "时间坐标轴", + "axisLineShow": true, + "axisLineColor": "#333", + "axisTickShow": true, + "axisTickColor": "#333", + "axisLabelShow": true, + "axisLabelColor": "#333", + "splitLineShow": true, + "splitLineColor": [ + "#ccc" + ], + "splitAreaShow": false, + "splitAreaColor": [ + "rgba(250,250,250,0.3)", + "rgba(200,200,200,0.3)" + ] + } + ], + "axisSeperateSetting": false, + "toolboxColor": "#999999", + "toolboxEmphasisColor": "#666666", + "tooltipAxisColor": "#cccccc", + "tooltipAxisWidth": 1, + "timelineLineColor": "#626c91", + "timelineLineWidth": 1, + "timelineItemColor": "#626c91", + "timelineItemColorE": "#626c91", + "timelineCheckColor": "#3fb1e3", + "timelineCheckBorderColor": "rgba(63,177,227,0.15)", + "timelineItemBorderWidth": 1, + "timelineControlColor": "#626c91", + "timelineControlBorderColor": "#626c91", + "timelineControlBorderWidth": 0.5, + "timelineLabelColor": "#626c91", + "datazoomBackgroundColor": "rgba(255,255,255,0)", + "datazoomDataColor": "rgba(222,222,222,1)", + "datazoomFillColor": "rgba(114,230,212,0.25)", + "datazoomHandleColor": "#cccccc", + "datazoomHandleWidth": "100", + "datazoomLabelColor": "#999999" + } +} \ No newline at end of file
名称数量总占比名称数量总占比
'+data[i].number+''+data[i].zhanbi+'
'+data[i].name+''+data[i].number+''+data[i].zhanbi+'