Skip to content

Commit

Permalink
Merge pull request #14 from wish-cheng/feature/analysis
Browse files Browse the repository at this point in the history 
Add a scatter map and a bar chart in analysis component.
  • Loading branch information
@Tian-Hun
Tian-Hun authored Dec 12, 2018
2 parents 4ff6424 + 1d4e51c commit f886f77
Show file tree
Hide file tree
Showing 4 changed files with 232 additions and 6 deletions.
19 changes: 14 additions & 5 deletions src/app/main/general/dashboards/analysis/analysis.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="page-layout blank dashboard-analysis">
<section fxLayout="row wrap" fxLayout.gt-sm="row nowrap" fxLayoutAlign="space-between stretch" fxLayoutGap.md="15px" fxLayoutGap.gt-md="30px">
<mat-card fxFlex="1 0 0%" fxFlex.xs="100" fxFlex.sm="48"
<mat-card class="card card-shadow" fxFlex="1 0 0%" fxFlex.xs="100" fxFlex.sm="48"
*ngFor="let widget of widgets; let index = index;"
[ngClass.sm]="{'mb-20': index<2}" [ngClass.xs]="{'mb-20': index!==3}">
<mat-card-header>
Expand All @@ -21,10 +21,19 @@
</mat-card-content>
</mat-card>
</section>
<section fxLayout="row nowrap" fxLayoutAlign="space-between center" fxLayoutGap.gt-sm="30px">
<div fxFlex="1 0 0%" fxFlex.lt-md="100">
<!-- <ngx-amap class="map"></ngx-amap> -->
<section fxLayout="row nowrap" fxLayout.lt-md="row wrap" fxLayoutAlign="space-between start" fxLayoutGap.gt-sm="30px">
<div class="card card-shadow" fxFlex="59" fxFlex.lt-md="100" [ngClass.lt-md]="{'mb-32': true}">
<div class="scatter-map" echarts [options]="scatterMapOption"></div>
</div>
<div class="card card-shadow" fxFlex="39" fxFlex.lt-md="100">
<div class="trend-bar" echarts [options]="trendBarOption"></div>
<div class="counter text-left">
<div class="counter-label">Trends in visits in the past week</div>
<div class="counter-number-group">
<span class="counter-number">12,673 </span>
<span class="counter-number-related text-uppercase font-size-14"> visits</span>
</div>
</div>
</div>
<div fxFlex="1 0 0%"></div>
</section>
</div>
38 changes: 38 additions & 0 deletions src/app/main/general/dashboards/analysis/analysis.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,47 @@
width: 100%;
}
}

.card {
border: none;

&.card-shadow {
box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
}

.map {
height: 400px;
width: 100%;
}

.scatter-map {
height: 400px;
width: 100%;
}

.trend-bar {
height: 300px;
width: 100%;
}

.counter {
background: #fff;
width: 100%;
height: 100px;
padding: 20px 30px;
font-size: 14px;
color: #757575;

.counter-label {
display: block;
}

.counter-number-group, .counter-number {
font-size: 32px;
color: #424242;
}

}

}
180 changes: 179 additions & 1 deletion src/app/main/general/dashboards/analysis/analysis.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { NgForage } from 'ngforage';

import { AnalysisService } from './analysis.service';
import { EChartOption } from 'echarts';
import * as echarts from 'echarts';

@Component({
selector: 'analysis',
Expand All @@ -13,10 +16,13 @@ import { AnalysisService } from './analysis.service';
export class AnalysisComponent implements OnInit {

widgets: Array<any>;
scatterMapOption: EChartOption;
trendBarOption: EChartOption;

constructor(
private service: AnalysisService,
private ngForage: NgForage
private ngForage: NgForage,
private http: HttpClient
) {
}

Expand All @@ -27,6 +33,178 @@ export class AnalysisComponent implements OnInit {
});

this.ngForage.setItem('TOKEN_DATA', 'token-demo');

// scatter map option
this.http.get('assets/data/world.json')
.subscribe(worldJson => {
// register map:
echarts.registerMap('world', worldJson);
// update options:
this.scatterMapOption = {
geo: {
map: 'world',
itemStyle: { // 定义样式
normal: { // 普通状态下的样式
areaColor: '#c5cae9',
borderColor: '#fff'
},
emphasis: { // 高亮状态下的样式
areaColor: '#b3bbef'
}
},
label: {
emphasis: {
show: false
}
},
roam: true, // 开启鼠标缩放和平移漫游
zoom: 1,
scaleLimit: {
min: 2,
max: 13
},
center: [21.148055, 27.939372]
},
backgroundColor: '#fff',
tooltip: {
trigger: 'item',
formatter: (params: any) => {
return params.name + ' : ' + params.value[2] + ' ' + params.seriesName;
}
},
visualMap: [{
show: false,
min: 0,
max: 2500,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 文本，默认为数值文本
calculable: true
}],
toolbox: {
show: true,
orient: 'vertical',
left: '10px',
top: 'center',
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
series: [
{
name: 'Visits', // series名称
type: 'scatter', // series图标类型
coordinateSystem: 'geo', // series坐标系类型
data: [
{
name: 'China', // 数据项名称，在这里指地区名称
value: [ // 数据项值
116.46, // 地理坐标，经度
39.92, // 地理坐标，纬度
340 // 北京地区的数值
]
},
{
name: 'Russia',
value: [
103.41, 66.42,
1500
]
},
{
name: 'US',
value: [
-74.13, 42.37,
3000
]
}
]
}
]
};
});

// visits trend bar option
this.trendBarOption = {
title: {
text: 'Visits Trend',
left: '3%',
top: '20px',
textStyle: {
color: '#fff',
fontSize: 20,
marginBottom: '20px'
}
},
color: ['#fff'],
backgroundColor: '#4caf50',
tooltip : {},
grid: {
top: '30%',
left: '3%',
right: '4%',
bottom: '15%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: { show: false },
axisLine: { show: false },
axisLabel: {
color: '#fff',
fontSize: 14,
fontWeight: 'bold'
}
}
],
yAxis : [
{
type : 'value',
splitLine: { show: false },
axisTick: { show: false },
axisLine: { show: false },
axisLabel: {
color: '#fff',
fontSize: 14,
fontWeight: 'bold'
}
}
],
series : [
{ // For shadow
type: 'bar',
silent: true,
itemStyle: {
normal: {
color: '#8ec798'
}
},
barGap: '-100%',
barCategoryGap: '60%',
data: [500, 500, 500, 500, 500, 500, 500],
animation: false
},
{
name: 'Visits',
type: 'bar',
z: 3,
label: {
normal: {
position: 'top',
show: true
}
},
barWidth: '20%',
data: [74, 52, 200, 334, 390, 330, 220]
}
]
};

}

}
1 change: 1 addition & 0 deletions src/assets/data/world.json
View file

Large diffs are not rendered by default.

0 comments on commit f886f77

Please sign in to comment.