diff options
Diffstat (limited to 'usecaseui-portal/src/app/components/charts')
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 } ] } |