@cloudbase/weda-ui 3.5.0 → 3.5.2-mp

package/components/chart/common/core/eChartLine.js

@@ -0,0 +1,251 @@
+import EchartBase from './eChartBase';
+import getConfig from '../config/line';
+import lodashSet from 'lodash.set';
+
+/**
+ * 折线图表
+ * @author loonglong
+ **/
+class EchartLine extends EchartBase {
+  constructor() {
+    super();
+    const config = getConfig();
+    this.config = { ...this.config, ...config };
+  }
+  async setSourceData({
+    dataSource,
+    filterData,
+    xField,
+    xStatistics,
+    xIsCountEmpty,
+    yField,
+    groupKey,
+    groupKeyTimeSpan,
+  }) {
+    xField = xField || {}; // 向前兼容
+    const { name = '', type = '', methodName = '' } = dataSource;
+    if (name !== '') {
+      const params = this.createWhere({
+        filterData,
+        xField,
+        xStatistics,
+        xIsCountEmpty,
+        yField,
+        groupKey,
+        groupKeyTimeSpan,
+      });
+      const arrSourData = await this.getSourceData(
+        name,
+        methodName,
+        type,
+        params
+      );
+      // 获取 x 轴数据
+      const sortedXAxisData = this.sortXAxisData(arrSourData, xField.format);
+      const arrXaxisData = this.setXaxis(sortedXAxisData, xField.format);
+      const arrXisCountEmptyIndex = []; // 记录空值的key
+      this.config.series = [];
+
+      if (Object.keys(groupKey ?? {}).length === 0) {
+        if (sortedXAxisData.length > 0) {
+          const numLine = arrSourData[0].YLabels.length;
+          if (numLine > 0) {
+            for (let j = 0; j < numLine; j++) {
+              this.config.series[j] = {
+                type: 'line',
+                smooth: true,
+                name: '',
+                connectNulls: true,
+                showSymbol: true,
+                label: {
+                  show: true,
+                },
+                data: [],
+              };
+              sortedXAxisData.forEach((itemSource, index) => {
+                this.config.series[j].name =
+                  itemSource.YLabels[j]?.Cn_Name ?? itemSource.YLabels[j].Name;
+                if (
+                  (!itemSource.YLabels[j].Value === undefined ||
+                    itemSource.YLabels[j].Value === null) &&
+                  !xIsCountEmpty
+                ) {
+                  arrXisCountEmptyIndex.push(index);
+                } else {
+                  const value = itemSource.YLabels[j].Value
+                    ? itemSource.YLabels[j].Value
+                    : 0;
+                  this.config.series[j].data.push(value);
+                }
+              });
+            }
+          }
+        }
+        // 处理显示空值问题
+        this.setEmptyValue(xIsCountEmpty);
+      } else if (groupKey) {
+        // 如果是分组，则这里需要特殊处理
+        // 按groupKey分组存放数据值
+        const objGroupKey = {}; // {'分组字段':[{value:'统计的值', dimensionality:'维度名', name:'统计的数值字段名'}]}
+        sortedXAxisData.forEach((itemSourData) => {
+          itemSourData.YLabels.forEach((yLabel) => {
+            if (!objGroupKey[yLabel.Group_Name]) {
+              objGroupKey[yLabel.Group_Name] = [];
+            }
+            objGroupKey[yLabel.Group_Name].push({
+              value: yLabel.Value,
+              dimensionality: itemSourData.XLabel.Value,
+              name: yLabel.Cn_Name,
+            });
+          });
+        });
+
+        // 组装图表需要的数据
+        const groups = [];
+        sortedXAxisData.forEach((eachAxis) => {
+          eachAxis.YLabels.forEach((yLabel) => {
+            if (yLabel.Group_Name && groups.indexOf(yLabel.Group_Name) < 0) {
+              // 去重且保留顺序
+              groups.push(yLabel.Group_Name);
+            }
+          });
+        });
+
+        this.config.series = groups.map((groupKey) => {
+          // groupKey分组字段中文名
+          const serie = {
+            name: groupKey,
+            connectNulls: true,
+            data: this.getSeriesDataGroup(arrXaxisData, objGroupKey[groupKey]),
+            type: 'line',
+            smooth: true,
+            showSymbol: true, // 是否显示线条上数据标签
+            label: {
+              show: true, // 显示线条上的数据
+            },
+          };
+          return serie;
+        });
+        this.config.tooltip.formatter = (params) =>
+          `${params.data.dimensionality}\r\n${params.data.name}\r\n${params.seriesName}:${params.value}`;
+      }
+    }
+  }
+  setColor({ setColor }) {
+    if (this.config.series.length > 0 && setColor && setColor.length > 0) {
+      let i = 0;
+      this.config.series.forEach((itemSeries) => {
+        lodashSet(itemSeries, 'itemStyle.color', setColor[i % 6]);
+        i = i + 1;
+      });
+    }
+  }
+
+  setChartType({ chartType }) {
+    this.config.series.length > 0 &&
+      this.config.series.forEach((itemSeries) => {
+        itemSeries.smooth = chartType !== 'line';
+      });
+  }
+
+  // 显示图表上的数据标签 单位，标签，小数位数，后缀
+  setIsSeriesShowSymbol({
+    isSeriesShowSymbol,
+    isUnit,
+    unit,
+    decimalDigits,
+    suffix,
+  }) {
+    decimalDigits = decimalDigits < 0 ? 0 : decimalDigits;
+    this.config.series.length > 0 &&
+      this.config.series.forEach((itemSeries) => {
+        itemSeries.showSymbol = isSeriesShowSymbol;
+        itemSeries.label.show = isSeriesShowSymbol;
+        if (isUnit) {
+          itemSeries.label.formatter = (params) => {
+            const objNewValue = this.getValueByUnit(params.value, unit);
+            return `${objNewValue.toFixed(decimalDigits)}${suffix}`;
+          };
+        }
+      });
+    if (isUnit) {
+      this.config.yAxis.axisLabel.formatter = (value) => {
+        const objNewValue = this.getValueByUnit(value, unit);
+        return `${objNewValue.toFixed(decimalDigits)}${suffix}`;
+      };
+    } else {
+      this.config.yAxis.axisLabel.formatter = null;
+    }
+  }
+  async setOptions({
+    chartType,
+    setColor,
+    isTitle,
+    title,
+    titleLocation,
+    dataSource,
+    filterData,
+    xField,
+    xStatistics,
+    groupKey,
+    groupKeyTimeSpan,
+    xIsCountEmpty,
+    yField,
+    isLegend,
+    legend,
+    isXaxisName,
+    xAxisName,
+    isXaxisAxisLabelShow,
+    isXaxisAxisTickShow,
+    isXaxisAxisLabelRotate,
+    isYAxisSplitlineLinestyleWidth,
+    yAxisSplitlineLinestyleType,
+    yAxisMax,
+    yAxisMin,
+    isYAxisName,
+    yAxisName,
+    isSeriesShowSymbol,
+    isYAxisShow,
+    isUnit,
+    unit,
+    decimalDigits,
+    suffix,
+  }) {
+    if (dataSource) {
+      await this.setSourceData({
+        dataSource,
+        filterData,
+        xField,
+        xStatistics,
+        xIsCountEmpty,
+        yField,
+        groupKey,
+        groupKeyTimeSpan,
+      });
+    }
+    this.setChartType({ chartType });
+    this.setColor({ setColor });
+    this.setTitle({ isTitle, title, titleLocation });
+    this.setLegend({ isLegend, legend });
+    this.setIsXaxisAxisLabelShow({ isXaxisAxisLabelShow });
+    this.setIsXaxisName({ isXaxisName, xAxisName });
+    this.setIsXaxisAxisTickShow({ isXaxisAxisTickShow });
+    this.setIsXaxisAxisLabelRotate({ isXaxisAxisLabelRotate, xStatistics });
+    this.setIsYAxisSplitlineLinestyleWidth({
+      isYAxisSplitlineLinestyleWidth,
+      yAxisSplitlineLinestyleType,
+    });
+    this.setYAxisMaxMin({ yAxisMax, yAxisMin });
+    this.setIsYAxisName({ isYAxisName, yAxisName });
+    this.setIsYAxisShow({ isYAxisShow });
+    this.setIsSeriesShowSymbol({
+      isSeriesShowSymbol,
+      isUnit,
+      unit,
+      decimalDigits,
+      suffix,
+    });
+  }
+}
+
+export default EchartLine;

