@ebiz/designer-components 0.0.18-tj.1

package/src/components/charts/feature/expandLegend/singleSelectLegend/group.js

@@ -0,0 +1,116 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import { CSS_CLASS, SVG_ICON } from "./constants";
+import { svgTransform } from "../../../util/convert";
+
+// 计算每组内容所占内容是否超出父元素,并分组
+function group() {
+    let windowScrollX = window.scrollX;
+    let barLeft = this.scroll.getBoundingClientRect().left;
+    this.group = [];
+    let tempGroup = [];
+
+    // 分组，每组不会超过父元素宽度
+    this.item.forEach((item) => {
+
+        let pre = Math.floor((getOffsetLeft(item) - barLeft + windowScrollX) / this.scroll.clientWidth);
+        let cur = Math.floor((getOffsetLeft(item) - barLeft + windowScrollX + item.clientWidth) / this.scroll.clientWidth);
+        if (pre + 1 === cur) {
+            this.group.push([...tempGroup]);
+            tempGroup = [];
+            tempGroup.push(item);
+        } else {
+            tempGroup.push(item);
+        }
+    });
+    this.group.push([...tempGroup]);
+    let amendGroup = [];
+
+    // 实际替换后再判断一下是否展示全
+    for (let group of this.group) {
+        group.unshift(...amendGroup);
+        this.scroll.replaceChildren(...group);
+        amendGroup = [];
+        for (let i = group.length - 1; i > 0; i--) {
+            let item = group[i];
+            if (getOffsetLeft(item) - barLeft + window.scrollX + item.clientWidth > this.scroll.clientWidth) {
+                amendGroup.unshift(item);
+                group.pop();
+            } else {
+                break;
+            }
+        }
+    }
+
+    // 如果每组有超出的元素，则将元素往后面的组里加，并保证后面的组也能展示全
+    if (amendGroup.length > 0) {
+        do {
+            this.group.push([...amendGroup]);
+            amendGroup = [];
+            let group = this.group[this.group.length - 1];
+            this.scroll.replaceChildren(...group);
+            for (let i = group.length - 1; i > 0; i--) {
+                let item = group[i];
+                if (getOffsetLeft(item) - barLeft + window.scrollX + item.clientWidth > this.scroll.clientWidth) {
+                    amendGroup.unshift(item);
+                    group.pop();
+                } else {
+                    break;
+                }
+            }
+        } while (amendGroup.length !== 0);
+    }
+    this.group = this.group.filter((item) => item.length > 0);
+    this.scroll.replaceChildren(...this.item);
+
+    // 为第一组最前方加上空白盒子占位
+    if (this.group[0] !== undefined) {
+        let firstLastElement = this.group[0][this.group[0].length - 1];
+        const placeholder = document.createElement("div");
+        placeholder.style.minWidth =
+            this.scroll.clientWidth - (getOffsetLeft(firstLastElement) - barLeft + window.scrollX + firstLastElement.clientWidth) + "px";
+        placeholder.classList.add(CSS_CLASS.PLACEHOLDER);
+        if (!this.item.includes((item) => item.class === CSS_CLASS.PLACEHOLDER)) {
+            this.item.unshift(placeholder);
+        } else {
+            this.item[0] = placeholder;
+        }
+        this.group[0].unshift(placeholder);
+    }
+    this.scroll.replaceChildren(...this.item);
+    if(this.group.length>0){
+        let count = this.group[0].length-1
+        this.data.forEach((item,index)=>{
+            if(index<count){
+                item.display='none'
+            }else{
+                item.display='block'
+            }
+        })
+    }
+}
+
+/**
+ * 用于获取节点距离body的左边距
+ * @param {节点} element
+ * @returns
+ */
+function getOffsetLeft(element) {
+
+    // 获取元素的边界矩形
+    const rect = element.getBoundingClientRect();
+
+    // 计算元素相对于文档左边的偏移量
+    return rect.left + window.scrollX;
+}
+
+export default group;

package/src/components/charts/feature/expandLegend/singleSelectLegend/index.js

