summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/components/charts/bar
diff options
context:
space:
mode:
Diffstat (limited to 'usecaseui-portal/src/app/components/charts/bar')
-rw-r--r--usecaseui-portal/src/app/components/charts/bar/bar.component.html10
-rw-r--r--usecaseui-portal/src/app/components/charts/bar/bar.component.ts46
2 files changed, 52 insertions, 4 deletions
diff --git a/usecaseui-portal/src/app/components/charts/bar/bar.component.html b/usecaseui-portal/src/app/components/charts/bar/bar.component.html
index a7cd0677..8e3e537d 100644
--- a/usecaseui-portal/src/app/components/charts/bar/bar.component.html
+++ b/usecaseui-portal/src/app/components/charts/bar/bar.component.html
@@ -13,6 +13,10 @@
See the License for the specific language governing permissions and
limitations under the License.
-->
-<p>
- bar works!
-</p>
+<div echarts
+[initOpts]="initOpts"
+[options]="barOption"
+[merge]="updateOption"
+(chartInit)="chartInit($event)">
+ Bar Chart
+</div>
diff --git a/usecaseui-portal/src/app/components/charts/bar/bar.component.ts b/usecaseui-portal/src/app/components/charts/bar/bar.component.ts
index fa9ecbbd..a7947f4e 100644
--- a/usecaseui-portal/src/app/components/charts/bar/bar.component.ts
+++ b/usecaseui-portal/src/app/components/charts/bar/bar.component.ts
@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
+import { SimpleChanges } from '@angular/core/src/metadata/lifecycle_hooks';
@Component({
selector: 'app-bar',
@@ -7,9 +8,52 @@ import { Component, OnInit } from '@angular/core';
})
export class BarComponent implements OnInit {
+ // 图形数据
+ @Input() chartData;
+ // 初始化数据
+ @Input() initData;
+
constructor() { }
ngOnInit() {
+ this.initOpts = {
+ renderer: 'canvas',
+ height: 40,
+ width: 160,
+
+ };
+ this.barOption = {
+ xAxis: this.initData.option.xAxis,
+ yAxis: {
+ type: 'category',
+ show: false,
+ axisTick: {
+ show: false
+ }
+ },
+ series: this.initData.option.series
+ }
+ }
+
+ ngOnChanges(changes: SimpleChanges) {
+ // 当有实例的时候再执行,相当于第一次不执行下面方法
+ if (this.chartIntance) {
+ this.chartDataChange()
+ }
+ }
+ // 初始化图形高度
+ initOpts: any;
+ // 折线图配置
+ barOption: any;
+ // 实例对象
+ chartIntance: any;
+ // 数据变化
+ updateOption: any;
+ chartDataChange() {
+ this.updateOption = this.chartData;
+ }
+ chartInit(chart) {
+ this.chartIntance = chart;
}
}