bbj-screen-widget 2.4.61 → 2.4.62

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

@@ -0,0 +1,654 @@
+import { Component, OnChanges, OnInit, SimpleChanges, EventEmitter } from '@angular/core';
+import { Data, Property, Widget, Drill, DataOutput } from 'bbj-widget-base';
+import { getEchartsTextStyle } from '../shared/util/echarts.util';
+
+@Component({
+  selector: 'sc-basicLine',
+  templateUrl: './basic-line-chart.component.html',
+  styleUrls: ['./basic-line-chart.component.less'],
+})
+@Widget('基本折线图', {
+  group: 'lineChart',
+  image: 'assets/img/screen/basic-line-chart.png',
+  icon: 'icontubiao',
+})
+export class BasicLineChartComponent implements OnInit, OnChanges {
+  @Property('类型', { ui: { hidden: true } })
+  type = 'basic';
+  @Property('图表样式', {
+    ui: {
+      widget: 'myImageExample',
+      spanLabel: 24,
+      spanControl: 24,
+      reset: ['lineColor'],
+      example: [
+        {
+          background: 'assets/img/screen/line2.png',
+          data: { lineColor: ['#FF851D', '#FFEF66'] },
+        },
+        {
+          background: 'assets/img/screen/line3.png',
+          data: { lineColor: ['#00D191', '#00FECB'] },
+        },
+        {
+          background: 'assets/img/screen/line1.png',
+          data: { lineColor: ['#3285FF', '#00D2FD'] },
+        },
+        {
+          background: 'assets/img/screen/line4.png',
+          data: { lineColor: ['#8934F8', '#FF3699'] },
+        },
+      ],
+    },
+  })
+  example: any;
+  @Property('系列颜色', {
+    ui: {
+      widget: 'seriesColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
+    },
+  })
+  lineColor = ['#3285FF', '#00D2FD'];
+  @Property('字体', { ui: { widget: 'myFont' } })
+  font: any = {
+    family: '',
+    color: '#595F7A',
+    weight: 'normal',
+    size: 12,
+    space: 0,
+    lineHeight: 12,
+  };
+  @Property('边距', { ui: { widget: 'myGrid' } })
+  grid: any = {
+    top: 30,
+    right: 30,
+    bottom: 40,
+    left: 36,
+  };
+  @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: 'line' },
+      { label: '阴影指示器', value: 'shadow' },
+      { label: '十字准星指示器', value: 'cross' },
+      { label: '无', value: 'none' },
+    ],
+  })
+  axisType = 'none';
+  @Property('提示线类型', {
+    ui: { widget: 'select' },
+    enum: [
+      { label: '实线', value: 'solid' },
+      { label: '虚线', value: 'dashed' },
+      { label: '点线', value: 'dotted' },
+    ],
+  })
+  lineType = 'dashed';
+  // @Property('轴单位', {ui: {widget: 'myUnit'}})
+  // unit = {x: '', y: ''};
+  @Property('提示线颜色', {
+    ui: {
+      widget: 'myColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
+    },
+  })
+  axisColor = '#333333';
+  @Property('提示线宽度', { type: 'number' })
+  axisWidth = 10;
+  @Property('x轴类型', {
+    enum: [
+      { label: '类目', value: 'category' },
+      { label: '时间', value: 'time' },
+    ],
+  })
+  xType = 'category';
+  @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('坐标留白', { type: 'boolean' })
+  boundaryGap = true;
+  @Property('显示Y轴', { type: 'boolean' })
+  showY = true;
+  @Property('y轴网络线', { type: 'boolean' })
+  netLine = false;
+
+  @Property('y网络线类型', {
+    ui: { widget: 'select', visibleIf: { netLine: [true] } },
+    enum: [
+      { label: '实线', value: 'solid' },
+      { label: '虚线', value: 'dashed' },
+      { label: '点线', value: 'dotted' },
+    ],
+  })
+  netLineType = 'dashed';
+  @Property('x轴网络线', { type: 'boolean' })
+  netLineX = false;
+
+  @Property('x网络线类型', {
+    ui: { widget: 'select', visibleIf: { netLineX: [true] } },
+    enum: [
+      { label: '实线', value: 'solid' },
+      { label: '虚线', value: 'dashed' },
+      { label: '点线', value: 'dotted' },
+    ],
+  })
+  netLineXType = 'dashed';
+
+  @Property('网络线颜色', {
+    ui: {
+      widget: 'myColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
+    },
+  })
+  netLineColor = 'rgba(255,255,255,0.2)';
+
+  @Property('标签', { type: 'boolean' })
+  label = false;
+
+  @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;
+  @Property('数据标线')
+  showDataMarkLine: boolean;
+  @Property('数据标线格式化', {
+    ui: { visibleIf: { showDataMarkLine: [true] }, optionalHelp: 'function(params){return params.data.value}' },
+  })
+  dataMarkLineFormatter: string;
+  @Property('隐藏x轴标签')
+  hideXLabel: boolean;
+  @Property('x轴标签角度', {
+    ui: { widget: 'myRange', min: -90, max: 90, step: 10, visibleIf: { hideXLabel: (value) => !value } },
+  })
+  xLabelRotate = 0;
+  @Property('x轴文本宽度', { ui: { visibleIf: { hideXLabel: (value) => !value } } })
+  xLabelWidth: number;
+  @Property('x轴文字宽度超出', {
+    enum: [
+      { label: '自动', value: 'auto' },
+      { label: '截断', value: 'truncate' },
+      { label: '换行', value: 'break' },
+      { label: '强制换行', value: 'breakAll' },
+    ],
+    ui: { widget: 'select', visibleIf: { hideXLabel: (value) => !value } },
+  })
+  xLabelOverflow = 'auto';
+  @Property('标签显示间隔', {
+    ui: {
+      visibleIf: { hideXLabel: (value) => !value },
+      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('阶梯拐点', {
+    enum: [
+      { label: '当前点', value: 'start' },
+      { label: '中间点', value: 'middle' },
+      { label: '下个点', value: 'end' },
+    ],
+    ui: { widget: 'select', visibleIf: { type: ['step'] } },
+  })
+  step: string;
+  @Property('标记点大小', { type: 'number' })
+  symbolSize: number;
+  chartOption: any = null;
+  @Data({
+    properties: {
+      x: { type: 'string', title: '类目' },
+      y: { type: 'number', title: '值' },
+      s: { type: 'string', title: '系列' },
+    },
+  })
+  _data: any[] = [
+    { 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 = [];
+  // series = [];
+  style = {
+    color: '',
+    fontFamily: '',
+    fontWeight: '',
+    fontSize: '',
+    lineHeight: '',
+  };
+  constructor() {}
+
+  ngOnInit() {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes._data) {
+      const textStyle = this.getTextStyle(this.font);
+      this.style = textStyle;
+      this.chartOption = {
+        dataZoom: this.getDataZoom(),
+        tooltip: this.getTooltip(),
+        legend: this.getLegend(),
+        grid: this.getGrid(),
+        xAxis: this.getXAxis(),
+        yAxis: this.getYAxis(),
+        color: this.lineColor,
+        series: [],
+      };
+      this.reloadData();
+    }
+  }
+
+  getXAxis(): any {
+    return {
+      name: this.xUnit,
+      nameTextStyle: this.style,
+      type: this.xType || 'category',
+      boundaryGap: this.boundaryGap,
+      axisLine: {
+        lineStyle: {
+          color: this.style.color,
+        },
+      },
+      axisLabel: {
+        ...this.style,
+        rotate: this.xLabelRotate,
+        show: !this.hideXLabel,
+        width: this.xLabelWidth,
+        overflow: this.xLabelOverflow,
+        interval: this.xLabelInterval,
+      },
+      splitLine: {
+        show: this.netLineX,
+        lineStyle: {
+          type: this.netLineXType,
+          color: this.netLineColor,
+        },
+      },
+    };
+  }
+
+  getYAxis(): any {
+    return {
+      show: true,
+      name: this.yUnit,
+      nameTextStyle: this.style,
+      type: 'value',
+      min: this.yMin,
+      max: (value) => {
+        let yMax = value.max;
+        if (this.yMax) {
+          yMax = Number(this.yMax);
+        } else if (this.markLine) {
+          yMax = Math.max(Number(this.YmarkLineHeight), yMax);
+        }
+        return Math.ceil(this.yMaxAddNum ? yMax + Number(this.yMaxAddNum) : yMax);
+      },
+      axisLine: {
+        show: this.showY,
+        lineStyle: {
+          color: this.style.color,
+        },
+      },
+      axisLabel: this.style,
+      splitLine: {
+        show: this.netLine,
+        lineStyle: {
+          type: this.netLineXType,
+          color: this.netLineColor,
+        },
+      },
+      axisTick: {
+        show: this.showY,
+      },
+      minInterval: this.yMinInterval,
+    };
+  }
+
+  getGrid() {
+    return {
+      top: this.grid.top,
+      right: this.grid.right,
+      left: this.grid.left,
+      bottom: this.grid.bottom,
+    };
+  }
+  getLegend(): any {
+    return {
+      align: 'left',
+      left: this.align,
+      show: this.align !== 'none',
+      icon: 'rect',
+      textStyle: this.style,
+    };
+  }
+  getTooltip() {
+    return {
+      trigger: 'axis',
+      textStyle: this.getTextStyle(this.tooltipFont),
+      axisPointer: {
+        type: this.axisType,
+        label: {
+          show: false,
+        },
+        lineStyle: {
+          type: this.lineType,
+          color: this.axisColor,
+          width: this.axisWidth,
+        },
+      },
+    };
+  }
+
+  getTextStyle(font: any) {
+    return getEchartsTextStyle(font);
+  }
+
+  getDataZoom() {
+    const dataZoom = [];
+    if (this.insideDataZoom) {
+      let enableDataZoom = true;
+      if (this.dataZoomMinData != null) {
+        const xSet = new Set<string>();
+        this._data.forEach((data) => {
+          if (data.x) {
+            xSet.add(data.x);
+          }
+        });
+        if (xSet.size < this.dataZoomMinData) {
+          enableDataZoom = false;
+        }
+      }
+      if (enableDataZoom) {
+        let start = this.dataZoomStart || 0;
+        let end = this.dataZoomEnd || 100;
+        dataZoom.push({ type: 'inside', start, end, zoomOnMouseWheel: this.zoomOnMouseWheel });
+        if (this.sliderDataZoom) {
+          dataZoom.push({ type: 'slider', start, end, zoomLock: this.zoomLock, brushSelect: false });
+        }
+      }
+    }
+    return dataZoom;
+  }
+
+  reloadData() {
+    const seriesMap = {};
+    const dataset = [];
+    const source = [];
+    dataset.push({ source });
+    this._data.forEach((record) => {
+      // 针对markline标线关联数据库的操作， 若x的名字与markline的name一致，则获取对应的y轴数据作为markline的value; 目前仅支持一个markline
+      // data中过滤掉markline的数据
+      if (this.markLine && this.YmarkLineName && record.x === this.YmarkLineName) {
+        this.YmarkLineHeight = record.y;
+      } else {
+        //为空filter会报错
+        if (record.s == null) {
+          record = { ...record, s: '' };
+        }
+        source.push(record);
+        const s = record.s;
+        let series = seriesMap[s];
+        if (!series) {
+          // seriesSet.add(s);
+          const transform = {
+            type: 'filter',
+            config: { dimension: 's', value: s },
+          };
+          dataset.push({ transform });
+          series = this.setSeriesStyle(s, dataset.length - 1);
+          seriesMap[s] = series;
+          if (this.showDataMarkLine) {
+            series.markLine = {
+              symbol: ['none', 'none'],
+              label: {
+                ...this.style,
+                position: 'start',
+              },
+              data: [],
+            };
+            if (this.dataMarkLineFormatter) {
+              series.markLine.label.formatter = eval('(' + this.dataMarkLineFormatter + ')');
+            }
+          }
+        }
+        if (this.showDataMarkLine) {
+          series.markLine.data.push({ xAxis: record.x });
+        }
+      }
+    });
+    this.chartOption.dataset = dataset;
+    if (this.markLine) {
+      const marklineStyle: any = {
+        symbol: 'none',
+        silent: true, // 鼠标悬停书剑，true没有
+        data: [],
+      };
+      if (this.YmarkLineName) {
+        marklineStyle.data.push({
+          name: this.YmarkLineName,
+          type: this.YmarkLineHeight ? null : 'average',
+          yAxis: this.YmarkLineHeight,
+          lineStyle: {
+            color: this.YmarkLineColor,
+            type: this.YmarkLineType,
+            width: this.YmarkWidth ? this.YmarkWidth : 2,
+          },
+          label: {
+            formatter: '{b}{c}',
+            position: 'insideEndTop',
+            color: this.YmarkLineColor,
+            fontSize: this.font.size,
+          },
+        });
+      }
+      if (this.XmarkLineName) {
+        marklineStyle.data.push({
+          name: this.XmarkLineName,
+          type: this.XmarkLineLocation ? null : 'average',
+          xAxis: this.XmarkLineLocation,
+          lineStyle: {
+            color: this.XmarkLineColor,
+            type: this.XmarkLineType,
+            width: this.XmarkWidth ? this.XmarkWidth : 2,
+          },
+          label: {
+            formatter: '{b}{c}',
+            position: 'insideEndTop',
+            color: this.XmarkLineColor,
+            fontSize: this.font.size,
+          },
+        });
+      }
+      this.chartOption.series.push({ type: 'line', markLine: marklineStyle, data: [] });
+      // this.chartOption.series[this.chartOption.series.length - 1].markLine = marklineStyle;
+    }
+  }
+
+  setSeriesStyle(name: string, datasetIndex: number) {
+    const series: any = {
+      name,
+      label: {
+        show: this.label,
+        textStyle: this.style,
+      },
+      connectNulls: true,
+      itemStyle: {},
+      type: 'line',
+      areaStyle: {},
+      smooth: false,
+      symbolSize: this.symbolSize ?? 10,
+      encode: { x: 'x', y: 'y' },
+      datasetIndex,
+    };
+    this.chartOption.series.push(series);
+    series.areaStyle.opacity = 0;
+    if (this.type === 'smooth' || this.type === 'smooth-area') {
+      series.smooth = true;
+    }
+    if (this.type === 'area' || this.type === 'smooth-area') {
+      series.areaStyle.opacity = 0.5;
+      series.symbolSize = this.symbolSize ?? (this.label ? 10 : 0);
+    }
+    if (this.type === 'step') {
+      series.step = this.step;
+    }
+    return series;
+  }
+
+  uniqueData(data) {
+    for (let i = 0; i < data.length - 1; i++) {
+      for (let j = i + 1; j < data.length; j++) {
+        if (data[i] === data[j]) {
+          data.splice(j, 1);
+          j--;
+        }
+      }
+    }
+    return data;
+  }
+
+  getMaxY() {
+    for (let i = 0; i < this._data.length; i++) {
+      this.yData[i] = this._data[i].y;
+    }
+    this.uniqueData(this.yData);
+    const a = Math.max(...this.yData).toFixed(0);
+    const b = a.toString().length;
+    const c = Math.pow(10, b - 1);
+    const max = Number(c) + Number(a);
+    return max;
+  }
+
+  onChartClick(event) {
+    this.dataClick.emit({ x: event.name, s: event.seriesName });
+  }
+}

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

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

package/src/lib/basic-pie-chart/basic-pie-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-pie-chart/basic-pie-chart.component.less

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

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

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