package/components/chart/common/core/eChartPie.js

@@ -0,0 +1,169 @@
+import EchartBase from './eChartBase';
+import getConfig from '../config/pie';
+/**
+ * 饼状图表
+ * @author loonglong
+ **/
+class EchartPie extends EchartBase {
+  constructor() {
+    super();
+    const config = getConfig();
+    this.config = { ...this.config, ...config };
+  }
+  async setSourceData({
+    dataSource,
+    filterData,
+    setColor,
+    xField,
+    xStatistics,
+    xIsCountEmpty,
+    yField,
+  }) {
+    const { name = '', type = '', methodName = '' } = dataSource;
+    if (name !== '') {
+      const params = this.createWhere({
+        filterData,
+        xField,
+        xStatistics,
+        xIsCountEmpty,
+        yField,
+      });
+      const arrSourData = await this.getSourceData(
+        name,
+        methodName,
+        type,
+        params
+      );
+      // 获取 x 轴数据
+      if (arrSourData.length > 0) {
+        const numPie = arrSourData[0].YLabels.length;
+        if (numPie > 0) {
+          const arrData = [];
+          let i = 0;
+          arrSourData.forEach((itemSource) => {
+            const numc = setColor ? setColor.length : 0;
+            const strColor = numc > 0 ? { color: setColor[i % numc] } : {};
+            arrData.push({
+              value: itemSource.YLabels[0].Value,
+              name: itemSource.XLabel.Value,
+              tooltip: {},
+              itemStyle: strColor,
+            });
+            i = i + 1;
+          });
+          this.config.series[0].data = arrData;
+        }
+      } else {
+        // this.config['series'][0].data = [];
+      }
+    }
+  }
+  setChartType({ chartType }) {
+    this.config.series.length > 0 &&
+      this.config.series.forEach((itemSeries) => {
+        if (chartType === 'pie') {
+          itemSeries.radius = '70%';
+        } else {
+          itemSeries.radius = ['40%', '70%'];
+        }
+      });
+  }
+
+  // 显示图表上的数据标签 单位，标签，小数位数，后缀
+  setIsSeriesShowSymbol({
+    isSeriesShowSymbol,
+    isPercent,
+    isUnit,
+    unit,
+    decimalDigits,
+    suffix,
+  }) {
+    decimalDigits = decimalDigits < 0 ? 0 : decimalDigits;
+    let show = false;
+    let position = 'inner';
+    let formatter = null;
+    if (isSeriesShowSymbol || isPercent || isUnit) {
+      formatter = '';
+    }
+    this.config.series[0].label.show = show;
+    this.config.series[0].label.position = position;
+    if (formatter === null) {
+      this.config.series[0].label.normal = null;
+    } else {
+      this.config.series[0].label.normal.formatter = (objValue) => {
+        let reData = '';
+        if (isSeriesShowSymbol) {
+          // 显示数值
+          reData = objValue.value;
+        }
+        if (isUnit) {
+          // 显示单位
+          if (unit) {
+            const objNewValue = this.getValueByUnit(objValue.value, unit);
+            reData = `${objNewValue.toFixed(decimalDigits)}${suffix}`;
+          } else {
+            reData = `${objValue.value.toFixed(decimalDigits)}`;
+          }
+          this.config.series[0].data.forEach((itemData) => {
+            itemData.tooltip.formatter = (objVal) => {
+              const objItemData = this.getValueByUnit(objVal.value, unit);
+              return `${objItemData.toFixed(decimalDigits)}${suffix}`;
+            };
+          });
+        }
+        if (isPercent) {
+          // 显示百分比
+          reData = `${reData}(${objValue.percent}%)`;
+        }
+        return reData;
+      };
+    }
+  }
+  async setOptions({
+    chartType,
+    isTitle,
+    title,
+    titleLocation,
+    dataSource,
+    filterData,
+    setColor,
+    xField,
+    xStatistics,
+    xIsCountEmpty,
+    yField,
+    isLegend,
+    legend,
+    isSeriesShowSymbol,
+    isPercent,
+    isUnit,
+    unit,
+    decimalDigits,
+    suffix,
+  }) {
+    if (dataSource) {
+      await this.setSourceData({
+        dataSource,
+        filterData,
+        setColor,
+        xField,
+        xStatistics,
+        xIsCountEmpty,
+        yField,
+      });
+    }
+
+    this.setChartType({ chartType });
+    this.setTitle({ isTitle, title, titleLocation });
+    this.setLegend({ isLegend, legend });
+    this.setIsSeriesShowSymbol({
+      isSeriesShowSymbol,
+      isPercent,
+      isUnit,
+      unit,
+      decimalDigits,
+      suffix,
+    });
+  }
+}
+
+export default EchartPie;

