bbj-screen-widget 2.4.60 → 2.4.62

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

@@ -0,0 +1,493 @@
+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';
+
+@Component({
+  selector: 'sc-basic-bar-chart',
+  templateUrl: './basic-bar-chart.component.html',
+  styleUrls: ['./basic-bar-chart.component.less'],
+})
+@Widget('基本柱状图', {
+  group: 'barChart',
+  image: 'assets/img/screen/baseBar.png',
+  icon: 'icontubiao',
+})
+export class BasicBarChartComponent 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/bar1.png',
+          data: { barColor: { gradient: true, value: [['#FFEF66', '#FF851D']] } },
+        },
+        {
+          background: 'assets/img/screen/bar2.png',
+          data: { barColor: { gradient: true, value: [['#00FECB', '#00D191']] } },
+        },
+        {
+          background: 'assets/img/screen/bar3.png',
+          data: { barColor: { gradient: true, value: [['#00D2FD', '#3285FF']] } },
+        },
+        {
+          background: 'assets/img/screen/bar4.png',
+          data: { barColor: { gradient: true, value: [['#FF3699', '#8934F8']] } },
+        },
+      ],
+    },
+  })
+  example: any;
+  @Property('填充', {
+    ui: {
+      widget: 'seriesColor',
+      type: 'gradual',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
+    },
+  })
+  barColor = { gradient: true, value: [['#00D2FD', '#3285FF']] };
+  @Property('字体', { ui: { widget: 'myFont' } })
+  font: any = {
+    family: '',
+    color: '#595F7A',
+    weight: 'normal',
+    size: 12,
+    space: 0,
+    lineHeight: 12,
+  };
+  @Property('单系多色')
+  colorSwitch: boolean;
+
+  @Property('类别颜色', {
+    ui: {
+      widget: 'seriesColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
+      visibleIf: { colorSwitch: [true] },
+    },
+  })
+  colors = ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'];
+  @Property('边距', { ui: { widget: 'myGrid' } })
+  grid: any = {
+    top: 30,
+    right: 30,
+    bottom: 36,
+    left: 38,
+  };
+  @Property('图例', {
+    ui: { widget: 'select' },
+    enum: [
+      { label: '无', value: 'none' },
+      { label: '自动', value: 'auto' },
+      { label: '居中', value: 'center' },
+      { label: '左对齐', value: 'left' },
+      { label: '右对齐', value: 'right' },
+    ],
+  })
+  align = 'center';
+  @Property('轴隐藏', {
+    ui: { widget: 'select' },
+    enum: [
+      { label: '无', value: 'true' },
+      { label: 'x轴', value: '0' },
+      { label: 'y轴', value: '1' },
+      { label: '两轴', value: 'false' },
+    ],
+  })
+  axisShow = 'true';
+  @Property('刻度隐藏', {
+    ui: { widget: 'select' },
+    enum: [
+      { label: '无', value: 'true' },
+      { label: 'x轴', value: '0' },
+      { label: 'y轴', value: '1' },
+      { label: '两轴', value: 'false' },
+    ],
+  })
+  scaleShow = 'true';
+  // @Property('轴单位', {ui: {widget: 'myUnit'}})
+  // unit = {x: '', y: '', yMax: ''};
+  @Property('y轴单位', { type: 'string' })
+  yUnit = '';
+  @Property('x轴单位', { type: 'string' })
+  xUnit = '';
+  @Property('y轴最小')
+  yMin: number;
+  @Property('y轴最大')
+  yMax: number;
+  @Property('y轴最小间隔')
+  yMinInterval: number;
+  @Property('y轴最大增减')
+  yMaxAddNum: number;
+  @Property('网络线', {
+    ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
+  })
+  netLine = false;
+  @Property('网络线颜色', {
+    ui: {
+      widget: 'myColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
+    },
+  })
+  netLineColor = 'rgba(255,255,255,0.2)';
+  @Property('标签', {
+    ui: { widget: 'select' },
+    enum: [
+      { label: '无', value: 'none' },
+      { label: '居上', value: 'top' },
+      { label: '居中', value: 'inside' },
+      { label: '居右', value: 'right' },
+    ],
+  })
+  labelDirection = 'none';
+  @Property('列间距', { ui: { widget: 'myRange', min: 0, max: 100, step: 10 } })
+  barCategoryGap = 40;
+  @Property('圆角', { ui: { widget: 'myRange', min: 0, max: 100, step: 1 } })
+  barBorderRadius: 20;
+  @Property('x轴类型', {
+    enum: [
+      { label: '类目', value: 'category' },
+      { label: '时间', value: 'time' },
+    ],
+  })
+  xType = 'category';
+  @Property('轴标签角度', {
+    ui: { widget: 'myRange', min: -90, max: 90, step: 10 },
+  })
+  xLabelRotate = 0;
+  @Property('x轴文本宽度')
+  xLabelWidth: number;
+  @Property('x轴文字宽度超出', {
+    enum: [
+      { label: '自动', value: 'auto' },
+      { label: '截断', value: 'truncate' },
+      { label: '换行', value: 'break' },
+      { label: '强制换行', value: 'breakAll' },
+    ],
+  })
+  xLabelOverflow = 'auto';
+  @Property('标签显示间隔', {
+    ui: {
+      optionalHelp: {
+        text: `默认会采用标签不重叠的策略间隔显示标签。
+可以设置成 0 强制显示所有标签。 
+如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。`,
+        overlayStyle: {
+          whiteSpace: 'pre-line',
+        },
+      },
+    },
+  })
+  xLabelInterval: number;
+
+  @Property('区域缩放')
+  insideDataZoom: boolean;
+  @Property('缩放最少数量', { ui: { visibleIf: { insideDataZoom: [true] } } })
+  dataZoomMinData: number;
+  @Property('缩放开始百分比', { ui: { visibleIf: { insideDataZoom: [true] } } })
+  dataZoomStart: number;
+  @Property('缩放结束百分比', { ui: { visibleIf: { insideDataZoom: [true] } } })
+  dataZoomEnd: number;
+  @Property('滚轮缩放', {
+    enum: [
+      { label: '启用', value: true },
+      { label: '禁用', value: false },
+      { label: '按住shift', value: 'shift' },
+      { label: '按住ctrl', value: 'ctrl' },
+      { label: '按住alt', value: 'alt' },
+    ],
+    ui: { widget: 'select', visibleIf: { insideDataZoom: [true] } },
+  })
+  zoomOnMouseWheel = true;
+  @Property('滑动条', { ui: { visibleIf: { insideDataZoom: [true] } } })
+  sliderDataZoom: boolean;
+  @Property('锁定区域大小', { ui: { visibleIf: { sliderDataZoom: [true] } } })
+  zoomLock: boolean;
+  @Property('提示框字体', { ui: { widget: 'myFont' } })
+  tooltipFont: any;
+  @Property('显示柱条背景', { type: 'boolean' })
+  showBackground = true;
+  @Property('标线', { type: 'boolean' })
+  markLine = false;
+  @Property('Y轴标线高度', { type: 'number', ui: { visibleIf: { markLine: [true] } } })
+  YmarkLineHeight = 10;
+
+  // @Property('显示X轴', {
+  //   ui: { widget: 'boolean', checkedChildren: '开', unCheckedChildren: '关' },
+  // })
+  // showX = true;
+  @Property('Y标线标题', {
+    type: 'string',
+    ui: { visibleIf: { markLine: [true] }, optionalHelp: '此标题需要跟x字段内名字一致' },
+  })
+  YmarkLineName = '';
+  // @Property('标线数值', { type: 'number' })
+  // markLineVal = null;
+
+  @Property('Y标线类型', {
+    ui: { widget: 'select', visibleIf: { markLine: [true] } },
+    enum: [
+      { label: '实线', value: 'solid' },
+      { label: '虚线', value: 'dashed' },
+      { label: '点线', value: 'dotted' },
+    ],
+  })
+  YmarkLineType = 'dashed';
+
+  @Property('Y标线颜色', {
+    ui: {
+      widget: 'myColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
+      visibleIf: { markLine: [true] },
+    },
+  })
+  YmarkLineColor = '#f00';
+  @Property('Y标线粗细', {
+    type: 'number',
+    ui: { visibleIf: { markLine: [true] } },
+  })
+  YmarkWidth = 2;
+  @Property('X轴标线位置', { type: 'string', ui: { visibleIf: { markLine: [true] } } })
+  XmarkLineLocation = '二月';
+  @Property('X标线标题', {
+    type: 'string',
+    ui: { optionalHelp: '此标题需要跟x字段内名字一致', visibleIf: { markLine: [true] } },
+  })
+  XmarkLineName = '';
+  @Property('X标线类型', {
+    ui: { widget: 'select', visibleIf: { markLine: [true] } },
+    enum: [
+      { label: '实线', value: 'solid' },
+      { label: '虚线', value: 'dashed' },
+      { label: '点线', value: 'dotted' },
+    ],
+  })
+  XmarkLineType = 'dashed';
+
+  @Property('X标线颜色', {
+    ui: {
+      visibleIf: { markLine: [true] },
+      widget: 'myColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
+    },
+  })
+  XmarkLineColor = '#f00';
+  @Property('X标线粗细', {
+    type: 'number',
+    ui: { visibleIf: { markLine: [true] } },
+  })
+  XmarkWidth = 2;
+  chartOption: any = {};
+
+  @Data({
+    properties: {
+      x: { type: 'string', title: '类目' },
+      y: { type: 'number', title: '值' },
+      s: { 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', 's'])
+  dataClick = new EventEmitter<any>();
+  xData = [];
+  yData = [];
+  color = [];
+  legends = [];
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes._data) {
+      // this.reloadData();
+      const dataShadow: number[] = [];
+      const maxNum = this.getMaxY();
+      dataShadow.fill(maxNum, 0, this.xData.length);
+      const textStyle = this.getTextStyle(this.font);
+      this.style = textStyle;
+      let hori = this.horizontal;
+      let barColors: string[][];
+      if (this.barColor && this.barColor.value) {
+        barColors = this.barColor.value;
+      } else {
+        barColors = this.barColor as any;
+      }
+      this.color = barColors.map((barColor) => ({
+        type: 'linear',
+        x: 0,
+        y: 0,
+        x2: hori ? 1 : 0,
+        y2: hori ? 0 : 1,
+        global: false,
+        colorStops: [
+          { offset: 0, color: barColor[0] },
+          { offset: 1, color: barColor[1] },
+        ],
+      }));
+
+      let xAxis: any = this.getXAxis();
+
+      let yAxis: any = this.getYAxis();
+      let grid: any = {
+        top: this.grid.top,
+        right: this.grid.right,
+        left: this.grid.left,
+        bottom: this.grid.bottom,
+      };
+      if (this.type === 'dcolor') {
+        const yAxis1 = yAxis;
+        const yAxis2 = this.getYAxis();
+        yAxis1.inverse = true;
+        yAxis = [yAxis1, yAxis2];
+        yAxis.forEach((axis, i) => {
+          axis.gridIndex = i;
+          axis.position = 'top';
+        });
+        xAxis = [xAxis, this.getXAxis()];
+        xAxis.forEach((axis, i) => {
+          axis.gridIndex = i;
+        });
+        grid = [
+          {
+            right: '50%',
+          },
+          {
+            left: '50%',
+          },
+        ];
+      }
+      const dataZoom = this.getDataZoom();
+      this.chartOption = {
+        dataZoom,
+        tooltip: this.getTooltip(),
+        legend: this.getLegend(),
+        grid,
+        xAxis: !hori ? xAxis : yAxis,
+        yAxis: !hori ? yAxis : xAxis,
+        color: this.color,
+        series: [],
+      };
+      this.reloadData();
+    }
+  }
+
+  ngOnInit() {}
+
+  get horizontal(): boolean {
+    return this.type === 'hori' || this.type === 'horiD' || this.type === 'dcolor';
+  }
+
+  getXAxis(): any {
+    let XdisplayScaleShow =
+      this.scaleShow === 'true' ? true : this.scaleShow === '0' ? false : this.scaleShow === '1' ? true : false;
+    return {
+      nameTextStyle: this.style,
+      type: this.xType || 'category',
+      name: this.xUnit,
+      axisLine: {
+        show: this.axisShow === 'true' ? true : this.axisShow === '0' ? false : this.axisShow === '1' ? true : false,
+        lineStyle: {
+          color: this.font.color,
+        },
+      },
+      axisTick: {
+        show: XdisplayScaleShow,
+      },
+      axisLabel: {
+        ...this.style,
+        show: XdisplayScaleShow,
+        rotate: this.xLabelRotate,
+        width: this.xLabelWidth,
+        overflow: this.xLabelOverflow,
+        interval: this.xLabelInterval,
+      },
+    };
+  }
+
+  getYAxis(): any {
+    let YdisplayScaleShow =
+      this.scaleShow === 'true' ? true : this.scaleShow === '0' ? true : this.scaleShow === '1' ? false : false;
+    return {
+      nameTextStyle: this.style,
+      type: 'value',
+      name: this.yUnit,
+      axisLine: {
+        show: this.axisShow === 'true' ? true : this.axisShow === '0' ? true : this.axisShow === '1' ? false : false,
+        lineStyle: {
+          color: this.font.color,
+        },
+      },
+      axisTick: {
+        show: YdisplayScaleShow,
+      },
+      min: this.yMin,
+      max: (value) => {
+        const yMax = Number(this.yMax ? this.yMax : value.max);
+        return Math.ceil(this.yMaxAddNum ? yMax + Number(this.yMaxAddNum) : yMax);
+      },
+      axisLabel: {
+        ...this.style,
+        show: YdisplayScaleShow,
+        // formatter: '{value}' + this.yUnit,
+      },
+      splitLine: {
+        show: this.netLine,
+        lineStyle: {
+          type: 'dashed',
+          color: this.netLineColor,
+        },
+      },
+      minInterval: this.yMinInterval,
+    };
+  }
+
+  setSeriesStyle(name: string, datasetIndex: number) {
+    const textStyle = this.style;
+    const i = this.chartOption.series.length;
+    const series = {
+      name,
+      showBackground: this.showBackground,
+      xAxisIndex: this.type === 'dcolor' ? i : 0,
+      yAxisIndex: this.type === 'dcolor' ? i : 0,
+      label: {
+        normal: {
+          show: this.labelDirection === 'none' ? false : true,
+          // formatter: '{@' + name + '}',
+          position: this.labelDirection || '',
+          textStyle,
+        },
+      },
+      barCategoryGap: this.barCategoryGap + '%',
+      itemStyle: {
+        barBorderRadius: this.barBorderRadius,
+      },
+      stack: this.type === 'double' || this.type === 'horiD' ? '0' : null,
+      type: 'bar',
+      areaStyle: {
+        opacity: 0,
+      },
+      emphasis: {
+        focus: this.type === 'double' || this.type === 'horiD' ? 'series' : null,
+      },
+      encode: this.horizontal ? { y: 'x', x: 'y' } : { x: 'x', y: 'y' },
+      datasetIndex,
+    };
+    this.chartOption.series.push(series);
+    return series;
+  }
+}

package/src/lib/basic-bar-chart/basic-bar-chart.module.ts

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

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

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

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

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

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

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