shaojiahao
/
ShangHai-YuAn
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

[完善] echarts图标完善

master
陈鹏飞 5 years ago
parent
6dc43559d0
commit
401b305ec4
5 changed files with 625 additions and 4 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      src/app/statistic-analysis/state/page-two-time/echarts.html
  2. 40
      src/app/statistic-analysis/state/page-two-time/page-two-time.component.html
  3. 63
      src/app/statistic-analysis/state/page-two-time/page-two-time.component.scss
  4. 515
      src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts
  5. 4
      src/app/statistic-analysis/statistic-analysis.module.ts

7
src/app/statistic-analysis/state/page-two-time/echarts.html
Unescape View File

@ -0,0 +1,7 @@
<div style="height: 450px;width: 50%;margin: 0 auto;" id="one"></div>
<div class="publicCss" id="two"></div>
<div class="publicCss" id="three"></div>
<div class="publicCss" id="four"></div>
<div class="publicCss" id="five"></div>
<div class="publicCss" id="six"></div>

40
src/app/statistic-analysis/state/page-two-time/page-two-time.component.html
Unescape View File

@ -1 +1,39 @@
<p>page-two-time works!</p>
<div class="content">
<div class="header">
<form #form="ngForm">
<div class="queryBox">
<div class="queryField">
<label style="margin-right: 10px;">开始时间:</label>
<input matInput [matDatepicker]="start" placeholder="请选择开始时间" readonly (dateChange)="startEvent($event)" [formControl]='startTime'>
<mat-datepicker-toggle matSuffix [for]="start"></mat-datepicker-toggle>
<mat-datepicker #start></mat-datepicker>
</div>
<div class="queryField">
<label style="margin-right: 10px;">结束时间:</label>
<input matInput [matDatepicker]="end" placeholder="请选择结束时间" readonly (dateChange)="endEvent($event)" [formControl]='endTime'>
<mat-datepicker-toggle matSuffix [for]="end"></mat-datepicker-toggle>
<mat-datepicker #end></mat-datepicker>
</div>
<div class="btnbox" style="margin-left: 30px;">
<button mat-raised-button color="primary">查询</button>
</div>
</div>
</form>
<div style="position: fixed; right: 30px; top: 82px;">
<button mat-raised-button color="primary" (click)='toggleTrue()'>横向查询</button>
<button mat-raised-button color="primary" style="margin-left: 10px;" (click)='toggleFalse()'>纵向查询</button>
</div>
</div>
<div class="echarts">
<div class="center">
<app-echarts *ngIf="isQuery"></app-echarts>
</div>
</div>
</div>

63
src/app/statistic-analysis/state/page-two-time/page-two-time.component.scss
Unescape View File

@ -0,0 +1,63 @@
.content {
width: 100%;
height: 93%;
display: flex;
flex-direction: column;
overflow: hidden;
.echarts {
flex: 100%;
box-sizing: border-box;
padding: 10px;
overflow: hidden;
.center {
width: 100%;
height: 100%;
overflow: auto;;
}
}
}
.header {
padding: 10px;
box-sizing: border-box;
border-bottom: 1px solid #999;
.queryBox {
box-sizing: border-box;
padding: 5px 15px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items:center;
justify-content:center;
.queryField {
margin: 0 15px;
font-size: 14px;
input {
width: 180px;
height: 22px;
line-height: 22px;
}
}
.btnbox{
float: right;
}
} //queryBox
}
.publicCss{
height: 350px;
width: 50%;
display: inline-block;
box-sizing: border-box;
padding: 20px;
}
//滚动条样式
::-webkit-scrollbar{
width: 5px;
background-color: white;
}
::-webkit-scrollbar-thumb{
background-color: #999;
}

515
src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts
Unescape View File

