|
|
@@ -1,17 +1,23 @@
|
|
|
import { Component, OnInit } from '@angular/core';
|
|
|
-import { NgxEchartsModule } from 'ngx-echarts';
|
|
|
import { CommonModule } from '@angular/common';
|
|
|
import { FormsModule } from '@angular/forms';
|
|
|
+import { NgxEchartsDirective, provideEchartsCore } from 'ngx-echarts';
|
|
|
import * as echarts from 'echarts';
|
|
|
|
|
|
+
|
|
|
@Component({
|
|
|
selector: 'app-page-home',
|
|
|
standalone: true,
|
|
|
imports: [
|
|
|
CommonModule,
|
|
|
- NgxEchartsModule,
|
|
|
- FormsModule
|
|
|
+ FormsModule,
|
|
|
+ NgxEchartsDirective // 使用指令而不是模块
|
|
|
],
|
|
|
+ providers: [
|
|
|
+ provideEchartsCore({
|
|
|
+ echarts: () => import('echarts')
|
|
|
+ })
|
|
|
+],
|
|
|
templateUrl: './page-home.html',
|
|
|
styleUrls: ['./page-home.scss']
|
|
|
})
|
|
|
@@ -85,92 +91,123 @@ applyAiRecommendation() {
|
|
|
}
|
|
|
|
|
|
initChart() {
|
|
|
- this.chartOptions = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: {
|
|
|
- type: 'shadow'
|
|
|
- },
|
|
|
- backgroundColor: 'rgba(15, 23, 42, 0.9)',
|
|
|
- borderColor: 'rgba(255, 255, 255, 0.1)',
|
|
|
- borderWidth: 1,
|
|
|
- textStyle: {
|
|
|
- color: '#e2e8f0'
|
|
|
+ this.chartOptions = {
|
|
|
+ backgroundColor: 'transparent',
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ },
|
|
|
+ backgroundColor: 'rgba(15, 23, 42, 0.9)',
|
|
|
+ borderColor: 'rgba(255, 255, 255, 0.1)',
|
|
|
+ borderWidth: 1,
|
|
|
+ textStyle: {
|
|
|
+ color: '#e2e8f0'
|
|
|
+ },
|
|
|
+ formatter: '{b}: {c}万元'
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ top: '10%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'value',
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(0, 0, 0, 0.1)'
|
|
|
}
|
|
|
},
|
|
|
- grid: {
|
|
|
- left: '3%',
|
|
|
- right: '4%',
|
|
|
- bottom: '3%',
|
|
|
- containLabel: true
|
|
|
+ axisLabel: {
|
|
|
+ color: '#64748b',
|
|
|
+ formatter: '{value}万'
|
|
|
},
|
|
|
- xAxis: {
|
|
|
- type: 'value',
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: 'rgba(0, 0, 0, 0.1)'
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- color: '#64748b'
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- lineStyle: {
|
|
|
- color: 'rgba(0, 0, 0, 0.05)'
|
|
|
- }
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(0, 0, 0, 0.05)'
|
|
|
}
|
|
|
},
|
|
|
- yAxis: {
|
|
|
- type: 'category',
|
|
|
- data: ['实习销售', '白银销售', '黄金销售', '铂金销售', '钻石销售'],
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: 'rgba(0, 0, 0, 0.1)'
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- color: '#64748b'
|
|
|
+ name: '平均月业绩',
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#64748b',
|
|
|
+ padding: [0, 0, 0, 40]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['实习销售', '白银销售', '黄金销售', '铂金销售', '钻石销售'],
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(0, 0, 0, 0.1)'
|
|
|
}
|
|
|
},
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '平均月业绩 (万元)',
|
|
|
- type: 'bar',
|
|
|
- data: [8.2, 22.5, 45.8, 78.3, 125.6],
|
|
|
- itemStyle: {
|
|
|
- color: (params: any) => {
|
|
|
- const colors = [
|
|
|
- 'rgba(59, 130, 246, 0.7)',
|
|
|
- 'rgba(148, 163, 184, 0.7)',
|
|
|
- 'rgba(245, 158, 11, 0.7)',
|
|
|
- 'rgba(129, 140, 248, 0.7)',
|
|
|
- 'rgba(34, 211, 238, 0.7)'
|
|
|
- ];
|
|
|
- return colors[params.dataIndex];
|
|
|
- },
|
|
|
- borderColor: (params: any) => {
|
|
|
- const colors = [
|
|
|
- 'rgb(59, 130, 246)',
|
|
|
- 'rgb(148, 163, 184)',
|
|
|
- 'rgb(245, 158, 11)',
|
|
|
- 'rgb(129, 140, 248)',
|
|
|
- 'rgb(34, 211, 238)'
|
|
|
- ];
|
|
|
- return colors[params.dataIndex];
|
|
|
- },
|
|
|
- borderWidth: 2,
|
|
|
- borderRadius: [4, 4, 0, 0]
|
|
|
+ axisLabel: {
|
|
|
+ color: '#64748b',
|
|
|
+ fontWeight: 'bold'
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '平均月业绩',
|
|
|
+ type: 'bar',
|
|
|
+ data: [8.2, 22.5, 45.8, 78.3, 125.6],
|
|
|
+ itemStyle: {
|
|
|
+ color: (params: any) => {
|
|
|
+ const colors = [
|
|
|
+ 'rgba(59, 130, 246, 0.8)',
|
|
|
+ 'rgba(148, 163, 184, 0.8)',
|
|
|
+ 'rgba(245, 158, 11, 0.8)',
|
|
|
+ 'rgba(129, 140, 248, 0.8)',
|
|
|
+ 'rgba(34, 211, 238, 0.8)'
|
|
|
+ ];
|
|
|
+ return colors[params.dataIndex];
|
|
|
+ },
|
|
|
+ borderColor: (params: any) => {
|
|
|
+ const colors = [
|
|
|
+ 'rgb(59, 130, 246)',
|
|
|
+ 'rgb(148, 163, 184)',
|
|
|
+ 'rgb(245, 158, 11)',
|
|
|
+ 'rgb(129, 140, 248)',
|
|
|
+ 'rgb(34, 211, 238)'
|
|
|
+ ];
|
|
|
+ return colors[params.dataIndex];
|
|
|
},
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: 'right',
|
|
|
- color: '#64748b',
|
|
|
- formatter: '{c}万'
|
|
|
+ borderWidth: 2,
|
|
|
+ borderRadius: [4, 4, 0, 0],
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
+ shadowBlur: 5,
|
|
|
+ shadowOffsetY: 2
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'right',
|
|
|
+ color: '#64748b',
|
|
|
+ formatter: '{c}万',
|
|
|
+ fontWeight: 'bold'
|
|
|
+ },
|
|
|
+ barWidth: '40%',
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.2)',
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetY: 3
|
|
|
}
|
|
|
+ },
|
|
|
+ animationType: 'scale',
|
|
|
+ animationEasing: 'elasticOut',
|
|
|
+ animationDelay: function (idx: number) {
|
|
|
+ return idx * 100;
|
|
|
}
|
|
|
- ]
|
|
|
- };
|
|
|
- }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ animationDuration: 1000
|
|
|
+ };
|
|
|
+}
|
|
|
|
|
|
setFilter(level: string) {
|
|
|
this.activeFilter = this.activeFilter === level ? null : level;
|
0235711