bbj-screen-widget 2.4.45 → 2.4.46

package/src/lib/scatter3d/scatter3d.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Scatter3dComponent } from './scatter3d.component';
+
+describe('Scatter3dComponent', () => {
+  let component: Scatter3dComponent;
+  let fixture: ComponentFixture<Scatter3dComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ Scatter3dComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(Scatter3dComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/scatter3d/scatter3d.component.ts

@@ -0,0 +1,129 @@
+import { Component, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { Widget, Data, Property } from 'bbj-widget-base';
+
+@Component({
+  selector: 'sc-scatter3d',
+  templateUrl: './scatter3d.component.html',
+  styleUrls: ['./scatter3d.component.less'],
+})
+@Widget('3D散点图', {
+  group: 'otherChart',
+  image: 'assets/img/screen/bubble.png',
+  icon: 'icontubiao',
+})
+export class Scatter3dComponent implements OnInit, OnChanges {
+  @Property('最小值', { type: 'number' })
+  min = 0;
+  @Property('最大值', { type: 'number' })
+  max = 10;
+  @Property('最小尺寸', { type: 'number' })
+  symbolSizeMin = 10;
+  @Property('最大尺寸', { type: 'number' })
+  symbolSizeMax = 20;
+  @Property('颜色', {
+    ui: {
+      widget: 'seriesColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
+    },
+  })
+  visualMapColor = [
+    '#313695',
+    '#4575b4',
+    '#74add1',
+    '#abd9e9',
+    '#e0f3f8',
+    '#ffffbf',
+    '#fee090',
+    '#fdae61',
+    '#f46d43',
+    '#d73027',
+    '#a50026',
+  ];
+  @Property('最小不透明度', { type: 'number', minimum: 0, maximum: 1 })
+  colorAlphaMin = 0.5;
+  @Property('最大不透明度', { type: 'number', minimum: 0, maximum: 1 })
+  colorAlphaMax = 1;
+  @Property('高度', { type: 'number' })
+  boxHeight = 100;
+  @Property('宽度', { type: 'number' })
+  boxWidth = 100;
+  @Property('深度', { type: 'number' })
+  boxDepth = 100;
+
+  @Data({
+    properties: {
+      x: { type: 'number', title: 'x' },
+      y: { type: 'number', title: 'y' },
+      z: { type: 'number', title: 'z' },
+      value: { type: 'number', title: '值' },
+    },
+  })
+  data = [
+    { x: 0, y: 0, z: 0, value: 1 },
+    { x: 0, y: 0, z: 1, value: 2 },
+    { x: 0, y: 1, z: 0, value: 3 },
+    { x: 0, y: 1, z: 1, value: 4 },
+    { x: 1, y: 0, z: 0, value: 5 },
+    { x: 1, y: 0, z: 1, value: 6 },
+    { x: 1, y: 1, z: 0, value: 7 },
+    { x: 1, y: 1, z: 1, value: 8 },
+  ];
+  options: any;
+  constructor() {}
+
+  ngOnInit(): void {
+    this.reset();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.reset();
+  }
+
+  reset() {
+    const data = this.data ? this.data.map((item) => [item.x, item.y, item.z, item.value]) : [];
+    this.options = {
+      visualMap: {
+        show: false,
+        min: this.min,
+        max: this.max,
+        inRange: {
+          symbolSize: [this.symbolSizeMin, this.symbolSizeMax],
+          color: this.visualMapColor,
+          colorAlpha: [this.colorAlphaMin, this.colorAlphaMax],
+        },
+      },
+      xAxis3D: {
+        type: 'value',
+      },
+      yAxis3D: {
+        type: 'value',
+      },
+      zAxis3D: {
+        type: 'value',
+      },
+      grid3D: {
+        axisLine: {
+          lineStyle: { color: '#fff' },
+        },
+        axisPointer: {
+          lineStyle: { color: '#fff' },
+        },
+        viewControl: {
+          // autoRotate: true
+        },
+        boxHeight: this.boxHeight ?? 100,
+        boxWidth: this.boxWidth ?? 100,
+        boxDepth: this.boxDepth ?? 100,
+      },
+      series: [
+        {
+          type: 'scatter3D',
+          data,
+        },
+      ],
+    };
+    console.log(this.options);
+  }
+
+  onChartClick(event) {}
+}

package/src/lib/scatter3d/scatter3d.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Scatter3dComponent } from './scatter3d.component';
+import { NgxEchartsModule } from 'ngx-echarts';
+import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
+
+@NgModule({
+  declarations: [Scatter3dComponent],
+  imports: [CommonModule, WidgetBaseModule, NgxEchartsModule],
+})
+export class Scatter3dModule {
+  constructor(widgetService: WidgetService) {
+    widgetService.register(Scatter3dComponent);
+  }
+}