@cloudbase/weda-ui 3.5.2-mp → 3.5.3

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

@@ -1,251 +0,0 @@
-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

@@ -1,169 +0,0 @@
-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

@@ -1,284 +0,0 @@
-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;
-  }
-}