@ -1,4 +1,9 @@
import { Component, OnInit } from '@angular/core';
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
import { MatSnackBarConfig, MatSnackBar } from '@angular/material/snack-bar';
import { FormControl } from '@angular/forms';
import { DateAdapter } from '@angular/material/core';
declare var echarts: any;
@Component({
selector: 'app-page-two-time',
@ -7,9 +12,517 @@ import { Component, OnInit } from '@angular/core';
})
export class PageTwoTimeComponent implements OnInit {
constructor() { }
constructor(public snackBar: MatSnackBar,private adapter: DateAdapter<any>,) { }
ngOnInit(): void {
this.startTime = new FormControl( (new Date()).getFullYear()+ '-' + '01' + '-' + '01' )
this.endTime = new FormControl( new Date() )
this.adapter.setLocale('CH')
}
isQuery:boolean = true; //横纵向查询
toggleTrue () {
this.isQuery = true
}
toggleFalse () {
this.isQuery = false
}
startTime:any; //查询开始时间
endTime:any; //查询结束时间
//选择开始时间
startEvent (e: MatDatepickerInputEvent<Date>) {
let nowTime = new Date()
if (nowTime < e.value) {
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('选择时间不能大于现在时间段','确定',config);
this.startTime = new FormControl( new Date(new Date().toLocaleDateString()) )
} else {
this.startTime = new FormControl(e.value)
}
}
//选择结束时间
endEvent (e: MatDatepickerInputEvent<Date>) {
let oneDay:number = 86399000; //一天的毫秒数
let selectDay = (e.value).toLocaleDateString() //选择的年月日
let newDay = (new Date()).toLocaleDateString() //现在的年月日
let nowTime = new Date() //现在的时间
if (nowTime < e.value && selectDay!=newDay) { //选择时间段大于现在时间段时
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('选择时间不能大于现在时间段','确定',config);
this.endTime = new FormControl( new Date() )
} else if (nowTime > e.value && selectDay!=newDay) { //正常情况下 时间+1天
this.endTime = new FormControl( new Date(e.value.getTime()+oneDay) )
} else if ( selectDay == newDay ) { //选择时间段是今天时
this.endTime = new FormControl( new Date() )
}
}
//处理时间 传入 new Date()格式
getTime(date){
let year = date.getFullYear(); //年
let month = date.getMonth() + 1; //月
let day = date.getDate(); //日
let hour = date.getHours() //时
let min = date.getMinutes(); //分
let seconds = date.getSeconds(); //秒
return year+'-'+month+'-'+ day + " "+ hour +':'+ min +':'+ seconds;
}
}
@Component({
selector: 'app-echarts',
templateUrl: './echarts.html',
styleUrls: ['./page-two-time.component.scss']
})
export class echartsComponent implements OnInit {
constructor(public snackBar: MatSnackBar,private adapter: DateAdapter<any>,) { }
ngOnInit(): void {
window.setTimeout(()=>{
this.oneInit()
this.twoInit()
this.threeInit()
this.fourInit()
this.fiveInit()
this.sixInit()
},0)
}
oneInit () {
var chartQusj = echarts.init(document.getElementById('one'), 'skinUpp');
var option = {
grid: {
top: 50,
left:40,
right: 20,
bottom: 20,
},
// 标题
title: {
text: '预案统计状态',
top: -4,
left: 'center',
subtext:'今年',
　　//副标题文本样式
　　subtextStyle:{
color:'#999',
fontWeight:'bold',
},
textStyle:{
//文字颜色
color:'#000',
fontSize: 22,
}
},
//提示框
tooltip: {
trigger: 'axis',
},
// x轴
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'],
boundaryGap: false,
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: '单位预案编制数量',
type: 'line',
data: [270, 253, 244, 199, 189, 173, 160, 198,200],
}
],
};
chartQusj.setOption(option);
}
twoInit () {
var chartQusj = echarts.init(document.getElementById('two'), 'skinUpp');
var option = {
grid: {
top: 50,
left:40,
right: 20,
bottom: 20,
},
// 标题
title: {
text: '预案新增',
top: -4,
left: 'center',
textStyle:{
//文字颜色
color:'#000',
}
},
//提示框
tooltip: {
trigger: 'axis',
},
// x轴
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'],
boundaryGap: false,
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: '单位预案编制数量',
type: 'line',
data: [270, 253, 244, 199, 189, 173, 160, 198,200],
}
],
};
chartQusj.setOption(option);
}
threeInit () {
var chartQusj = echarts.init(document.getElementById('three'), 'skinUpp');
var option = {
grid: {
top: 50,
left:40,
right: 20,
bottom: 20,
},
// 标题
title: {
text: '预案审核通过',
top: -4,
left: 'center',
textStyle:{
//文字颜色
color:'#000',
}
},
//提示框
tooltip: {
trigger: 'axis',
},
// x轴
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'],
boundaryGap: false,
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: '单位预案编制数量',
type: 'line',
data: [270, 253, 244, 199, 189, 173, 160, 198,200],
}
],
};
chartQusj.setOption(option);
}
fourInit () {
var chartQusj = echarts.init(document.getElementById('four'), 'skinUpp');
var option = {
grid: {
top: 50,
left:40,
right: 20,
bottom: 20,
},
// 标题
title: {
text: '预案编制',
top: -4,
left: 'center',
textStyle:{
//文字颜色
color:'#000',
}
},
//提示框
tooltip: {
trigger: 'axis',
},
// x轴
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'],
boundaryGap: false,
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: '单位预案编制数量',
type: 'line',
data: [270, 253, 244, 199, 189, 173, 160, 198,200],
}
],
};
chartQusj.setOption(option);
}
fiveInit () {
var chartQusj = echarts.init(document.getElementById('five'), 'skinUpp');
var option = {
grid: {
top: 50,
left:40,
right: 20,
bottom: 20,
},
// 标题
title: {
text: '预案审核退回',
top: -4,
left: 'center',
textStyle:{
//文字颜色
color:'#000',
}
},
//提示框
tooltip: {
trigger: 'axis',
},
// x轴
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'],
boundaryGap: false,
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: '单位预案编制数量',
type: 'line',
data: [270, 253, 244, 199, 189, 173, 160, 198,200],
}
],
};
chartQusj.setOption(option);
}
sixInit () {
var chartQusj = echarts.init(document.getElementById('six'), 'skinUpp');
var option = {
grid: {
top: 50,
left:40,
right: 20,
bottom: 20,
},
// 标题
title: {
text: '预案审核中',
top: -4,
left: 'center',
textStyle:{
//文字颜色
color:'#000',
}
},
//提示框
tooltip: {
trigger: 'axis',
},
// x轴
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'],
boundaryGap: false,
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: '单位预案编制数量',
type: 'line',
data: [270, 253, 244, 199, 189, 173, 160, 198,200],
}
],
};
chartQusj.setOption(option);
}
}

4
src/app/statistic-analysis/statistic-analysis.module.ts
Unescape View File

@ -1,7 +1,7 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PageOneComponent } from './state/page-one/page-one.component';
import { PageTwoTimeComponent } from './state/page-two-time/page-two-time.component';
import { PageTwoTimeComponent,echartsComponent } from './state/page-two-time/page-two-time.component';
import { PageTwoNameComponent } from './state/page-two-name/page-two-name.component';
import { StatisticAnalysisRoutingModule } from './statistic-analysis-routing.module';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
@ -49,7 +49,7 @@ import {MatTreeModule} from '@angular/material/tree';
@NgModule({
declarations: [PageOneComponent, PageTwoTimeComponent, PageTwoNameComponent],
declarations: [PageOneComponent, PageTwoTimeComponent, PageTwoNameComponent,echartsComponent],
imports: [
CommonModule,
StatisticAnalysisRoutingModule,

Write Preview
Loading…
Cancel
Save