summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/components/charts
diff options
context:
space:
mode:
Diffstat (limited to 'usecaseui-portal/src/app/components/charts')
-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
-rw-r--r--usecaseui-portal/src/app/components/charts/line/line.component.ts13
-rw-r--r--usecaseui-portal/src/app/components/charts/pie/pie.component.ts11
4 files changed, 67 insertions, 13 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;
}
}
diff --git a/usecaseui-portal/src/app/components/charts/line/line.component.ts b/usecaseui-portal/src/app/components/charts/line/line.component.ts
index fde63ed6..6c4279cb 100644
--- a/usecaseui-portal/src/app/components/charts/line/line.component.ts
+++ b/usecaseui-portal/src/app/components/charts/line/line.component.ts
@@ -39,7 +39,10 @@ export class LineComponent implements OnInit {
axisLine:{
show: false
},
- data: this.initData.option.xAxis.data
+ axisLabel:{
+ color:"#3C4F8C"
+ },
+ data: this.initData.option.xAxis.data
},
yAxis: {
axisTick: {
@@ -47,6 +50,14 @@ export class LineComponent implements OnInit {
},
axisLine:{
show: false
+ },
+ axisLabel:{
+ color:"#3C4F8C"
+ },
+ splitLine:{
+ lineStyle:{
+ type:"dashed",
+ }
}
},
series : this.initData.option.series
diff --git a/usecaseui-portal/src/app/components/charts/pie/pie.component.ts b/usecaseui-portal/src/app/components/charts/pie/pie.component.ts
index 8a5e2100..69d758e3 100644
--- a/usecaseui-portal/src/app/components/charts/pie/pie.component.ts
+++ b/usecaseui-portal/src/app/components/charts/pie/pie.component.ts
@@ -20,6 +20,7 @@ export class PieComponent implements OnInit {
height: this.initData.height
};
this.pieOption = {
+ backgroundColor:this.initData.option.backgroundColor,
legend: this.initData.option.legend,
color:this.initData.option.color,
series : [
@@ -29,19 +30,13 @@ export class PieComponent implements OnInit {
radius : this.initData.option.series[0].radius,
center: ['50%', '45%'],
legendHoverLink: false,
- hoverOffset: 5,
+ hoverOffset: 3,
avoidLabelOverlap: false,
label: this.initData.option.series[0].label,
data:[
{value:1, name:'11'}
],
- itemStyle: {
- emphasis: {
- shadowBlur: 5,
- shadowOffsetX: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
- }
- }
+ itemStyle: this.initData.option.series[0].itemStyle
}
]
}