@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+// import paging from "./paging";
+import group from "./group";
+import more from "./more";
+import scroll from "./scroll";
+import throttle from "../../../util/throttle";
+const DEFAULT_OPTION = {
+    data: [],
+    onclick: () => {},
+};
+const THROTTLE_INTERVAL = 500;
+class SingleSelectLegend {
+    constructor(element) {
+
+        // 根节点
+        this.root = element;
+
+        // 所有的图例
+        this.item = [];
+
+        // 当前主题下的配色
+        this.color = [];
+
+        // 所有图例的分组情况
+        this.group = [];
+
+        // 当前所在页码，从0开始
+        this.current = 0;
+
+        // 当前的数据
+        this.data = [];
+
+        // 图例的点击事件
+        this.onclick = () => {};
+    }
+
+    setOption(option) {
+        option = option || DEFAULT_OPTION;
+        this.onclick = option.onclick;
+        this.itemStyle = option.itemStyle;
+        this.color = option.color;
+        this.onLegendClick = option.onLegendClick;
+        this.initData(option.data);
+        this.setResizeObserver();
+    }
+
+    // 组装数据
+    initData(data) {
+        this.data = [];
+        if (Array.isArray(data)) {
+            for (let i = 0; i < data.length; i++) {
+                this.data.push({
+                    name: data[i]["name"] === undefined ? data[i] : data[i]["name"],
+                    value: data[i]["value"] === undefined ? data[i] : data[i]["value"],
+                    selected: data[i]["selected"] === undefined ? true : data[i]["selected"],
+                    show: data[i]["show"] === undefined ? true : data[i]["show"],
+                    color: this.color.length === 0 ? "#000" : this.color[i % this.color.length],
+                });
+            }
+        }
+    }
+
+    // 创建整个图例滚动框
+    create() {
+        const scrollDom = scroll.call(this);
+        // const pagingDom = paging.call(this);
+        const moreDom = more.call(this);
+        this.root.append(scrollDom, moreDom);
+        group.call(this);
+    }
+
+    getData() {
+        return this.data;
+    }
+
+    // 响应式监听
+    setResizeObserver() {
+        this.resizeObserver = new ResizeObserver(() => {
+            throttle(THROTTLE_INTERVAL, () => {
+                this.root.innerHTML = "";
+                this.create();
+            })();
+        });
+        this.resizeObserver.observe(this.root);
+    }
+}
+export default SingleSelectLegend;

package/src/components/charts/feature/expandLegend/singleSelectLegend/item.js

