@cloudbase/weda-ui 3.1.0 → 3.1.1

package/dist/web/components/chart/common/config/global.js

@@ -0,0 +1,16 @@
+/** 根据当前环境获取 pc 上配置，还是 H5上的配置 */
+const getConfig = () => {
+    const globalH5 = {
+        title: {
+            text: 'demo实例',
+            show: true,
+            left: '50%',
+        },
+        legend: {
+            top: '88%',
+        },
+        tooltip: {},
+    };
+    return globalH5;
+};
+export default getConfig;

package/dist/web/components/chart/common/config/line.d.ts

@@ -0,0 +1,46 @@
+export default getConfig;
+/** 根据当前环境获取 pc 上配置，还是 H5上的配置 */
+declare function getConfig(): {
+    xAxis: {
+        name: string;
+        nameTextStyle: {
+            align: string;
+        };
+        axisLabel: {
+            show: boolean;
+            rotate: number;
+        };
+        axisTick: {
+            show: boolean;
+        };
+        type: string;
+        data: string[];
+    };
+    yAxis: {
+        type: string;
+        show: boolean;
+        name: string;
+        splitLine: {
+            lineStyle: {
+                width: number;
+                type: string;
+            };
+        };
+        axisLabel: {
+            padding: number[];
+        };
+        min: any;
+        max: any;
+    };
+    series: {
+        name: string;
+        connectNulls: boolean;
+        data: number[];
+        type: string;
+        smooth: boolean;
+        showSymbol: boolean;
+        label: {
+            show: boolean;
+        };
+    }[];
+};

package/dist/web/components/chart/common/config/line.js

@@ -0,0 +1,49 @@
+/** 根据当前环境获取 pc 上配置，还是 H5上的配置 */
+const getConfig = () => {
+    const lineH5 = {
+        xAxis: {
+            name: 'X轴名',
+            nameTextStyle: { align: 'center' },
+            axisLabel: {
+                show: true,
+                rotate: 0, // 字体倾斜
+            },
+            axisTick: {
+                show: true, // 刻度显示
+            },
+            type: 'category',
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        },
+        yAxis: {
+            type: 'value',
+            show: true,
+            name: 'Y轴名',
+            splitLine: {
+                lineStyle: {
+                    width: 1,
+                    type: 'dashed', //solid,dashed,dotted
+                },
+            },
+            axisLabel: {
+                padding: [0, -10, 0, 0],
+            },
+            min: null,
+            max: null,
+        },
+        series: [
+            {
+                name: 'demo',
+                connectNulls: true,
+                data: [820, 932, 901, 934, 1290, 1330, 1320],
+                type: 'line',
+                smooth: true,
+                showSymbol: true,
+                label: {
+                    show: true, // 显示线条上的数据
+                },
+            },
+        ],
+    };
+    return lineH5;
+};
+export default getConfig;

package/dist/web/components/chart/common/config/pie.d.ts

@@ -0,0 +1,29 @@
+export default getConfig;
+/** 根据当前环境获取 pc 上配置，还是 H5上的配置 */
+declare function getConfig(): {
+    series: {
+        data: {
+            value: number;
+            name: string;
+            tooltip: {};
+            itemStyle: {};
+        }[];
+        label: {
+            show: boolean;
+            position: string;
+            normal: {
+                formatter: any;
+                position: string;
+            };
+        };
+        type: string;
+        radius: string;
+        emphasis: {
+            itemStyle: {
+                shadowBlur: number;
+                shadowOffsetX: number;
+                shadowColor: string;
+            };
+        };
+    }[];
+};

package/dist/web/components/chart/common/config/pie.js

@@ -0,0 +1,36 @@
+/** 根据当前环境获取 pc 上配置，还是 H5上的配置 */
+const getConfig = () => {
+    const pieH5 = {
+        series: [
+            {
+                // name: 'demo',
+                data: [
+                    { value: 820, name: '实例数据1', tooltip: {}, itemStyle: {} },
+                    { value: 932, name: '实例数据2', tooltip: {}, itemStyle: {} },
+                    { value: 901, name: '实例数据3', tooltip: {}, itemStyle: {} },
+                    { value: 934, name: '实例数据4', tooltip: {}, itemStyle: {} },
+                    { value: 1290, name: '实例数据5', tooltip: {}, itemStyle: {} },
+                ],
+                label: {
+                    show: true,
+                    position: 'inner',
+                    normal: {
+                        formatter: null,
+                        position: 'inner',
+                    },
+                },
+                type: 'pie',
+                radius: '70%',
+                emphasis: {
+                    itemStyle: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.5)',
+                    },
+                },
+            },
+        ],
+    };
+    return pieH5;
+};
+export default getConfig;

package/dist/web/components/chart/common/core/eChartBar.d.ts

