bbj-screen-widget 2.4.60 → 2.4.62

package/src/lib/background/background.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BackgroundComponent } from './background.component';
+import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
+
+@NgModule({
+  declarations: [BackgroundComponent],
+  imports: [CommonModule, WidgetBaseModule],
+})
+export class BackgroundModule {
+  constructor(widgetService: WidgetService) {
+    widgetService.register(BackgroundComponent);
+  }
+}

package/src/lib/bar-chart-three-d/bar-chart-three-d.component.html

@@ -0,0 +1 @@
+<div *ngIf="chartOption" echarts [options]="chartOption" class="demo-chart" (chartClick)="onChartClick($event)"></div>

package/src/lib/bar-chart-three-d/bar-chart-three-d.component.less

@@ -0,0 +1,8 @@
+:host {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+.demo-chart {
+  height: 100%;
+}

package/src/lib/bar-chart-three-d/bar-chart-three-d.component.spec.ts

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

package/src/lib/bar-chart-three-d/bar-chart-three-d.component.ts

@@ -0,0 +1,271 @@
+import { Component, OnChanges, OnInit, SimpleChanges, EventEmitter } from '@angular/core';
+import { Property, Widget, Data, Drill, DataOutput } from 'bbj-widget-base';
+import { BasicLineChartComponent } from '../basic-line-chart/basic-line-chart.component';
+import 'echarts-gl';
+@Component({
+  selector: 'sc-bar-chart-three-d',
+  templateUrl: './bar-chart-three-d.component.html',
+  styleUrls: ['./bar-chart-three-d.component.less'],
+})
+@Widget('3D柱状图', {
+  group: 'barChart',
+  image: 'assets/img/screen/basic-bar-chart.png',
+  icon: 'icontubiao',
+})
+export class BarChartThreeDComponent extends BasicLineChartComponent implements OnInit, OnChanges {
+  @Property('类型', { ui: { hidden: true } })
+  type = 'basic';
+  @Property('图表样式', {
+    ui: {
+      widget: 'myImageExample',
+      spanLabel: 24,
+      spanControl: 24,
+      reset: ['barColor'],
+      example: [
+        {
+          background: 'assets/img/screen/3d1.png',
+          data: { barColor: ['#FAA736'] },
+        },
+        {
+          background: 'assets/img/screen/3d2.png',
+          data: { barColor: ['#00D190'] },
+        },
+        {
+          background: 'assets/img/screen/3d3.png',
+          data: { barColor: ['#3285FF'] },
+        },
+        {
+          background: 'assets/img/screen/3d4.png',
+          data: { barColor: ['#8934F8'] },
+        },
+      ],
+    },
+  })
+  example: any;
+  @Property('系列颜色', {
+    ui: {
+      widget: 'seriesColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
+    },
+  })
+  barColor = ['#3285FF', '#00D2FD'];
+  @Property('字体', { ui: { widget: 'myFont' } })
+  font: any = {
+    family: '',
+    color: '#FFFFFF',
+    weight: 'normal',
+    size: 12,
+    space: 0,
+    lineHeight: 12,
+  };
+  @Property('边距', { ui: { widget: 'myGrid' } })
+  grid: any = {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  };
+  // @Property('轴单位', { ui: { widget: 'myUnit' } })
+  // unit = { x: '', y: '' };
+  @Property('y轴单位', { type: 'string' })
+  yUnit = '';
+  @Property('x轴单位', { type: 'string' })
+  xUnit = '';
+  @Property('y轴最大')
+  yMax: number;
+  @Property('网络线', {
+    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
+  })
+  netLine = false;
+  @Property('标签', {
+    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
+  })
+  label = false;
+  @Property('自动旋转', {
+    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
+  })
+  autoRotate = false;
+  @Property('柱子宽度', {
+    ui: { widget: 'myRange', min: 100, max: 1000, step: 100 },
+  })
+  boxWidth = 200;
+  @Property('柱子深度', {
+    ui: { widget: 'myRange', min: 10, max: 100, step: 10 },
+  })
+  boxDepth = 20;
+
+  @Data({
+    properties: {
+      x: { type: 'string', title: '类目' },
+      y: { type: 'number', title: '值' },
+      z: { type: 'string', title: '系列' },
+    },
+  })
+  _data = [
+    { x: '一月', y: 10, s: '收入' },
+    { x: '二月', y: 20, s: '收入' },
+    { x: '三月', y: 25, s: '收入' },
+    { x: '四月', y: 35, s: '收入' },
+    { x: '五月', y: 27, s: '收入' },
+    { x: '六月', y: 28, s: '收入' },
+    { x: '一月', y: 18, s: '支出' },
+    { x: '二月', y: 28, s: '支出' },
+    { x: '三月', y: 32, s: '支出' },
+    { x: '四月', y: 48, s: '支出' },
+    { x: '五月', y: 20, s: '支出' },
+    { x: '六月', y: 17, s: '支出' },
+  ];
+  @Drill()
+  @DataOutput(['x', 'z'])
+  dataClick = new EventEmitter<any>();
+  sData = [];
+  series = [];
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes._data) {
+      this.reloadData();
+
+      const style = {
+        color: this.font.color,
+        fontFamily: this.font.family,
+        fontWeight: this.font.weight,
+        fontSize: this.font.size,
+        margin: this.font.lineHeight,
+      };
+
+      this.chartOption = {
+        xAxis3D: {
+          name: this.xUnit,
+          nameTextStyle: style,
+          type: 'category',
+          splitLine: {
+            show: false,
+          },
+          data: this.xData,
+        },
+        yAxis3D: {
+          name: '',
+          type: 'category',
+          data: [],
+        },
+        zAxis3D: {
+          name: this.yUnit,
+          nameTextStyle: style,
+          type: 'value',
+          splitLine: {
+            show: this.netLine,
+            lineStyle: {
+              width: 1,
+            },
+          },
+        },
+        grid3D: {
+          top: this.grid.top,
+          right: this.grid.right,
+          left: this.grid.left,
+          bottom: this.grid.bottom,
+          boxWidth: this.boxWidth,
+          boxDepth: this.boxDepth,
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: this.font.color,
+              width: 1,
+            },
+          },
+          axisLabel: {
+            textStyle: style,
+          },
+          viewControl: {
+            alpha: 10,
+            beta: 0,
+            autoRotate: this.autoRotate,
+            zoomSensitivity: 0,
+            autoRotateAfterStill: 15,
+            distance: 250,
+          },
+        },
+        color: ['#45C1FC', '#00A1FB', '#0076B7', '#004D7E', '#003560', '#001736'],
+        series: [],
+      };
+      if (this.type === '3D') {
+        this.series = [this.series[0]];
+      }
+      for (let i = 0; i < this.series.length; i++) {
+        this.chartOption.series.push({
+          type: 'bar3D',
+          itemStyle: {},
+          data: [],
+          shading: 'lambert',
+          stack: 'stack',
+          label: {
+            show: this.label,
+            textStyle: style,
+          },
+          emphasis: {
+            label: {
+              textStyle: {
+                fontSize: this.font.size,
+                color: this.font.color,
+                fontWeight: this.font.weight,
+                fontFamily: this.font.family,
+                lineHeight: this.font.lineHeight,
+                borderWidth: 0,
+                borderColor: '#00000000',
+              },
+            },
+          },
+        });
+        this.chartOption.series[i].itemStyle.color = this.barColor[i];
+        const temp = [];
+        this._data.forEach((record) => {
+          if (this.series[i] === record.s) {
+            temp.push(record);
+          }
+        });
+        this.xData.forEach((x) => {
+          let count = 0;
+          temp.forEach((t) => {
+            if (t.x === x) {
+              count++;
+            }
+          });
+          if (count === 0) {
+            this._data.push({ x, y: 0, s: this.series[i] });
+          }
+        });
+        this._data.sort((prev, next) => {
+          return this.xData.indexOf(prev.x) - this.xData.indexOf(next.x);
+        });
+        this._data
+          .filter((els) => els.s === this.series[i])
+          .forEach((el) => {
+            for (let j = 0; j < this.xData.length; j++) {
+              if (this.xData[j] === el.x) {
+                this.chartOption.series[i].data.push([j, 0, el.y]);
+              }
+            }
+          });
+      }
+    }
+  }
+  reloadData() {
+    if (this._data[0]) {
+      for (let i = 0; i < this._data.length; i++) {
+        if (this._data[i].s) {
+          this.series[i] = this._data[i].s;
+        }
+      }
+      this.uniqueData(this.series);
+    }
+    for (let i = 0; i < this._data.length; i++) {
+      this.xData[i] = this._data[i].x;
+    }
+    this.uniqueData(this.xData);
+  }
+  ngOnInit() {}
+  onChartClick(event) {
+    this.dataClick.emit({ x: event.name, s: event.seriesName });
+  }
+}

package/src/lib/bar-chart-three-d/bar-chart-three-d.module.ts

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

package/src/lib/basic-bar-chart/basic-bar-chart.component.html

@@ -0,0 +1,7 @@
+<div
+  echarts
+  [options]="chartOption"
+  style="height: 100%"
+  (chartClick)="onChartClick($event)"
+  [initOpts]="{ renderer: 'svg' }"
+></div>

package/src/lib/basic-bar-chart/basic-bar-chart.component.less

@@ -0,0 +1,5 @@
+:host {
+  display: block;
+  height: 100%;
+  width: 100%;
+}

package/src/lib/basic-bar-chart/basic-bar-chart.component.spec.ts

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