@@ -0,0 +1,113 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import { CSS_CLASS ,SVG_ICON} from "./constants";
+import { uuid } from "../../../util/math";
+import { getTextWidth } from "../../../util/dom";
+import { svgTransform } from "../../../util/convert";
+// 图例的默认宽度
+const DEFAULT_WIDTH = "160px"
+
+// tips文字大小
+const TEXT_SIZE = 14;
+
+// 创建每个图例
+function item(data, index) {
+    // 创建整个图例的盒子
+    const item = document.createElement("div");
+    item.classList.add(CSS_CLASS.ITEM);
+    item.id = `${CSS_CLASS.ITEM}_${uuid()}`;
+    item.dataset.id = index;
+
+    // 创建图例文字前面的图标
+    const itemIcon = document.createElement("div");
+    itemIcon.classList.add(CSS_CLASS.ITEM_ICON)
+    itemIcon.style.backgroundColor = data.color;
+    if (this?.itemStyle?.icon === "line") {
+        itemIcon.classList.add(CSS_CLASS.ITEM_ICON_LINE);
+    } else {
+        itemIcon.classList.add(CSS_CLASS.ITEM_ICON_CIRCLE);
+    }
+
+    // 创建图例的文字
+    const itemText = document.createElement("span");
+    itemText.classList.add(CSS_CLASS.ITEM_TEXT);
+    itemText.innerText = data.name;
+    itemText.title = data.name;
+
+    // 如果设置了图例最大宽度就设置
+    if (this.itemStyle) {
+        this.itemStyle.maxTextWidth && (itemText.style.maxWidth = this.itemStyle.maxTextWidth)
+        if (this.itemStyle.showTips) {
+            let maxTextWidth = this.itemStyle.maxTextWidth || DEFAULT_WIDTH
+            maxTextWidth = maxTextWidth.split('px')[0] - 0
+
+            // 如果图例超出了最大宽度就增加hover触发的tips
+            if (getTextWidth(data.name, TEXT_SIZE) > maxTextWidth) {
+                let tips = new Tips(item);
+                tips.setOption({
+                    data: data.name,
+                    onclick: () => { },
+                });
+            }
+        }
+    }
+    const copy = document.createElement('img')
+    copy.classList.add('copy')
+    if(this?.itemStyle?.copy){
+        const svg1 = svgTransform(SVG_ICON.COPY1)
+        const svg2 = svgTransform(SVG_ICON.COPY2)
+        copy.src = svg1
+
+        copy.addEventListener('mouseover', (e) => {
+            e.stopPropagation()
+            copy.src = svg2
+        })
+        copy.addEventListener('mouseleave', (e) => {
+            e.stopPropagation()
+            copy.src = svg1
+        })
+        copy.addEventListener('click', async (e) => {
+            e.stopPropagation()
+            let clipboard = navigator.clipboard || {
+                writeText: (text) => {
+                    let copyInput = document.createElement('input');
+                    copyInput.value = text;
+                    document.body.appendChild(copyInput);
+                    copyInput.select();
+                    document.execCommand('copy');
+                    document.body.removeChild(copyInput);
+                }
+            }
+            if (clipboard) {
+                await clipboard.writeText(data.name);
+            }
+        })
+    }
+    item.append(itemIcon, itemText, copy);
+
+    // 图例是否未激活
+    if (data.show === false) {
+        itemIcon.classList.toggle(CSS_CLASS.ITEM_ICON_UNACTIVE);
+        itemText.classList.toggle(CSS_CLASS.ITEM_TEXT_UNACTIVE);
+    }
+
+    // 图例添加点击事件切换样式
+    item.addEventListener("click", (e) => {
+        e.stopPropagation();
+        data.show = !data.show
+        itemIcon.classList.toggle(CSS_CLASS.ITEM_ICON_UNACTIVE);
+        itemText.classList.toggle(CSS_CLASS.ITEM_TEXT_UNACTIVE);
+        this.onLegendClick && this.onLegendClick(this.data[index]);
+    });
+    return item;
+}
+export default item;

package/src/components/charts/feature/expandLegend/singleSelectLegend/more.js

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import SingleSelect from "../singleSelect";
+// import item from "./item";
+// import group from "./group";
+import { CSS_CLASS, SVG_ICON } from "./constants";
+import { uuid } from "../../../util/math";
+import { svgTransform } from "../../../util/convert";
+
+// 创建更多按钮
+function more() {
+    const more = document.createElement("div");
+    const moreIcon = document.createElement("img");
+    more.id = `more-${uuid()}`;
+    moreIcon.src = svgTransform(SVG_ICON.EVEN_MORE);
+    more.classList.add(CSS_CLASS.MORE);
+    more.appendChild(moreIcon);
+    let dropdown = new SingleSelect(more);
+    dropdown.setOption({
+        data: this.data,
+        color: this.color,
+        itemStyle:this.itemStyle,
+        // 点击触发的事件
+        onclick: (data) => {
+            this.onclick(data);
+        },
+    });
+    return more;
+}
+
+export default more;

package/src/components/charts/feature/expandLegend/singleSelectLegend/scroll.js

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import item from "./item";
+import { CSS_CLASS } from "./constants";
+
+// 创建图例框
+function scroll() {
+    const scrollDom = document.createElement("div");
+    scrollDom.classList.add(CSS_CLASS.SCROLL);
+    this.item = [];
+    
+    // 根据数据循环创造图例
+    this.data.forEach((element, index) => {
+        if (element.selected) {
+            let itemDom = item.call(this, element, index);
+            this.item.push(itemDom);
+            scrollDom.append(itemDom);
+        }
+    });
+    this.scroll = scrollDom;
+    return scrollDom;
+}
+
+export default scroll;