@@ -0,0 +1,32 @@
+export default EchartBar;
+/**
+ * 柱状图表
+ * @author loonglong
+ **/
+declare class EchartBar extends EchartBase {
+    setSourceData({ dataSource, filterData, xField, xStatistics, xIsCountEmpty, groupKey, groupKeyTimeSpan, yField, isPile, }: {
+        dataSource: any;
+        filterData: any;
+        xField: any;
+        xStatistics: any;
+        xIsCountEmpty: any;
+        groupKey: any;
+        groupKeyTimeSpan: any;
+        yField: any;
+        isPile: any;
+    }): Promise<void>;
+    setColor({ setColor }: {
+        setColor: any;
+    }): void;
+    setIsSeriesShowSymbol({ isSeriesShowSymbol, isUnit, unit, decimalDigits, suffix, }: {
+        isSeriesShowSymbol: any;
+        isUnit: any;
+        unit: any;
+        decimalDigits: any;
+        suffix: any;
+    }): void;
+    setDirectionType({ directionType }: {
+        directionType: any;
+    }): void;
+}
+import EchartBase from "./eChartBase";

package/dist/web/components/chart/common/core/eChartBar.js

@@ -0,0 +1,196 @@
+import EchartBase from './eChartBase';
+import getConfig from '../config/bar';
+/**
+ * 柱状图表
+ * @author loonglong
+ **/
+class EchartBar extends EchartBase {
+    constructor() {
+        super();
+        const config = getConfig();
+        this.config = { ...this.config, ...config };
+    }
+    async setSourceData({ dataSource, filterData, xField, xStatistics, xIsCountEmpty, groupKey, groupKeyTimeSpan, yField, isPile, }) {
+        const { name = '', type = '', methodName = '' } = dataSource;
+        if (name !== '') {
+            const params = this.createWhere({
+                filterData,
+                xField,
+                xStatistics,
+                xIsCountEmpty,
+                groupKey,
+                groupKeyTimeSpan,
+                yField,
+            });
+            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 !== null && groupKey !== void 0 ? groupKey : {}).length === 0) {
+                const numLine = sortedXAxisData[0].YLabels.length;
+                if (numLine > 0) {
+                    for (let j = 0; j < numLine; j++) {
+                        this.config.series[j] = {
+                            type: 'bar',
+                            name: '',
+                            stack: isPile ? 'pile' : null,
+                            itemStyle: { color: null },
+                            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 arrGroupKey = Object.keys(objGroupKey);
+                this.config.series = arrGroupKey.map((groupKey) => {
+                    // groupKey分组字段中文名
+                    const serie = {
+                        name: groupKey,
+                        type: 'bar',
+                        itemStyle: {
+                            color: null,
+                        },
+                        showSymbol: true,
+                        label: {
+                            show: true,
+                        },
+                        data: this.getSeriesDataGroup(arrXaxisData, objGroupKey[groupKey]),
+                        stack: isPile ? 'pile' : null,
+                    };
+                    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) => {
+                itemSeries.itemStyle.color = setColor[i % 6];
+                i = i + 1;
+            });
+        }
+    }
+    // 显示图表上的数据标签 单位，标签，小数位数，后缀
+    setIsSeriesShowSymbol({ isSeriesShowSymbol, isUnit, unit, decimalDigits, suffix, }) {
+        decimalDigits = Math.max(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;
+        }
+    }
+    // 设置柱状图X,Y倒转
+    setDirectionType({ directionType }) {
+        let temAxis = {};
+        if (directionType === 'crosswise') {
+            // 横向
+            temAxis = this.config.xAxis;
+            this.config.xAxis = this.config.yAxis;
+            this.config.yAxis = temAxis;
+            this.config.yAxis.inverse = true;
+        }
+        else {
+            // 纵向
+            if (this.config.yAxis.inverse) {
+                temAxis = this.config.yAxis;
+                this.config.yAxis = this.config.xAxis;
+                this.config.xAxis = temAxis;
+                this.config.xAxis.inverse = false;
+            }
+        }
+    }
+    async setOptions({ directionType, isPile, setColor, isTitle, title, titleLocation, dataSource, filterData, xField, xStatistics, groupKey, groupKeyTimeSpan, xIsCountEmpty, yField, isLegend, legend, legend2, isXaxisName, xAxisName, isXaxisAxisLabelShow, isXaxisAxisTickShow, isXaxisAxisLabelRotate, isYAxisSplitlineLinestyleWidth, yAxisSplitlineLinestyleType, yAxisMax, yAxisMin, isYAxisName, yAxisName, isSeriesShowSymbol, isYAxisShow, isUnit, unit, decimalDigits, suffix, }) {
+        legend = document.body.clientWidth < 1024 ? legend : legend2;
+        if (dataSource) {
+            await this.setSourceData({
+                dataSource,
+                filterData,
+                xField,
+                xStatistics,
+                xIsCountEmpty,
+                groupKey,
+                groupKeyTimeSpan,
+                yField,
+                isPile,
+            });
+        }
+        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,
+        });
+        this.setDirectionType({ directionType });
+        return this.config;
+    }
+}
+export default EchartBar;

package/dist/web/components/chart/common/core/eChartBase.d.ts