package/components/chart/common/data-transform.js

@@ -0,0 +1,284 @@
+import lodashSet from 'lodash.set';
+import { isNil } from '../../../utils/lodash';
+
+export const checkIsNewData = (props) => {
+  return (
+    Object.keys(props.dataSource ?? {}).length === 0 &&
+    Object.keys(props['dataModel'] ?? {}).length > 0
+  );
+};
+
+export function transform(chartType, dataInput, chartInput) {
+  if (!Array.isArray(dataInput)) {
+    console.warn('Chart 数据输入值应该是数组');
+    dataInput = [];
+  }
+
+  const title = {
+    text: chartInput.title,
+    show: chartInput.isTitle,
+    left: '35%',
+    top: '-1%',
+    right: null,
+  };
+  const legend = {
+    show: chartInput.isLegend,
+  };
+
+  switch (chartInput.legend) {
+    case 'top':
+      legend.orient = 'horizontal';
+      legend.top = '6%';
+      break;
+
+    case 'left':
+      legend.orient = 'vertical';
+      legend.top = '30%';
+      legend.left = '1%';
+      break;
+
+    case 'right':
+      legend.orient = 'vertical';
+      legend.top = '30%';
+      legend.right = '6%';
+      break;
+
+    default:
+      legend.top = '89%';
+      legend.orient = 'horizontal';
+      break;
+  } // const numberOfYAxis = dataInput?.[0]?.YLabels.length ?? 0;
+  // const sortedDataInput = dataInput.sort((a, b) => {
+  //   // if (['datetime', 'date', 'time'].includes(formatType)) {
+  // });
+  // APIs或者变量不用前端排序
+  // 是否显示空值
+
+  const finalDataInput = (dataInput ?? [])?.filter((item) => {
+    if (!chartInput.xIsCountEmpty) {
+      return (
+        item.XLabel['Value'] !== undefined && item.XLabel['Value'] !== null
+      );
+    }
+
+    return true;
+  });
+
+  const formatter = ({ value, percent }) => {
+    let val = Number(value);
+    let result = '';
+
+    if (chartInput.isUnit) {
+      val = val / chartInput.unit;
+    }
+
+    result = `${val.toFixed(chartInput.decimalDigits)}${chartInput.suffix}`;
+    if (chartInput.isPercent && !isNil(percent)) {
+      result = `${result}(${percent}%)`;
+    }
+    return result;
+  };
+
+  const series = [];
+  const groups = [];
+  finalDataInput.forEach((eachAxis) => {
+    eachAxis.YLabels.forEach((yLabel) => {
+      if (yLabel.Group_Name && groups.indexOf(yLabel.Group_Name) < 0) {
+        // 去重且保留顺序
+        groups.push(yLabel.Group_Name);
+      }
+    });
+  }); //
+
+  if (chartType === 'pie' && groups.length > 0) {
+    throw new Error('饼图没有分组功能');
+  }
+
+  if (groups.length <= 0) {
+    finalDataInput.forEach((item) => {
+      item.YLabels.forEach((eachYaxis, idx) => {
+        if (!series[idx]) {
+          series[idx] = {
+            type: chartType,
+            name:
+              chartType === 'pie'
+                ? undefined
+                : eachYaxis.Cn_Name ?? eachYaxis.Name,
+            stack: chartInput.isPile ? 'pile' : undefined,
+            showSymbol:
+              chartType === 'pie' ? undefined : chartInput.isSeriesShowSymbol,
+            label: {
+              show: chartInput.isSeriesShowSymbol, // 老逻辑这么来的
+            },
+            itemStyle:
+              chartType === 'pie'
+                ? undefined
+                : {
+                    color: chartInput?.setColor?.[idx % 6] ?? null,
+                  },
+            data:
+              chartType === 'pie'
+                ? [
+                    {
+                      value: eachYaxis.Value,
+                      name: item.XLabel.Value.toString(),
+                    },
+                  ]
+                : [eachYaxis.Value],
+          };
+
+          if (chartInput.isUnit || chartInput.isPercent) {
+            series[idx].label.formatter = formatter;
+          }
+        } else {
+          if (chartType === 'pie') {
+            series[idx].data.push({
+              value: eachYaxis.Value,
+              name: item.XLabel.Value.toString(),
+            });
+          } else {
+            series[idx].data.push(eachYaxis.Value);
+          }
+        }
+
+        if (chartType === 'pie') {
+          lodashSet(series[idx], 'label.position', 'inner');
+
+          if (chartInput.chartType === 'pie') {
+            series[idx]['radius'] = '70%';
+          } else {
+            series[idx]['radius'] = ['40%', '70%'];
+          }
+          series[idx]['emphasis'] = {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(0, 0, 0, 0.5)',
+            },
+          };
+        }
+      });
+    });
+  } else {
+    // 先给每个分组留位置
+    groups.forEach((groupName, idx) => {
+      series.push({
+        type: chartType,
+        name: groupName,
+        stack: chartInput.isPile ? 'pile' : undefined,
+        showSymbol:
+          chartType === 'pie' ? undefined : chartInput.isSeriesShowSymbol,
+        label: {
+          show: chartInput.isSeriesShowSymbol, // 老逻辑这么来的
+        },
+        itemStyle:
+          chartType === 'pie'
+            ? undefined
+            : {
+                color: chartInput?.setColor?.[idx % 6] ?? null,
+              },
+        data: [],
+      });
+    }); // 然后再往data里放东西
+
+    finalDataInput.forEach((item) => {
+      item.YLabels.forEach((eachYaxis) => {
+        if (eachYaxis.Group_Name) {
+          series[groups.indexOf(eachYaxis.Group_Name)].data.push({
+            value: eachYaxis.Value,
+            name: eachYaxis.Cn_Name ?? eachYaxis.Name,
+          });
+
+          for (let i = 0; i < groups.length; i++) {
+            if (groups.indexOf(eachYaxis.Group_Name) !== i) {
+              series[i].data.push({
+                value: null,
+              });
+            }
+          }
+        }
+      });
+    });
+  }
+
+  console.log(dataInput, chartInput, 'TRANSFORM');
+
+  if (chartType === 'bar' || chartType === 'line') {
+    const xAxis = {
+      name: chartInput.isXaxisName ? chartInput.xAxisName : '',
+      nameTextStyle: {
+        align: 'center',
+      },
+      axisLabel: {
+        show: chartInput.isXaxisAxisLabelShow,
+        // 禁用默认的小屏幕自适应隐藏列
+        interval: 0,
+        rotate: chartInput.isXaxisAxisLabelRotate ? 30 : 0,
+      },
+      axisTick: {
+        show: chartInput.isXaxisAxisTickShow,
+      },
+      // 老逻辑是这样的，但看不懂为啥
+      inverse: chartInput.directionType === 'crosswise',
+      type: 'category',
+      data: [],
+    };
+    const yAxis = {
+      show: chartInput.isYAxisShow,
+      name: chartInput.isYAxisName ? chartInput.yAxisName : '',
+      splitLine: {
+        lineStyle: {
+          width: chartInput.isYAxisSplitlineLinestyleWidth ? 1 : 0,
+          type: chartInput.yAxisSplitlineLinestyleType,
+        },
+      },
+      axisLabel: {
+        padding: [0, -10, 0, 0],
+        formatter: null,
+      },
+      min: chartInput.yAxisMin || null,
+      max: chartInput.yAxisMax || null,
+      type: 'value',
+    };
+    xAxis.data = finalDataInput.map((item) => {
+      return item.XLabel.Value ?? null;
+    });
+
+    if (chartInput.isUnit) {
+      yAxis.axisLabel.formatter = (value) => formatter({ value });
+    }
+
+    if (chartInput.directionType === 'crosswise') {
+      return {
+        title,
+        legend,
+        xAxis: yAxis,
+        yAxis: xAxis,
+        series,
+      };
+    }
+
+    return {
+      title,
+      legend,
+      xAxis,
+      yAxis,
+      series,
+    };
+  }
+
+  if (chartType === 'pie') {
+    const result = {
+      title,
+      legend,
+      series,
+      tooltip: {
+        trigger: 'item',
+      },
+    };
+    if (chartInput.setColor && chartInput.setColor.length > 0) {
+      result['color'] = chartInput.setColor;
+    }
+    return result;
+  }
+}