package/src/components/charts/feature/expandLegend/tips/constants.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+export const CSS_CLASS = {
+    TIPS: "hui_expand_legend_tips",
+    TIPS_ACTIVE: "hui_expand_legend_tips_active",
+    TIPS_ARROW: "hui_expand_legend_tips_arrow",
+    TIPS_HIDDEN: "hui_expand_legend_tips_hidden",
+};
+
+export const SVG_ICON = {
+    INDICATOR_TRIANGLE: `<svg width="18.000000" height="9.633667" viewBox="0 0 18 9.63367" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><desc>Created with Pixso.</desc><defs/><path id="指示三角" d="M7.4 8.81L3.79 3.83C3.41 3.32 2.82 3.01 2.18 3.01L0 3L0 0L18 0L18 3L16 3C15.37 3 14.77 3.29 14.4 3.79L10.62 8.83C9.81 9.91 8.19 9.89 7.4 8.81Z" fill="#FFFFFF" fill-opacity="1.000000" fill-rule="evenodd"/></svg>`,
+};

package/src/components/charts/feature/expandLegend/tips/index.js

@@ -0,0 +1,168 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import { svgTransform } from "../../../util/convert";
+import { CSS_CLASS, SVG_ICON } from "./constants";
+
+const DEFAULTOPTION = {
+    data: `默认文本`,
+    onclick: () => {},
+};
+
+// 隐藏tips的延时
+const HIDE_DURATION = 200;
+
+// 销毁tips的延时
+const DESTROY_DELAY = 300;
+
+class Tips {
+    static huicharts_tips = false;
+
+    constructor(element) {
+        this.data = null;
+        this.option = null;
+        this.root = element;
+        this.timer = null;
+        this.tips = null;
+        if (!Tips.huicharts_tips) {
+            Tips.huicharts_tips = true;
+            document.addEventListener("wheel", Tips.destoryImmediately);
+        }
+    }
+
+    setOption(option) {
+        this.option = option || DEFAULTOPTION;
+        this.create();
+    }
+
+    create() {
+        this.data = this.option.data;
+        this.root.addEventListener("mouseenter", (e) => {
+            this.clearTimer();
+            document.querySelectorAll(`.${CSS_CLASS.TIPS}.${CSS_CLASS.TIPS_ACTIVE}`).forEach((item) => {
+                if (item !== this.tips) {
+                    document.body.contains(item) && document.body.removeChild(item);
+                    item = null;
+                }
+            });
+            let tipsExist = !document.body.contains(this.tips);
+            if (tipsExist) {
+                this.tips = this.createTips();
+                this.tips.addEventListener("mouseenter", (e) => {
+                    this.clearTimer();
+                });
+                this.tips.addEventListener("mouseleave", (e) => {
+                    this.clearAndSetTimer();
+                });
+                this.setPosition(this.tips);
+            }
+        });
+        this.root.addEventListener("mouseleave", (e) => {
+            this.clearAndSetTimer();
+        });
+    }
+
+    createTips() {
+        let tips = document.createElement("div");
+        tips.innerHTML = this.data;
+        tips.classList.add(CSS_CLASS.TIPS, CSS_CLASS.TIPS_ACTIVE);
+        const arrow = document.createElement("img");
+        arrow.src = svgTransform(SVG_ICON.INDICATOR_TRIANGLE);
+        arrow.classList.add(CSS_CLASS.TIPS_ARROW);
+        tips.append(arrow);
+        tips.dataset.id = this.root.id;
+        document.body.appendChild(tips);
+        return tips;
+    }
+
+    setPosition(element) {
+
+        // 父元素的位置
+        const distance = this.root.getBoundingClientRect();
+        const arrow = element.firstElementChild;
+
+        // tips下方小三角的宽度
+        const ARROW_WIDTH = 18;
+
+        // tips下方小三角距离tips合适的高度
+        const ARROW_MARGIN_TOP = 3;
+
+        // tips下方小三角距离tips合适的高度
+        const ARROW_REVERSE = -7;
+        let deltaX = 0;
+        let deltaY = 30;
+        let arrowLeftPosition;
+        let arrowTopPosition;
+        let arrowTransform = "";
+        deltaX = (element.clientWidth - distance.width) / 2;
+        arrowTopPosition = element.clientHeight - ARROW_MARGIN_TOP;
+        arrowLeftPosition = (element.clientWidth - ARROW_WIDTH) / 2;
+        let topPosition = distance.top - distance.height - deltaY;
+        let leftPosition = distance.left + distance.width - element.clientWidth + deltaX;
+
+        if (leftPosition <= 0) {
+            leftPosition = distance.left;
+        }
+        if (topPosition + element.clientHeight > window.innerHeight) {
+            topPosition = distance.top - element.clientHeight;
+        }
+
+        // 如果tips在文字上方展示不了，就在文字下面展示
+        if (topPosition < 0) {
+            topPosition = distance.bottom;
+            arrowTopPosition = ARROW_REVERSE;
+            arrowTransform = "rotate(180deg)";
+            arrowLeftPosition = (element.clientWidth - ARROW_WIDTH) / 2;
+        }
+        element.style.left = leftPosition + "px";
+        element.style.top = topPosition + "px";
+        arrow.style.left = arrowLeftPosition + "px";
+        arrow.style.top = arrowTopPosition + "px";
+        arrow.style.transform = arrowTransform;
+    }
+
+    clearTimer() {
+        if (this.timer) {
+            clearTimeout(this.timer);
+            this.timer = null;
+        }
+    }
+
+    clearAndSetTimer() {
+        this.clearTimer();
+        this.timer = setTimeout(() => {
+            if (this.tips) {
+                this.tips.classList.remove(CSS_CLASS.TIPS_ACTIVE);
+                this.tips.classList.add(CSS_CLASS.TIPS_HIDDEN);
+                this.timer = null;
+                setTimeout(() => {
+                    if (this.tips && document.body.contains(this.tips)) {
+                        document.body.removeChild(this.tips);
+                        this.tips = null;
+                    }
+                }, DESTROY_DELAY);
+            }
+        }, HIDE_DURATION);
+    }
+
+    getData() {
+        return this.data;
+    }
+
+    // 用于隐藏所有的tips
+    static destoryImmediately() {
+        document.querySelectorAll(`.${CSS_CLASS.TIPS}.${CSS_CLASS.TIPS_ACTIVE}`).forEach((item) => {
+            document.body.contains(item) && document.body.removeChild(item);
+            item = null;
+        });
+    }
+}
+export default Tips;

