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 @@