From 07392068e4c1d071d1ed635fc443e330c42494d3 Mon Sep 17 00:00:00 2001 From: "SK-20230509GLVS\\Administrator" Date: Mon, 18 Mar 2024 17:38:38 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B0=81=E8=A3=85=E4=B8=80=E4=B8=AA=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../chart-component.component.css | 1 + .../chart-component.component.html | 1 + .../chart-component.component.ts | 120 ++++++++++++++++ src/app/routes/data-v/s1/s1.component.html | 4 + src/app/routes/data-v/s1/s1.component.less | 1 + src/app/routes/data-v/s1/s1.component.ts | 129 +++++++++++++++++- 6 files changed, 251 insertions(+), 5 deletions(-) create mode 100644 src/app/routes/data-v/s1/chart-component/chart-component.component.css create mode 100644 src/app/routes/data-v/s1/chart-component/chart-component.component.html create mode 100644 src/app/routes/data-v/s1/chart-component/chart-component.component.ts diff --git a/src/app/routes/data-v/s1/chart-component/chart-component.component.css b/src/app/routes/data-v/s1/chart-component/chart-component.component.css new file mode 100644 index 0000000..0519ecb --- /dev/null +++ b/src/app/routes/data-v/s1/chart-component/chart-component.component.css @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/routes/data-v/s1/chart-component/chart-component.component.html b/src/app/routes/data-v/s1/chart-component/chart-component.component.html new file mode 100644 index 0000000..fd9a61f --- /dev/null +++ b/src/app/routes/data-v/s1/chart-component/chart-component.component.html @@ -0,0 +1 @@ +
\ No newline at end of file diff --git a/src/app/routes/data-v/s1/chart-component/chart-component.component.ts b/src/app/routes/data-v/s1/chart-component/chart-component.component.ts new file mode 100644 index 0000000..ab3afc9 --- /dev/null +++ b/src/app/routes/data-v/s1/chart-component/chart-component.component.ts @@ -0,0 +1,120 @@ +import { Component, OnInit, AfterViewInit, OnDestroy, OnChanges, SimpleChanges, Input, ViewChild, ElementRef } from '@angular/core'; +import * as echarts from 'echarts'; + +@Component({ + selector: 'app-chart-component', + standalone: true, + templateUrl: './chart-component.component.html', + styleUrls: ['./chart-component.component.css'] +}) +export class ChartComponentComponent implements OnInit, OnDestroy, OnChanges { + + @ViewChild('chart', { static: true }) + chartContainer!: ElementRef; + private chartInstance: echarts.ECharts | null = null; + + // 接收外部传入的配置项（例如：柱状图、折线图等配置） + @Input() options: echarts.EChartsOption = {}; + + /** 默认样式 */ + + defaultTooltipOptions = { + title: { + textStyle: { + color: "#ffffff" + }, + }, + backgroundColor: "#100c2A", + legend: { + textStyle: { + color: '#ffffff' + }, + }, + tooltip: { + trigger: 'item', + borderColor: '#00eff8', + backgroundColor: '#12192C', + padding: [6, 14, 6, 14], + textStyle: { + fontSize: 14, + color: '#74FAFB', + }, + position: 'top', + axisPointer: { + type: 'shadow' + } + }, + grid: { + left: '3%', + right: '3%', + bottom: '3%', + containLabel: true + }, + toolbox: { + show: false, + feature: { + dataView: { show: true, readOnly: false }, + magicType: { show: true, type: ['line', 'bar'] }, + restore: { show: true }, + saveAsImage: { show: true } + } + }, + calculable: true, + xAxis: [ + { + type: 'category', + // prettier-ignore + data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] + } + ], + yAxis: [ + { + type: 'value' + } + ], + + } + constructor() { } + + + ngOnInit(): void { + console.log('ChartComponentComponent ngOnInit'); + this.initEcharts(); + } + + ngOnChanges(changes: SimpleChanges): void { + + if (changes['options'] && !changes['options'].isFirstChange()) { + console.log('ChartComponentComponent ngOnChanges'); + this.updateChartOptions(); + } + } + + ngOnDestroy(): void { + if (this.chartInstance) { + console.log('ChartComponentComponent ngOnInit'); + this.chartInstance.dispose(); + } + } + + initEcharts(): void { + const chartDom = this.chartContainer.nativeElement; + this.chartInstance = echarts.init(chartDom); + + // 设置默认的tooltip配置，如果外部传入了tooltip则会覆盖这里的设置 + + + // 合并默认和外部传入的配置项 + const mergedOptions = { + ...this.defaultTooltipOptions, + ...this.options + }; + this.chartInstance.setOption(mergedOptions); + } + + updateChartOptions(): void { + if (this.chartInstance) { + this.chartInstance.setOption(this.options); + } + } +} diff --git a/src/app/routes/data-v/s1/s1.component.html b/src/app/routes/data-v/s1/s1.component.html index fa967aa..5fb3d58 100644 --- a/src/app/routes/data-v/s1/s1.component.html +++ b/src/app/routes/data-v/s1/s1.component.html @@ -75,9 +75,13 @@
+
+ +
+
diff --git a/src/app/routes/data-v/s1/s1.component.less b/src/app/routes/data-v/s1/s1.component.less index cec0783..b1648e6 100644 --- a/src/app/routes/data-v/s1/s1.component.less +++ b/src/app/routes/data-v/s1/s1.component.less @@ -1,3 +1,4 @@ +/* stylelint-disable comment-empty-line-before */ .dashboard-container { width: 20rem; height: 10rem; diff --git a/src/app/routes/data-v/s1/s1.component.ts b/src/app/routes/data-v/s1/s1.component.ts index 5c32d92..feb2e92 100644 --- a/src/app/routes/data-v/s1/s1.component.ts +++ b/src/app/routes/data-v/s1/s1.component.ts @@ -12,18 +12,21 @@ import { NzProgressModule } from 'ng-zorro-antd/progress'; import { NzBadgeModule } from 'ng-zorro-antd/badge'; import { Subscription } from 'rxjs'; import { IMqttMessage, MqttService } from 'ngx-mqtt'; +import { ChartComponentComponent } from './chart-component/chart-component.component'; + + @Component({ selector: 'app-data-v-s1', standalone: true, - imports: [NzBadgeModule, NzProgressModule, AgGridAngular, DataVCardComponent, DataVTitleComponent, ...SHARED_IMPORTS], templateUrl: './s1.component.html', - styleUrls: ['./s1.component.less'] + styleUrls: ['./s1.component.less'], + imports: [NzBadgeModule, NzProgressModule, AgGridAngular, DataVCardComponent, DataVTitleComponent, ...SHARED_IMPORTS, ChartComponentComponent] }) export class DataVS1Component implements OnInit { private readonly http = inject(_HttpClient); private readonly modal = inject(ModalHelper); - - private c1OptionC = { + chart_options1 = {} + c1OptionC: echarts.EChartsOption = { series: [ { type: 'gauge', @@ -234,7 +237,7 @@ export class DataVS1Component implements OnInit { const messagePayload = JSON.parse(message.payload.toString()); console.log('Received message as object: ', messagePayload.msg); - this.c1OptionC.series[0].data[0].value = messagePayload.c1_value; + this.c1Chart.setOption(this.c1OptionC); }); } @@ -472,6 +475,122 @@ export class DataVS1Component implements OnInit { ] }; + + this.chart_options1 = { + title: { + textStyle: { + color: "#ffffff" + }, + text: '全水', + subtext: '(kg/kg)', + }, + legend: { + data: ['测量值', '上限值', '下限值',] + }, + calculable: true, + xAxis: [ + { + axisLine: { + lineStyle: { + color: [ + [0.25, '#74FAFB'], + [0.5, '#74FAFB'], + [0.75, '#74FAFB'], + [1, '#74FAFB'] + ] + } + }, + position: 'bottom', + type: 'category', + data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] + } + ], + yAxis: [ + { + type: 'value' + } + ], + series: [ + { + name: '测量值', + type: 'line', + data: [100, 155, 139, 199, 220, 160, 120, 182.2, 150, 155, 160, 180], + markPoint: { + data: [ + { name: '最大值', value: 220, xAxis: 4, yAxis: 220 }, + { name: '最小值', value: 100, xAxis: 0, yAxis: 100 } + ] + }, + markLine: { + data: [{ type: 'average', name: '平均值' }] + } + }, + { + type: 'custom', + name: 'error', + itemStyle: { + borderWidth: 1.5 + }, + renderItem: function (_params: any, api: any) { + var xValue = api.value(0); + var highPoint = api.coord([xValue, api.value(1)]); + var lowPoint = api.coord([xValue, api.value(2)]); + var halfWidth = api.size([1, 0])[0] * 0.1; + var style = api.style({ + stroke: api.visual('color'), + fill: undefined + }); + return { + type: 'group', + children: [ + { + type: 'line', + transition: ['shape'], + shape: { + x1: highPoint[0] - halfWidth, + y1: highPoint[1], + x2: highPoint[0] + halfWidth, + y2: highPoint[1] + }, + style: style + }, + { + type: 'line', + transition: ['shape'], + shape: { + x1: highPoint[0], + y1: highPoint[1], + x2: lowPoint[0], + y2: lowPoint[1] + }, + style: style + }, + { + type: 'line', + transition: ['shape'], + shape: { + x1: lowPoint[0] - halfWidth, + y1: lowPoint[1], + x2: lowPoint[0] + halfWidth, + y2: lowPoint[1] + }, + style: style + } + ] + }; + }, + encode: { + x: 0, + y: [1, 2] + }, + data: errorData, + z: 100 + } + ] + }; + + + var optionD2; optionD2 = { title: {