package/src/components/charts/feature/fluctuation/index.js

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import { isArray } from '../../util/type';
+
+// 获取新的数据格式
+const transformData = (origindata) => {
+  const newData = {}
+  const count = Object.keys(origindata[0]).length
+  for (let i = 1; i < count; i++) {
+    let arr = [];
+    origindata.forEach((key) => {
+      let firstKey = Object.keys(key)[i];
+      var firstValue = key[firstKey];
+      arr.push(firstValue);
+      newData[firstKey] = arr;
+    });
+  }
+  return newData;
+};
+
+// 修改轴数据 data：图表数据 allowRange：允许轴的范围
+const fluctuation = (data, allowRange) => {
+  let min = Infinity;
+  let max = -Infinity;
+  const range = allowRange || [-Infinity, Infinity];
+  const dataKeys = Object.keys(data);
+
+  dataKeys.forEach((key) => {
+    data[key].forEach((item) => {
+      if (isArray(item)) {
+        const arr = item.filter((t) => !isNaN(Number(t)) && Number(t) > range[0] && Number(t) < range[1]);
+        const curMin = Math.min(...arr);
+        const curMax = Math.max(...arr);
+        min = Math.min(min, curMin);
+        max = Math.max(max, curMax);
+      } else {
+        const num = Number(item);
+        if (num < range[0] || num > range[1]) {
+          return;
+        }
+        min = Math.min(min, num);
+        max = Math.max(max, num);
+      }
+    });
+  });
+
+  let axisMin = Math.floor(min - ((max - min) / 5) * 4);
+  if (min > 0 && axisMin < 0) {
+    axisMin = 0;
+  }
+  const axisMax = Math.ceil(max + (max - min) / 5);
+  return [axisMin, axisMax];
+};
+
+export default fluctuation;
+export { transformData };