summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/components/charts/line
diff options
context:
space:
mode:
authorzhangab <zhanganbing@chinamobile.com>2018-10-23 11:32:03 +0800
committerzhangab <zhanganbing@chinamobile.com>2018-10-23 11:32:05 +0800
commitde9d2e95b43991fccee342ebed03b006f6fed844 (patch)
tree0667c51a30fd3fed71fec797136d8adefc7d7baf /usecaseui-portal/src/app/components/charts/line
parent101e5e37f4ece60af8d08020c7e4bd8f473adce7 (diff)
Build AngularJs component for usecase-ui
Change-Id: I393f4837fc5f9cbd71448dbf20e1f1781f0656d3 Issue-ID: USECASEUI-154 Signed-off-by: zhangab <zhanganbing@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/components/charts/line')
-rw-r--r--usecaseui-portal/src/app/components/charts/line/line.component.html22
-rw-r--r--usecaseui-portal/src/app/components/charts/line/line.component.less0
-rw-r--r--usecaseui-portal/src/app/components/charts/line/line.component.spec.ts25
-rw-r--r--usecaseui-portal/src/app/components/charts/line/line.component.ts79
4 files changed, 126 insertions, 0 deletions
diff --git a/usecaseui-portal/src/app/components/charts/line/line.component.html b/usecaseui-portal/src/app/components/charts/line/line.component.html
new file mode 100644
index 00000000..9a43e28c
--- /dev/null
+++ b/usecaseui-portal/src/app/components/charts/line/line.component.html
@@ -0,0 +1,22 @@
+<!--
+ Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+<div echarts
+[initOpts]="initOpts"
+[options]="lineOption"
+[merge]="updateOption"
+(chartInit)="chartInit($event)">
+ Line Chart
+</div>
diff --git a/usecaseui-portal/src/app/components/charts/line/line.component.less b/usecaseui-portal/src/app/components/charts/line/line.component.less
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/usecaseui-portal/src/app/components/charts/line/line.component.less
diff --git a/usecaseui-portal/src/app/components/charts/line/line.component.spec.ts b/usecaseui-portal/src/app/components/charts/line/line.component.spec.ts
new file mode 100644
index 00000000..afe70654
--- /dev/null
+++ b/usecaseui-portal/src/app/components/charts/line/line.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LineComponent } from './line.component';
+
+describe('LineComponent', () => {
+ let component: LineComponent;
+ let fixture: ComponentFixture<LineComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ LineComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(LineComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/usecaseui-portal/src/app/components/charts/line/line.component.ts b/usecaseui-portal/src/app/components/charts/line/line.component.ts
new file mode 100644
index 00000000..8bc8ebd8
--- /dev/null
+++ b/usecaseui-portal/src/app/components/charts/line/line.component.ts
@@ -0,0 +1,79 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { SimpleChanges } from '@angular/core/src/metadata/lifecycle_hooks';
+
+@Component({
+ selector: 'app-line',
+ templateUrl: './line.component.html',
+ styleUrls: ['./line.component.less']
+})
+export class LineComponent implements OnInit {
+ // 图形数据
+ @Input() chartData;
+ // 初始化数据
+ @Input() initData;
+
+ constructor() { }
+
+ ngOnInit() {
+ this.initOpts = {
+ renderer: 'canvas',
+ height: this.initData.height,
+ width: this.initData.width
+ };
+ this.lineOption ={
+ tooltip : this.initData.option.tooltip,
+ icon:'circle',
+ legend: this.initData.option.legend,
+ grid: {
+ left: '1%',
+ right: '3%',
+ top: '10%',
+ bottom: '10%',
+ containLabel: true
+ },
+ xAxis: {
+ axisTick: {
+ show: false,
+ },
+ axisLine:{
+ show: false
+ },
+ data: ['01','02','04','06','08','10','12','14','16','18','20','22','24']
+ },
+ yAxis: {
+ axisTick: {
+ show: false,
+ },
+ axisLine:{
+ show: false
+ }
+ },
+ series : this.initData.option.series
+ }
+ }
+
+ ngOnChanges(changes:SimpleChanges){
+
+ // 当有实例的时候再执行,相当于第一次不执行下面方法
+ if(this.chartIntance){
+ this.chartDataChange()
+ }
+ }
+ // 初始化图形高度
+ initOpts:any;
+ // 折线图配置
+ lineOption:any;
+ // 实例对象
+ chartIntance:any;
+ // 数据变化
+ updateOption:any;
+ chartDataChange(){
+ this.updateOption = this.chartData;
+ }
+ chartInit(chart){
+ this.chartIntance = chart;
+ }
+
+
+
+}