@@ -0,0 +1,128 @@
+export declare type IEchartModalBase = typeof EchartBase;
+export declare abstract class AbstractEchartBaseModal {
+    abstract setOptions(options: any): Promise<void>;
+    abstract getOptions(option: any): Promise<void>;
+}
+declare type IReturnData = {
+    value: {
+        Key: string;
+        OperationType: 'count' | 'sum' | 'avg' | 'max' | 'min';
+    }[];
+    where: [];
+    dimension: {
+        TimeSpan?: string;
+        Key?: string;
+        IsCountEmpty?: boolean;
+    };
+    group: {
+        TimeSpan?: string;
+        Key?: string;
+    };
+};
+/**
+ * 图表处理基类
+ * @author loonglong
+ **/
+declare class EchartBase extends AbstractEchartBaseModal {
+    config: any;
+    constructor();
+    setOptions(options: any): Promise<void>;
+    /** 获取所有配置好的图表数据 */
+    getOptions(): any;
+    /** 生成后台查询条件 */
+    protected createWhere({ filterData, xField, xStatistics, xIsCountEmpty, yField, groupKey, groupKeyTimeSpan, }: {
+        filterData: any;
+        xField: any;
+        xStatistics: any;
+        xIsCountEmpty: any;
+        yField: any;
+        groupKey?: Record<string, any>;
+        groupKeyTimeSpan?: string;
+    }): IReturnData;
+    /**
+     * 从后台获取统计数据
+     *
+     **/
+    protected getSourceData(sourceName: string, methods: string, dataSourceType: string, params: any): Promise<any>;
+    protected setTitle({ isTitle, title, titleLocation }: {
+        isTitle: any;
+        title: any;
+        titleLocation?: string;
+    }): void;
+    protected setLegend({ isLegend, legend }: {
+        isLegend: any;
+        legend?: string;
+    }): void;
+    /**
+     * 设置 X轴数据
+     * @param { Array<object> } arrData 后台返回的数据
+     * @param { string } formatType 类型 datetime：日期时间;date:日期，time：时间，其它
+     */
+    protected setXaxis(sortedXAxisData: any, formatType: any): any[];
+    protected sortXAxisData(arrData: any, formatType?: string): Array<any>;
+    /**
+     * 时间轴格式化为日期，时间，日期时间
+     * @param { number } time 时间戳
+     * @param { string } timeType 需要格式化的类型 dt：日期时间，d：日期，t：时间
+     * @returns { string } 格式化结果
+     */
+    private formatTime;
+    /**
+     * 当有分组字段时，该方法用于获取图表 series 里的 data值，自动补全没有的数据
+     * @param { array } arrXaxisData - 维度名 eg:['张三','李四','王二']
+     * @param { array } arrGroupValue - 所属当前分组的数据 eg:[{value:'统计值',name:'统计名',dimensionality:'维度名'}]
+     * @returns 返回补全的数组
+     **/
+    protected getSeriesDataGroup(arrXaxisData: any, arrGroupValue: any): any[];
+    private isInArray;
+    protected setIsXaxisAxisLabelShow({ isXaxisAxisLabelShow }: {
+        isXaxisAxisLabelShow: any;
+    }): void;
+    protected setIsXaxisName({ isXaxisName, xAxisName }: {
+        isXaxisName: any;
+        xAxisName: any;
+    }): void;
+    protected setIsXaxisAxisTickShow({ isXaxisAxisTickShow }: {
+        isXaxisAxisTickShow: any;
+    }): void;
+    protected setIsXaxisAxisLabelRotate({ isXaxisAxisLabelRotate, xStatistics, angle, }: {
+        isXaxisAxisLabelRotate: any;
+        xStatistics: any;
+        angle?: number;
+    }): void;
+    protected setIsYAxisSplitlineLinestyleWidth({ isYAxisSplitlineLinestyleWidth, yAxisSplitlineLinestyleType, }: {
+        isYAxisSplitlineLinestyleWidth: any;
+        yAxisSplitlineLinestyleType: any;
+    }): void;
+    protected setYAxisMaxMin({ yAxisMax, yAxisMin }: {
+        yAxisMax: any;
+        yAxisMin: any;
+    }): void;
+    protected setIsYAxisName({ isYAxisName, yAxisName }: {
+        isYAxisName: any;
+        yAxisName: any;
+    }): void;
+    protected setIsYAxisShow({ isYAxisShow }: {
+        isYAxisShow: any;
+    }): void;
+    /**
+     * 当为空值时，重写xAxis, 只处理单Y轴情况
+     * @param { array } arrXisCountEmptyIndex Y轴空值key记录
+     * @param { boolean } xIsCountEmpty 是否统计空值
+     */
+    protected setEmptyValue(xIsCountEmpty: any): void;
+    /**
+     * 删除数组里面不存在的键值
+     * @param { array }  arrXAxis 需要处理的数组
+     * @returns { array } 返回处理后的数组
+     **/
+    private removeEmpty;
+    /**
+     * 根据值 value,返回指定单位的数
+     * @param {number} value 原始值
+     * @param {string} unit 单位，'%'百分比，'‰'千分比, K千，W万，BW 百万，Y 亿，B 十亿
+     * @returns {object} 返回对象 {value:新值，postfix:'单位'}
+     **/
+    protected getValueByUnit(value: any, unit: any): number;
+}
+export default EchartBase;