@cloudbase/weda-ui 0.2.15 → 1.0.21

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

@@ -0,0 +1,229 @@
+import EchartBase from './eChartBase';
+import getConfig from '../config/line';
+/**
+ * 折线图表
+ * @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
+      if (Object.keys(groupKey ?? {}).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;
+              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 groupNames = Object.keys(objGroupKey);
+        this.config.series = groupNames.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}`
+        );
+      }
+    }
+  }
+  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,
+    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.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/src/mp/components/chart/common/core/eChartPie.js

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