@ebiz/designer-components 0.0.18-tj.1

package/src/components/charts/feature/expandLegend/mutiSelect/constants.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.
+ *
+ */
+export const CSS_CLASS = {
+    MUTISELECT: "hui_expand_legend_mutiselect",
+    MUTISELECT_ACTIVE: "hui_expand_legend_mutiselect_active",
+    MUTISELECT_HIDDEN: "hui_expand_legend_mutiselect_hidden",
+    ITEM: "hui_expand_legend_mutiselect_item",
+    ITEM_NAME: "hui_expand_legend_mutiselect_item_name",
+    CONTAINER: "hui_expand_legend_mutiselect_container",
+    CONTAINER_EMPTY: "hui_expand_legend_mutiselect_container_empty",
+    CONTAINER_EMPTY_TEXT: "hui_expand_legend_mutiselect_container_empty_text",
+    CHECKBOX: "hui_expand_legend_mutiselect_item_checkbox",
+    CHECKBOX_ICON: "hui_expand_legend_mutiselect_item_checkbox_icon",
+    SEARCH: "hui_expand_legend_mutiselect_search",
+    SEARCH_ICON: "hui_expand_legend_mutiselect_search_icon",
+    SEARCH_INPUT: "hui_expand_legend_mutiselect_search_input",
+    ITEM_ICON_CIRCLE:"hui_expand_legend_singleselect_item_icon_circle",
+    ITEM_ICON_LINE:"hui_expand_legend_singleselect_item_icon_line",
+};
+
+export const SVG_ICON = {
+    SEARCH: `<svg width="12.623047" height="12.557617" viewBox="0 0 12.623 12.5576" 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="矢量 8" d="M0 5.5C0 2.46 2.46 0 5.5 0C8.53 0 11 2.46 11 5.5C11 6.83 10.52 8.05 9.74 9L12.47 11.7C12.67 11.89 12.67 12.21 12.47 12.4C12.3 12.58 12.03 12.6 11.84 12.47L9.03 9.71C8.08 10.51 6.84 11 5.5 11C2.46 11 0 8.53 0 5.5ZM10 5.5C10 3.01 7.98 1 5.5 1C3.01 1 1 3.01 1 5.5C1 7.98 3.01 10 5.5 10C7.98 10 10 7.98 10 5.5Z" fill="#808080" fill-opacity="1.000000" fill-rule="evenodd"/></svg>`,
+    EMPTY: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40" viewBox="0 0 48 48" version="1.1"><title>ic_ict_empty_data_border</title><g id="ic_ict_empty_data_border" stroke="none" stroke-width="2.4" fill="none" fill-rule="evenodd"><path d="M1.5054679,23.9816777 C1.5054679,20.4665945 1.49316512,16.9515113 1.5054679,13.4364281 C1.49839598,11.7354825 1.70745964,10.0405302 2.1276372,8.39228371 C3.04858836,4.90356362 5.32108808,2.83317961 8.80629066,2.0299831 C10.5538164,1.65241445 12.3387234,1.4755157 14.1263654,1.50272062 C20.8671186,1.50272062 27.6084577,1.50272062 34.3503826,1.50272062 C36.0530469,1.49215117 37.7507765,1.68688567 39.4068263,2.08270935 C42.9974813,2.96148015 45.1522258,5.23573899 45.9729972,8.81409369 C46.3419987,10.5052846 46.5182902,12.2328244 46.4985018,13.9636906 C46.4985018,20.7770935 46.4985018,27.5910823 46.4985018,34.405657 C46.5077071,36.0919093 46.3135624,37.7731207 45.920271,39.412893 C45.0415008,43.0053081 42.7566983,45.1495088 39.1783461,45.9702807 C37.4305962,46.3464204 35.6458526,46.5233029 33.8582713,46.4975432 C27.1456387,46.4975432 20.433592,46.4975432 13.7221311,46.4975432 C12.0064517,46.5115465 10.2952822,46.3197774 8.62526401,45.9263422 C5.01879113,45.0475714 2.85350138,42.7627673 2.03448756,39.1668372 C1.61619295,37.3389939 1.5054679,35.505878 1.5054679,33.6569443 C1.5054679,30.4324413 1.5054679,27.2073524 1.5054679,23.9816777 Z" id="path1" stroke-opacity="0" stroke="#FFFFFF" stroke-width="2.4" fill-opacity="0" fill="#FFFFFF" fill-rule="nonzero"></path><path d="M1.5054679,23.9816777 C1.5054679,20.4665945 1.49316512,16.9515113 1.5054679,13.4364281 C1.49839598,11.7354825 1.70745964,10.0405302 2.1276372,8.39228371 C3.04858836,4.90356362 5.32108808,2.83317961 8.80629066,2.0299831 C10.5538164,1.65241445 12.3387234,1.4755157 14.1263654,1.50272062 C20.8671186,1.50272062 27.6084577,1.50272062 34.3503826,1.50272062 C36.0530469,1.49215117 37.7507765,1.68688567 39.4068263,2.08270935 C42.9974813,2.96148015 45.1522258,5.23573899 45.9729972,8.81409369 C46.3419987,10.5052846 46.5182902,12.2328244 46.4985018,13.9636906 C46.4985018,20.7770935 46.4985018,27.5910823 46.4985018,34.405657 C46.5077071,36.0919093 46.3135624,37.7731207 45.920271,39.412893 C45.0415008,43.0053081 42.7566983,45.1495088 39.1783461,45.9702807 C37.4305962,46.3464204 35.6458526,46.5233029 33.8582713,46.4975432 C27.1456387,46.4975432 20.433592,46.4975432 13.7221311,46.4975432 C12.0064517,46.5115465 10.2952822,46.3197774 8.62526401,45.9263422 C5.01879113,45.0475714 2.85350138,42.7627673 2.03448756,39.1668372 C1.61619295,37.3389939 1.5054679,35.505878 1.5054679,33.6569443 C1.5054679,30.4324413 1.5054679,27.2073524 1.5054679,23.9816777 Z" id="path2" stroke-opacity="0" stroke="#FFFFFF" stroke-width="2.4" opacity="0.200000003" fill-rule="nonzero"></path><circle id="path3" fill-opacity="0" fill="#FFFFFF" cx="24" cy="24" r="24"></circle><path d="M3,30 L7.01381397,19.5640837 C7.60795557,18.0193155 9.09210941,17 10.7471964,17 L37.2528036,17 C38.9078906,17 40.3920444,18.0193155 40.986186,19.5640837 L43.4631774,26.0042613 L43.4631774,26.0042613" id="path4" stroke="#191919" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M37.7528036,16.5 C39.6147765,16.5 41.2844495,17.64673 41.9528588,19.3845941 L44.4298502,25.8247718 C44.5289796,26.0825081 44.4004032,26.3718048 44.142667,26.4709341 C43.8849307,26.5700635 43.595634,26.4414871 43.4965046,26.1837509 L41.0195132,19.7435732 C40.4996393,18.3919011 39.2010047,17.5 37.7528036,17.5 L11.2471964,17.5 C9.79899528,17.5 8.50036067,18.3919011 7.98048677,19.7435732 L3.9666728,30.1794895 C3.86754347,30.4372258 3.57824673,30.5658021 3.32051046,30.4666728 C3.06277419,30.3675435 2.93419786,30.0782467 3.0333272,29.8205105 L7.04714117,19.3845941 C7.71555047,17.64673 9.38522354,16.5 11.2471964,16.5 L37.7528036,16.5 Z" id="path5" stroke-opacity="0" stroke="#FFFFFF" stroke-width="2.4" fill-opacity="0" fill="#FFFFFF" fill-rule="nonzero" stroke-linejoin="round"></path><path d="M45,30 L45,39 C45,42.3137085 42.3137085,45 39,45 L9,45 C5.6862915,45 3,42.3137085 3,39 L3,30 L18.3414086,29.9999922 C19.1650792,32.330381 21.3875594,34 24,34 C26.6124406,34 28.8349208,32.330381 29.6585914,29.9999922 L45,30 Z" id="path6" stroke="#191919" stroke-width="2.4" fill-opacity="0" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round"></path><path d="M24,4 L24,11 M8.52512627,7.02512627 L13.4748737,11.9748737 M34.5251263,11.9748737 L39.4748737,7.02512627" id="path7" stroke="#191919" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8.17157288,6.67157288 C8.36683502,6.47631073 8.68341751,6.47631073 8.87867966,6.67157288 L13.8284271,11.6213203 C14.0236893,11.8165825 14.0236893,12.133165 13.8284271,12.3284271 C13.633165,12.5236893 13.3165825,12.5236893 13.1213203,12.3284271 L8.17157288,7.37867966 C7.97631073,7.18341751 7.97631073,6.86683502 8.17157288,6.67157288 Z M39.1213203,6.67157288 C39.3165825,6.47631073 39.633165,6.47631073 39.8284271,6.67157288 C40.0236893,6.86683502 40.0236893,7.18341751 39.8284271,7.37867966 L34.8786797,12.3284271 C34.6834175,12.5236893 34.366835,12.5236893 34.1715729,12.3284271 C33.9763107,12.133165 33.9763107,11.8165825 34.1715729,11.6213203 L39.1213203,6.67157288 Z M24,3.5 C24.2761424,3.5 24.5,3.72385763 24.5,4 L24.5,11 C24.5,11.2761424 24.2761424,11.5 24,11.5 C23.7238576,11.5 23.5,11.2761424 23.5,11 L23.5,4 C23.5,3.72385763 23.7238576,3.5 24,3.5 Z" id="path8" stroke-opacity="0" stroke="#FFFFFF" stroke-width="2.4" fill-opacity="0" fill="#FFFFFF" fill-rule="nonzero" stroke-linejoin="round"></path></g></svg>`,
+    TICK: `<svg width="18.000000" height="16.000000" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter id="filter_1364_66812_dd" x="0.000000" y="0.000000" width="18.000000" height="16.000000" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dx="0" dy="0"/><feGaussianBlur stdDeviation="1.33333"/><feComposite in2="hardAlpha" operator="out" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect_dropShadow_1"/><feBlend mode="normal" in="SourceGraphic" in2="effect_dropShadow_1" result="shape"/></filter></defs><g filter="url(#filter_1364_66812_dd)"><path id="Path" d="M12.57 4.29C12.85 3.94 13.36 3.9 13.7 4.18C14.05 4.47 14.09 4.98 13.81 5.32L8.58 11.7C8.28 12.07 7.74 12.1 7.4 11.76L4.24 8.66C3.92 8.34 3.91 7.83 4.22 7.51C4.53 7.19 5.04 7.18 5.36 7.5L7.9 9.99L12.57 4.29Z" fill="#FFFFFF" fill-opacity="1.000000" fill-rule="evenodd"/></g></svg>`,
+    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/mutiSelect/index.js

@@ -0,0 +1,157 @@
+/**
+ * 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 } from "./constants";
+import search from "./search";
+import { item as createItem } from "./item";
+import position from "./position";
+const DEFAULT_OPTION = {
+    data: [1, 2, 3, 4, 5],
+    onclick: () => {},
+};
+const REMOVE_DELAY = 300;
+
+class MutiSelect {
+    static huicharts_mutiselect = false;
+
+    constructor(element) {
+        this.color = [];
+        this.root = element;
+        if (!MutiSelect.huicharts_mutiselect) {
+            MutiSelect.huicharts_mutiselect = true;
+            document.addEventListener("click", hide);
+            document.addEventListener("wheel", hide);
+            window.addEventListener("resize", hide);
+        }
+    }
+
+    setOption(option) {
+        option = option || DEFAULT_OPTION;
+        let { data, onclick } = option;
+        if(option.color)
+        this.color = option.color;
+        this.itemStyle = option?.itemStyle;
+        // 包装一下data
+        this.data=option.data
+        // 给根元素绑定点击事件
+        this.bindClick(onclick);
+    }
+
+    // 给根元素绑定点击事件
+    bindClick(onclick) {
+        this.root.addEventListener("click", (e) => {
+            e.stopPropagation();
+            let preMutiselect = document.querySelector(`.${CSS_CLASS.MUTISELECT}.${CSS_CLASS.MUTISELECT_ACTIVE}`);
+            let preMutiselectId = null;
+            if (preMutiselect !== null) {
+                preMutiselectId = preMutiselect.dataset.id;
+                preMutiselect.classList.remove(CSS_CLASS.MUTISELECT_ACTIVE);
+                preMutiselect.classList.add(CSS_CLASS.MUTISELECT_HIDDEN);
+                setTimeout(() => {
+                    document.body.removeChild(preMutiselect);
+                }, REMOVE_DELAY);
+            }
+            if (preMutiselectId !== this.root.id) {
+                const mutiselect = this.mutiselect(onclick);
+                document.body.appendChild(mutiselect);
+                position.call(this, mutiselect);
+            }
+        });
+    }
+
+    // 创建下拉框dom
+    mutiselect(onclick) {
+        const mutiselectDom = document.createElement("div");
+        mutiselectDom.classList.add(CSS_CLASS.MUTISELECT, CSS_CLASS.MUTISELECT_ACTIVE);
+        const containerDom = this.container();
+        const searchDom = search.call(this, containerDom);
+        mutiselectDom.append(searchDom, containerDom);
+
+        // 给每个选项绑定点击事件，并执行传入的回调事件
+        mutiselectDom.addEventListener("click", (e) => {
+            let target = e.target;
+            while (target.className.includes(CSS_CLASS.MUTISELECT) && target.className !== CSS_CLASS.ITEM) {
+                target = target.parentNode;
+            }
+            if (target.className === CSS_CLASS.ITEM) {
+                target.firstChild.classList.toggle("active");
+                target.firstChild.firstChild?.classList.toggle("active");
+                this.data[target.dataset.id].selected = !this.data[target.dataset.id].selected;
+                onclick && onclick(target.dataset.id);
+            }
+            e.stopPropagation();
+        });
+
+        // 鼠标在多选框中滚动时避免关闭下拉框
+        mutiselectDom.addEventListener("wheel", (e) => {
+            e.stopPropagation();
+            if (containerDom.offsetHeight === containerDom.scrollHeight) {
+                e.preventDefault();
+            } else if (e.target === mutiselectDom) {
+                e.preventDefault();
+            }
+        });
+        return mutiselectDom;
+    }
+
+    // 刷新数据
+    refreshData(data) {
+        this.initData(data);
+    }
+
+    // 组装数据
+    initData(data) {
+        this.data = [];
+        if (Array.isArray(data)) {
+            for (let item of data) {
+                this.data.push({
+                    name: item["name"] === undefined ? item : item["name"],
+                    value: item["value"] === undefined ? item : item["value"],
+                    selected: item["selected"] === undefined ? false : item["selected"],
+                });
+            }
+        }
+    }
+
+    // 创建条目容器
+    container() {
+        const containerDom = document.createElement("div");
+        containerDom.classList.add(CSS_CLASS.CONTAINER);
+        let colorLength = this.color.length;
+        this.data.forEach((item, index) => {
+            let color = this.color[index % colorLength];
+            if(item.display&&item.display!=='none'){
+                containerDom.appendChild(createItem.call(this,item, index, color,this.itemStyle));
+            }else if(item.display===undefined){
+                containerDom.appendChild(createItem.call(this,item, index, color,this.itemStyle));
+            }
+        });
+        return containerDom;
+    }
+
+    getData() {
+        return this.data;
+    }
+}
+
+// 隐藏所有的mutiselect
+function hide() {
+    let item = document.querySelector(`.${CSS_CLASS.MUTISELECT}.${CSS_CLASS.MUTISELECT_ACTIVE}`);
+    if (item) {
+        item.classList.remove(CSS_CLASS.MUTISELECT_ACTIVE);
+        item.classList.add(CSS_CLASS.MUTISELECT_HIDDEN);
+        setTimeout(() => {
+            document.body.removeChild(item);
+        }, REMOVE_DELAY);
+    }
+}
+
+export default MutiSelect;

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

@@ -0,0 +1,133 @@
+/**
+ * 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";
+const CIRCLE = "circle";
+const LINE = "line";
+// 创建每条下拉选项
+function item(data, index,color,itemStyle) {
+
+    // 整个选项的dom，每个选项由图例和文字组成(图例可以是checkbox)
+    const itemDom = document.createElement("div");
+    itemDom.classList.add(CSS_CLASS.ITEM);
+    itemDom.dataset.id = index;
+    if(color){
+        itemDom.style.setProperty("--active-color", color);
+        const itemIcon = document.createElement("div");
+        if (itemStyle?.icon === LINE) {
+            itemIcon.classList.add(CSS_CLASS.ITEM_ICON_LINE);
+        } else {
+            itemIcon.classList.add(CSS_CLASS.ITEM_ICON_CIRCLE);
+        }
+        const itemName = document.createElement("span");
+        itemName.innerText = data.name;
+        itemName.title = data.name;
+        itemName.classList.add(CSS_CLASS.ITEM_NAME);
+        if (data.selected) {
+            itemIcon.classList.add("active");
+            itemName.classList.add("active");
+        }
+
+        const copy = document.createElement('img')
+        copy.classList.add('copy')
+        if(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);
+                    // new Message({text:"复制成功"})
+                }
+            })
+        }
+        itemDom.append(itemIcon, itemName, copy);
+    }else{
+
+        // 创建checkbox的dom
+        const checkbox = document.createElement("div");
+        checkbox.classList.add(CSS_CLASS.CHECKBOX);
+        const checkboxIcon = document.createElement("img");
+        checkboxIcon.src = svgTransform(SVG_ICON.TICK);
+        checkboxIcon.classList.add(CSS_CLASS.CHECKBOX_ICON);
+        if (data.selected) {
+            checkbox.classList.add("active");
+            checkboxIcon.classList.add("active");
+        }
+        checkbox.appendChild(checkboxIcon);
+
+        // 文字的dom
+        const itemName = document.createElement("span");
+        itemName.innerText = data.name;
+        itemName.title = data.name;
+        itemName.classList.add(CSS_CLASS.ITEM_NAME);
+
+        const copy = document.createElement('img')
+        copy.classList.add('copy')
+        if(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);
+                    // new Message({text:"复制成功"})
+                }
+            })
+        }
+        itemDom.append(checkbox, itemName, copy);
+    }
+    
+    return itemDom;
+}
+
+export { item };

package/src/components/charts/feature/expandLegend/mutiSelect/position.js

@@ -0,0 +1,44 @@
+/**
+ * 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.
+ *
+ */
+// 对于父元素y轴的偏移
+const DELTA_Y = 5;
+
+// 确定多选框的位置
+function position(mutiselect) {
+
+    // 获取根元素的位置
+    const distance = this.root.getBoundingClientRect();
+
+    // 上一次多选框的位置
+    let preTopPosition = mutiselect.dataset.top;
+    let topPosition = distance.bottom + DELTA_Y;
+    let leftPosition = distance.left + distance.width - mutiselect.clientWidth;
+
+    // 根元素左边放不下，则放右边
+    if (leftPosition <= 0) {
+        leftPosition = distance.left;
+    }
+
+    // 用于处理，当上一次多选框出现在根元素的上方，又在搜索框中搜索数据后，保持上一次多选框的位置，不要乱跳
+    if (Number(preTopPosition) < topPosition || topPosition + mutiselect.clientHeight > window.innerHeight) {
+        topPosition = distance.top - mutiselect.clientHeight;
+    }
+    mutiselect.style.left = leftPosition + "px";
+    mutiselect.style.top = topPosition + "px";
+    mutiselect.dataset.scrollY = window.scrollY;
+    mutiselect.dataset.top = topPosition;
+    mutiselect.dataset.scrollX = window.scrollX;
+    mutiselect.dataset.left = leftPosition;
+    mutiselect.dataset.id = this.root.id;
+}
+
+export default position;

package/src/components/charts/feature/expandLegend/mutiSelect/search.js

@@ -0,0 +1,79 @@
+/**
+ * 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 position from "./position";
+import { svgTransform } from "../../../util/convert";
+import debounce from "../../../util/debounce";
+import { item as createItem } from "./item";
+
+// 创建搜索框
+function search(container) {
+    const searchDom = document.createElement("div");
+    searchDom.classList.add(CSS_CLASS.SEARCH);
+    searchDom.addEventListener("wheel", (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+    });
+    const searchIcon = document.createElement("img");
+    searchIcon.src = svgTransform(SVG_ICON.SEARCH);
+    searchIcon.classList.add(CSS_CLASS.SEARCH_ICON);
+    const searchInput = document.createElement("input");
+    searchInput.name = "searchDom";
+    searchInput.placeholder = "请输入关键词";
+    searchInput.addEventListener("wheel", function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+    });
+
+    // 搜索时防抖
+    searchInput.addEventListener(
+        "input",
+        debounce(() => {
+            container.classList.remove(CSS_CLASS.CONTAINER_EMPTY);
+            container.innerHTML = "";
+            let isEmpty = true;
+            let colorLength = this.color.length;
+            this.data.forEach((item, index) => {
+                if (item.name.toString().includes(searchInput.value)) {
+                    let color = this.color[index % colorLength];
+                    if(item.display&&item.display!=='none'){
+                        container.appendChild(createItem(item, index, color,this.itemStyle));
+                    }else if(item.display===undefined){
+                        container.appendChild(createItem(item, index, color,this.itemStyle));
+                    }
+                    isEmpty = false;
+                }
+            });
+
+            // 搜索结果为空时显示空内容
+            if (isEmpty) {
+                container.classList.add(CSS_CLASS.CONTAINER_EMPTY);
+                const emptyIcon = document.createElement("img");
+                emptyIcon.src = svgTransform(SVG_ICON.EMPTY);
+                emptyIcon.style.opacity = "0.2";
+                const emptyText = document.createElement("div");
+                emptyText.innerText = "无数据";
+                emptyText.classList.add(CSS_CLASS.CONTAINER_EMPTY_TEXT);
+                container.append(emptyIcon, emptyText);
+            }
+            let mutiselectDom = container.querySelector(`.${CSS_CLASS.MUTISELECT}`);
+            
+            // 搜索后重新计算下位置
+            if (mutiselectDom) position.call(this, mutiselectDom);
+        })
+    );
+    searchInput.classList.add(CSS_CLASS.SEARCH_INPUT);
+    searchDom.append(searchIcon, searchInput);
+    return searchDom;
+}
+
+export default search;

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

@@ -0,0 +1,41 @@
+/**
+ * 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 = {
+    SCROLL: "hui_expand_legend_scroll",
+    MORE: "hui_expand_legend_more",
+    PLACEHOLDER: "hui_expand_legend_placeholder",
+    PAGING_ICON_ROTATE: "hui_expand_legend_paging_icon_rotate",
+    ITEM: "hui_expand_legend_scroll_item",
+    ITEM_ICON: "hui_expand_legend_scroll_item_icon",
+    ITEM_ICON_LINE: "hui_expand_legend_scroll_item_icon_line",
+    ITEM_ICON_CIRCLE: "hui_expand_legend_scroll_item_icon_circle",
+    ITEM_ICON_UNACTIVE: "hui_expand_legend_scroll_item_icon_unactive",
+    ITEM_TEXT: "hui_expand_legend_scroll_item_text",
+    ITEM_TEXT_UNACTIVE: "hui_expand_legend_scroll_item_text_unactive",
+    PAGING: "hui_expand_legend_paging",
+    PAGING_TEXT: "hui_expand_legend_paging_text",
+    PAGING_ICON: "hui_expand_legend_paging_icon",
+    PAGING_LEFT: "hui_expand_legend_paging_left",
+    PAGING_RIGHT: "hui_expand_legend_paging_right",
+};
+
+export const SVG_ICON = {
+    LEFT_ARROW: `<svg width="4.773438" height="8.336914" viewBox="0 0 4.77344 8.33691" 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="M4.06 8.21L0.15 4.46C0.05 4.36 0 4.25 0 4.15C0 4.06 0.05 3.96 0.15 3.86L4.06 0.11C4.23 -0.05 4.49 -0.04 4.65 0.12C4.81 0.29 4.81 0.55 4.64 0.71L1.04 4.16L4.64 7.61C4.81 7.77 4.81 8.03 4.65 8.2C4.49 8.37 4.23 8.38 4.06 8.21Z" fill="#C9C9C9" fill-opacity="1.000000" fill-rule="evenodd"/></svg>`,
+    RIGHT_ARROW: `<svg width="4.773438" height="8.336914" viewBox="0 0 4.77344 8.33691" 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="M0.7 8.21L4.62 4.46C4.71 4.36 4.77 4.25 4.77 4.15C4.76 4.06 4.71 3.96 4.62 3.86L0.7 0.11C0.53 -0.05 0.27 -0.04 0.11 0.12C-0.05 0.29 -0.04 0.55 0.12 0.71L3.73 4.16L0.12 7.61C-0.04 7.77 -0.05 8.03 0.11 8.2C0.27 8.37 0.53 8.38 0.7 8.21Z" fill="#191919" fill-opacity="1.000000" fill-rule="evenodd"/></svg>`,
+    EVEN_MORE: `<svg width="12.000000" height="12.000000" viewBox="0 0 12 12" 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="M0 6C0 5.58 0.33 5.25 0.75 5.25C1.16 5.25 1.5 5.58 1.5 6C1.5 6.41 1.16 6.75 0.75 6.75C0.33 6.75 0 6.41 0 6ZM6 5.25C5.58 5.25 5.25 5.58 5.25 6C5.25 6.41 5.58 6.75 6 6.75C6.41 6.75 6.75 6.41 6.75 6C6.75 5.58 6.41 5.25 6 5.25ZM10.5 6C10.5 5.58 10.83 5.25 11.25 5.25C11.66 5.25 12 5.58 12 6C12 6.41 11.66 6.75 11.25 6.75C10.83 6.75 10.5 6.41 10.5 6Z" fill="#191919" fill-opacity="1.000000" fill-rule="evenodd"/></svg>`,
+    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/mutiSelectLegend/group.js

@@ -0,0 +1,112 @@
+/**
+ * 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 = [];
+    let scrollClientWidth = this.scroll.clientWidth
+    // 分组，每组不会超过父元素宽度
+    this.item.forEach((item) => {
+        let pre = Math.floor((getOffsetLeft(item) - barLeft + windowScrollX) / scrollClientWidth);
+        let cur = Math.floor((getOffsetLeft(item) - barLeft + windowScrollX + item.clientWidth) / scrollClientWidth);
+        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 > scrollClientWidth) {
+                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 > scrollClientWidth) {
+                    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.current + 1 === this.group.length) {
+        this.pagingRightIcon.src = svgTransform(SVG_ICON.LEFT_ARROW);
+        this.pagingRightIcon.classList.add(CSS_CLASS.PAGING_ICON_ROTATE);
+    }
+    this.pagingText.innerText = `${this.current + 1}/${this.group.length > 0 ? this.group.length : 1}`;
+}
+
+/**
+ * 用于获取节点距离body的左边距
+ * @param {节点} element
+ * @returns
+ */
+function getOffsetLeft(element) {
+
+    // 获取元素的边界矩形
+    const rect = element.getBoundingClientRect();
+
+    // 计算元素相对于文档左边的偏移量
+    return rect.left + window.scrollX;
+}
+
+export default group;