@ebiz/designer-components 0.0.18-tj.1

package/src/components/charts/feature/expandLegend/mutiSelectLegend/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 MutiSelectLegend {
+    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, pagingDom, 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 MutiSelectLegend;

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

@@ -0,0 +1,115 @@
+/**
+ * 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/mutiSelectLegend/more.js

@@ -0,0 +1,101 @@
+/**
+ * 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 MutiSelect from "../mutiSelect";
+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 MutiSelect(more);
+    dropdown.setOption({
+        data: this.data,
+        itemStyle:this.itemStyle,
+        // 点击触发的事件
+        onclick: (index) => {
+
+            this.paging.style.opacity = 1;
+            this.paging.style.zIndex = 1;
+            this.data.forEach((item) => (item.show = true));
+
+            // 如果多选框中某个选项被激活
+            if (this.data[index].selected) {
+
+                // 创建对应的图例
+                let itemDom = item.call(this, this.data[index], index);
+                this.item.push(itemDom);
+
+                // 将图例进行排序
+                this.item.sort((item1, item2) => {
+                    return item1.dataset.id - item2.dataset.id;
+                });
+            } else {
+
+                // 如果条目被取消
+                this.item = [...this.item.filter((item) => item.dataset.id != index)];
+            }
+
+            // 先去掉之前加的空白占位
+            this.item = [...this.item.filter((item) => !item.classList.contains(CSS_CLASS.PLACEHOLDER))];
+
+            // 重置其他图例的状态
+            this.item.forEach((item, cur) => {
+                if (cur !== index) {
+                    removeUnactiveState(item);
+                }
+            });
+
+            // 替换目前选择的图例dom
+            this.scroll.replaceChildren(...this.item);
+
+            // 对它们分组
+            group.call(this);
+            this.current = 0;
+
+            // 分页按钮状态判断
+            this.pagingText.innerText = `${this.current + 1}/${this.group.length > 0 ? this.group.length : 1}`;
+            this.pagingLeftIcon.src = svgTransform(SVG_ICON.LEFT_ARROW);
+            this.pagingLeftIcon.classList.remove(CSS_CLASS.PAGING_ICON_ROTATE);
+            if (this.current + 1 === this.group.length || this.group.length === 0) {
+                this.pagingRightIcon.src = svgTransform(SVG_ICON.LEFT_ARROW);
+                this.pagingRightIcon.classList.add(CSS_CLASS.PAGING_ICON_ROTATE);
+            } else {
+                this.pagingRightIcon.src = svgTransform(SVG_ICON.RIGHT_ARROW);
+                this.pagingRightIcon.classList.remove(CSS_CLASS.PAGING_ICON_ROTATE);
+            }
+            this.onclick(this.data[index], this.data);
+        },
+    });
+    return more;
+}
+
+// 重置其他图例的状态
+function removeUnactiveState(item) {
+    let icon = item.querySelector(`.${CSS_CLASS.ITEM_ICON}`);
+    let text = item.querySelector(`.${CSS_CLASS.ITEM_TEXT}`);
+    if (icon) {
+        icon.classList.remove(CSS_CLASS.ITEM_ICON_UNACTIVE);
+    }
+    if (text) {
+        text.classList.remove(CSS_CLASS.ITEM_TEXT_UNACTIVE);
+    }
+}
+
+export default more;

package/src/components/charts/feature/expandLegend/mutiSelectLegend/paging.js

@@ -0,0 +1,103 @@
+/**
+ * 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 createPaging() {
+
+    // 默认初始位置
+    this.current = 0;
+
+    // 创建paing
+    const paging = document.createElement("div");
+    paging.classList.add(CSS_CLASS.PAGING);
+
+    // paing中间的文字
+    const pagingText = document.createElement("span");
+    pagingText.classList.add(CSS_CLASS.PAGING_TEXT);
+    pagingText.innerText = `1/2`;
+
+    // paging左右按钮的盒子
+    const pagingLeft = document.createElement("div");
+    const pagingRight = document.createElement("div");
+    pagingLeft.classList.add(CSS_CLASS.PAGING_LEFT);
+    pagingRight.classList.add(CSS_CLASS.PAGING_RIGHT);
+
+    // paing的左右按钮
+    const pagingLeftIcon = document.createElement("img");
+    const pagingRightIcon = document.createElement("img");
+    pagingLeftIcon.src = svgTransform(SVG_ICON.LEFT_ARROW);
+    pagingRightIcon.src = svgTransform(SVG_ICON.RIGHT_ARROW);
+    pagingLeftIcon.classList.add(CSS_CLASS.PAGING_ICON);
+    pagingRightIcon.classList.add(CSS_CLASS.PAGING_ICON);
+    pagingLeft.append(pagingLeftIcon);
+    pagingRight.append(pagingRightIcon);
+
+    // paing左按钮点击事件
+    pagingLeft.addEventListener("click", (e) => {
+        e.stopPropagation();
+        if (this.current >= 1) {
+            this.current--;
+
+            // 展示当前分组页的图例
+            this.group[this.current][this.group[this.current].length - 1].scrollIntoView({
+                behavior: "smooth",
+                block: "nearest",
+                inline: "end",
+            });
+            pagingText.innerText = `${this.current + 1}/${this.group.length}`;
+
+            // 左按钮是否置灰
+            if (this.current === 0) {
+                pagingLeftIcon.src = svgTransform(SVG_ICON.LEFT_ARROW);
+                pagingLeftIcon.classList.remove(CSS_CLASS.PAGING_ICON_ROTATE);
+            }
+            pagingRightIcon.src = svgTransform(SVG_ICON.RIGHT_ARROW);
+            pagingRightIcon.classList.remove(CSS_CLASS.PAGING_ICON_ROTATE);
+        }
+    });
+
+    // paing右按钮点击事件
+    pagingRight.addEventListener("click", (e) => {
+        e.stopPropagation();
+        if (this.current < this.group.length - 1) {
+            this.current++;
+
+            // 展示当前分组页的图例
+            this.group[this.current][this.group[this.current].length - 1].scrollIntoView({
+                behavior: "smooth",
+                block: "nearest",
+                inline: "end",
+            });
+            pagingText.innerText = `${this.current + 1}/${this.group.length}`;
+
+            // 右按钮是否置灰
+            if (this.current + 1 === this.group.length) {
+                pagingRightIcon.src = svgTransform(SVG_ICON.LEFT_ARROW);
+                pagingRightIcon.classList.add(CSS_CLASS.PAGING_ICON_ROTATE);
+            }
+            pagingLeftIcon.src = svgTransform(SVG_ICON.RIGHT_ARROW);
+            pagingLeftIcon.classList.add(CSS_CLASS.PAGING_ICON_ROTATE);
+        }
+    });
+
+    // 插入paign的dom
+    paging.append(pagingLeft, pagingText, pagingRight);
+    this.paging = paging;
+    this.pagingText = pagingText;
+    this.pagingLeftIcon = pagingLeftIcon;
+    this.pagingRightIcon = pagingRightIcon;
+    return paging;
+}
+
+export default createPaging;

package/src/components/charts/feature/expandLegend/mutiSelectLegend/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/mutiSelectList/constants.js

@@ -0,0 +1,34 @@
+/**
+ * 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 = {
+    LIST: "hui_expand_legend_list",
+    ITEM: "hui_expand_legend_list_item",
+    ICON_LINE: "hui_expand_legend_list_item_icon_line",
+    ICON_CIRCLE: "hui_expand_legend_list_item_icon_circle",
+    ITEM_TEXT: "hui_expand_legend_list_item_text",
+    ITEM_COPY:"hui_expand_legend_list_item_copy",
+    ICON_UNACTIVE: "hui_expand_legend_list_item_icon_unactive",
+    ITEM_UNACTIVE: "hui_expand_legend_list_item_unactive",
+    TABLE:"hui_expand_legend_table",
+    HEAD:"hui_expand_legend_table_head",
+    TABLE_ITEM:"hui_expand_legend_table_item",
+    OTHER_TABLE_ITEM:"hui_expand_legend_table_other_item"
+};
+
+export const SVG_ICON = {
+    COPY1:`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path fill="#808080" d="m14.25,6c2.07,0,3.75,1.68,3.75,3.75v9c0,2.07-1.68,3.75-3.75,3.75H5.25c-2.07,0-3.75-1.68-3.75-3.75v-9c0-2.07,1.68-3.75,3.75-3.75h9Zm0,1.5H5.25c-1.24,0-2.25,1.01-2.25,2.25v9c0,1.24,1.01,2.25,2.25,2.25h9c1.24,0,2.25-1.01,2.25-2.25v-9c0-1.24-1.01-2.25-2.25-2.25Zm4.5-5.99c2.07,0,3.75,1.68,3.75,3.75v7.5c0,.41-.34.75-.75.75s-.75-.34-.75-.75v-7.5c0-1.24-1.01-2.25-2.25-2.25h-7.5c-.41,0-.75-.34-.75-.75s.34-.75.75-.75h7.5Z"></path>
+  </svg>`,
+    COPY2:`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path fill="#000000" d="m14.25,6c2.07,0,3.75,1.68,3.75,3.75v9c0,2.07-1.68,3.75-3.75,3.75H5.25c-2.07,0-3.75-1.68-3.75-3.75v-9c0-2.07,1.68-3.75,3.75-3.75h9Zm0,1.5H5.25c-1.24,0-2.25,1.01-2.25,2.25v9c0,1.24,1.01,2.25,2.25,2.25h9c1.24,0,2.25-1.01,2.25-2.25v-9c0-1.24-1.01-2.25-2.25-2.25Zm4.5-5.99c2.07,0,3.75,1.68,3.75,3.75v7.5c0,.41-.34.75-.75.75s-.75-.34-.75-.75v-7.5c0-1.24-1.01-2.25-2.25-2.25h-7.5c-.41,0-.75-.34-.75-.75s.34-.75.75-.75h7.5Z"></path>
+  </svg>`,
+};

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

@@ -0,0 +1,181 @@
+/**
+ * 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 Tips from "../tips";
+import { CSS_CLASS,SVG_ICON } from "./constants";
+import { uuid } from "../../../util/math";
+import throttle from "../../../util/throttle";
+import { getTextWidth } from "../../../util/dom";
+import statisticsList from "./statisticList";
+import { svgTransform } from "../../../util/convert";
+
+// 节流间隔
+const THROTTLE_INTERVAL = 500;
+
+// tips文字大小
+const TEXT_SIZE = 14;
+
+const DEFAULT_OPTION = {
+    data: [],
+    onclick: () => {},
+    style: {
+        sign: "circle",
+    },
+};
+class MutiSelectList {
+    constructor(root) {
+
+        // 根元素
+        this.root = root;
+
+        // 数据
+        this.data = null;
+    }
+
+    setOption(option) {
+        option = option || DEFAULT_OPTION;
+
+        // 主题颜色
+        this.color = option.color;
+
+        // 整个图例占父元素的高度
+        this.height = option.height;
+
+        // 图例的点击事件
+        this.onclick = option.onclick
+
+        // 图例的一些样式
+        this.itemStyle = option.itemStyle;
+
+        this.statistics = option.statistics
+        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"],
+                    color: this.color.length === 0 ? "#000" : this.color[i % this.color.length],
+                });
+            }
+        }
+    }
+
+    // 创建列表
+    create(onclick) {
+        let list = document.createElement("div");
+        list.classList.add(CSS_CLASS.LIST);
+        list.style.height = this.height;
+        if(this.statistics){
+            list.style.display = "flex"
+            list.style.alignItems="center"
+            list.append(statisticsList.call(this))
+        }
+        else{
+            let maxWidth = this.root.getBoundingClientRect().width
+            this.data.forEach((data, index) => {
+                let item = document.createElement("div");
+                item.id = `${CSS_CLASS.ITEM}_${uuid()}`;
+                item.classList.add(CSS_CLASS.ITEM);
+                let icon = document.createElement("div");
+    
+                // icon是展示为线还是小圆点
+                if (this?.itemStyle?.icon === "line") {
+                    icon.classList.add(CSS_CLASS.ICON_LINE);
+                } else {
+                    icon.classList.add(CSS_CLASS.ICON_CIRCLE);
+                }
+                icon.style.background = data.color;
+                let text = document.createElement("span");
+                text.innerText = data.name;
+                text.classList.add(CSS_CLASS.ITEM_TEXT);
+
+                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);
+                        }
+                    })
+                }
+                // 是否要展示tips
+                if (this?.itemStyle?.showTips) {
+                    if (getTextWidth(data.name, TEXT_SIZE) > maxWidth) {
+                        let tips = new Tips(item);
+                        tips.setOption({
+                            data: data.name,
+                            onclick: () => {},
+                        });
+                    }
+                }
+                item.append(icon, text, copy);
+    
+                // 每个图例的点击事件
+                item.addEventListener("click", (e) => {
+                    e.stopPropagation();
+                    icon.classList.toggle(CSS_CLASS.ICON_UNACTIVE);
+                    text.classList.toggle(CSS_CLASS.ITEM_UNACTIVE);
+                    onclick && onclick(this.data[index]);
+                });
+                list.append(item);
+            });
+        }
+       
+        // 列表滚动时立刻销毁所有tips
+        list.addEventListener("scroll", (e) => {
+            e.stopPropagation();
+            Tips.destoryImmediately();
+        });
+        this.root.append(list);
+    }
+
+    // 响应式监听
+    setResizeObserver() {
+        this.resizeObserver = new ResizeObserver(() => {
+            throttle(THROTTLE_INTERVAL, () => {
+                this.root.innerHTML = "";
+                this.create(this.onclick);
+            })();
+        });
+        this.resizeObserver.observe(this.root);
+    }
+}
+
+export default MutiSelectList;