@ebiz/designer-components 0.0.47 → 0.0.48

package/src/components/charts/feature/drag/index.less

@@ -1,53 +1,53 @@
-/**
- * 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.
- *
- */
-.drag-container {
-  width: 10000px;
-  height: 10000px;
-  position: absolute;
-  cursor: pointer;
-}
-
-.drag-tools {
-  display: block;
-  bottom: 3rem /* 48/16 */;
-  right: 2rem;
-  position: absolute;
-  cursor: pointer;
-  color: #f5f5f5;
-  width: 2.5rem /* 40/16 */;
-  font-size: 0.75rem;
-
-  .drag-scale,
-  .drag-reset {
-    border: 1px solid rgba(238, 238, 238, 0.15);
-    background-color: rgba(25, 25, 25, 0.65);
-    padding: 0.625rem /* 10/16 */ 0.375rem /* 6/16 */;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    gap: 0.75rem;
-    border-radius: 0.25rem;
-  }
-
-  .drag-reset {
-    margin-top: 0.5rem;
-  }
-
-  .drag-tool-item {
-    width: 1.25rem /* 20/16 */;
-    height: 1.25rem /* 20/16 */;
-  }
-  .drag-currentVal {
-    margin-top: 0.75em; 
-  }
-}
+/**
+ * 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.
+ *
+ */
+.drag-container {
+  width: 10000px;
+  height: 10000px;
+  position: absolute;
+  cursor: pointer;
+}
+
+.drag-tools {
+  display: block;
+  bottom: 3rem /* 48/16 */;
+  right: 2rem;
+  position: absolute;
+  cursor: pointer;
+  color: #f5f5f5;
+  width: 2.5rem /* 40/16 */;
+  font-size: 0.75rem;
+
+  .drag-scale,
+  .drag-reset {
+    border: 1px solid rgba(238, 238, 238, 0.15);
+    background-color: rgba(25, 25, 25, 0.65);
+    padding: 0.625rem /* 10/16 */ 0.375rem /* 6/16 */;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 0.75rem;
+    border-radius: 0.25rem;
+  }
+
+  .drag-reset {
+    margin-top: 0.5rem;
+  }
+
+  .drag-tool-item {
+    width: 1.25rem /* 20/16 */;
+    height: 1.25rem /* 20/16 */;
+  }
+  .drag-currentVal {
+    margin-top: 0.75em; 
+  }
+}

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

@@ -1,63 +1,63 @@
-/**
- * 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 { isNumber } from '../../util/type';
-
-// 累加数据的每一项
-function accumulateArray(arr) {
-    return arr.reduce((acc, current, index) => {
-        if (index === 0) {
-            acc.push(current);
-        } else {
-            acc.push(acc[index - 1] + current);
-        }
-      return acc;
-    }, []);
-}
-
-// 计算平均值
-function divideIntoIntegers(number, parts) {
-    if (parts <= 1 || number <= 0) {
-      throw new Error('Invalid input');
-    }
-    let quotient = Math.floor(number / parts);
-    let remainder = number % parts;
-    let result = [];
-    for (let i = 0; i < parts - 1; i++) {
-      result.push(quotient);
-      if (remainder > 0) {
-        result[i]++;
-        remainder--;
-      }
-    }
-    result.push(quotient);
-    return accumulateArray(result);
-}
-
-function equalLabel(iChartOption, xAxisItem, xAxisUnit) {
-    let sharing = xAxisItem.sharing;
-    if(isNumber(sharing)) {
-        let dataLength = iChartOption.data.length;
-        let sharingArr = divideIntoIntegers(dataLength -1,sharing);
-        xAxisUnit.axisLabel.interval = (index) => {
-            if(sharingArr.includes(index) || index === 0 ) {
-                return true;
-            } else {
-                return false;
-            }
-        }
-    }
-    if(sharing === 'auto') {
-        xAxisUnit.axisLabel.showMaxLabel = true;
-    }
-}
-
+/**
+ * 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 { isNumber } from '../../util/type';
+
+// 累加数据的每一项
+function accumulateArray(arr) {
+    return arr.reduce((acc, current, index) => {
+        if (index === 0) {
+            acc.push(current);
+        } else {
+            acc.push(acc[index - 1] + current);
+        }
+      return acc;
+    }, []);
+}
+
+// 计算平均值
+function divideIntoIntegers(number, parts) {
+    if (parts <= 1 || number <= 0) {
+      throw new Error('Invalid input');
+    }
+    let quotient = Math.floor(number / parts);
+    let remainder = number % parts;
+    let result = [];
+    for (let i = 0; i < parts - 1; i++) {
+      result.push(quotient);
+      if (remainder > 0) {
+        result[i]++;
+        remainder--;
+      }
+    }
+    result.push(quotient);
+    return accumulateArray(result);
+}
+
+function equalLabel(iChartOption, xAxisItem, xAxisUnit) {
+    let sharing = xAxisItem.sharing;
+    if(isNumber(sharing)) {
+        let dataLength = iChartOption.data.length;
+        let sharingArr = divideIntoIntegers(dataLength -1,sharing);
+        xAxisUnit.axisLabel.interval = (index) => {
+            if(sharingArr.includes(index) || index === 0 ) {
+                return true;
+            } else {
+                return false;
+            }
+        }
+    }
+    if(sharing === 'auto') {
+        xAxisUnit.axisLabel.showMaxLabel = true;
+    }
+}
+
 export default equalLabel;

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

@@ -1,22 +1,22 @@
-/**
- * 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 = {
-    CONTAINER: "hui_legend_container",
-    MUTISELECT_CONTAINER: "hui_legend_mutiselect_container",
-    LIST_CONTAINER: "hui_legend_list_container",
-    MORE: "hui_expand_legend_more",
-    SINGLESELECT_CONTAINER:"hui_legend_singleselect_container"
-};
-
-export const SVG_ICON = {
-    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>`,
-};
+/**
+ * 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 = {
+    CONTAINER: "hui_legend_container",
+    MUTISELECT_CONTAINER: "hui_legend_mutiselect_container",
+    LIST_CONTAINER: "hui_legend_list_container",
+    MORE: "hui_expand_legend_more",
+    SINGLESELECT_CONTAINER:"hui_legend_singleselect_container"
+};
+
+export const SVG_ICON = {
+    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>`,
+};

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

@@ -1,190 +1,190 @@
-/**
- * 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 MutiSelectLegend from "./mutiSelectLegend";
-import MutiSelectList from "./mutiSelectList";
-import SingleSelect from "./singleSelect";
-import { uuid } from "../../util/math";
-import { svgTransform } from "../../util/convert";
-import { CSS_CLASS, SVG_ICON } from "./constants";
-import SingleSelectLegend from "./singleSelectLegend";
-// echarts图例切换事件名
-const LEGEND_TOGGLE_SELECT = "legendToggleSelect";
-
-function expandLegend(chartsIns) {
-    const { dom: dom, eChartOption: option } = chartsIns;
-    let preContainer = dom.querySelector(`.${CSS_CLASS.CONTAINER}`);
-    preContainer && dom.removeChild(preContainer);
-    if (option?.legend?.upgrade?.type === undefined) return;
-    // 将图表原有的图例隐藏
-    option.legend = {
-        ...option.legend,
-        show: false,
-    };
-    // 开始渲染
-    const { type } = option.legend.upgrade;
-    switch (type) {
-        case "mutiselect":
-            createMutiSelect(chartsIns);
-            break;
-        case "list":
-            createList(chartsIns);
-            break;
-        case "singleselect":
-            createSingleSelectLegend(chartsIns);
-            break;
-    }
-    chartsIns.setOption(option);
-}
-
-function createMutiSelect(chartsIns) {
-    const { dom: dom, eChartOption: option } = chartsIns;
-    const { width } = option.legend.upgrade;
-    const container = document.createElement("div");
-    container.classList.add(CSS_CLASS.CONTAINER);
-    const legendBar = document.createElement("div");
-    legendBar.classList.add(CSS_CLASS.MUTISELECT_CONTAINER);
-    if (width && typeof width === "string") {
-        legendBar.style.width = width;
-    }
-    container.append(legendBar);
-    dom.insertAdjacentHTML("afterbegin", container.outerHTML);
-    let mutiSelect = new MutiSelectLegend(dom.querySelector(`.${CSS_CLASS.MUTISELECT_CONTAINER}`));
-    let data = option?.legend?.data;
-    if (data === undefined) data = option?.series[0]?.data;
-    mutiSelect.setOption({
-        data: [...data],
-        color: [...option.color],
-        itemStyle: option.legend.upgrade.itemStyle,
-        onclick: (clickItem) => {
-            if (option.legend?.selected === undefined) option.legend.selected = {};
-            option.legend.selected[clickItem.name] = clickItem.selected;
-            chartsIns.setOption(option);
-        },
-        onLegendClick: (clickItem) => {
-            chartsIns.getEchartsInstance().dispatchAction({
-                type: LEGEND_TOGGLE_SELECT,
-                name: clickItem.name,
-            });
-        },
-    });
-}
-
-function createList(chartsIns) {
-    const { dom: dom, eChartOption: option } = chartsIns;
-    const container = document.createElement("div");
-    container.classList.add(CSS_CLASS.LIST_CONTAINER);
-    if (option?.legend?.upgrade?.position === "underCanvas") {
-        dom.insertAdjacentHTML("beforeend", container.outerHTML);
-        dom.parentNode.querySelector(`.${CSS_CLASS.LIST_CONTAINER}`).style.width = "100%"
-        dom.parentNode.querySelector(`.${CSS_CLASS.LIST_CONTAINER}`).style.position = "static"
-    } else {
-        dom.insertAdjacentHTML("afterbegin", container.outerHTML);
-        // 图表默认距离右边35%，图例列表宽30%
-        if (!option.grid) {
-            option.grid = [
-                {
-                    bottom: 0,
-                    left: 0,
-                    right: "35%",
-                    top: 0,
-                },
-            ];
-        }
-        if (option?.legend?.upgrade?.width) {
-            dom.parentNode.querySelector(`.${CSS_CLASS.LIST_CONTAINER}`).style.width = option.legend.upgrade.width;
-            option.grid[0].right = Number(option.legend.upgrade.width.split("%")[0]) + 5 + "%";
-        }
-    }
-
-    const list = new MutiSelectList(dom.parentNode.querySelector(`.${CSS_CLASS.LIST_CONTAINER}`));
-    let data = option?.legend?.data;
-    if (data === undefined) {
-        data = option?.series[0]?.data;
-    }
-    list.setOption({
-        data: [...data],
-        itemStyle: option.legend.upgrade.itemStyle,
-        color: [...option.color],
-        height: dom.style.height,
-        statistics: option.legend.upgrade.statistics,
-        onclick: (clickItem) => {
-            chartsIns.getEchartsInstance().dispatchAction({
-                type: LEGEND_TOGGLE_SELECT,
-                name: clickItem.name,
-            });
-        },
-    });
-}
-
-function createSingleSelect(chartsIns) {
-    const { dom: dom, eChartOption: option } = chartsIns;
-    const container = document.createElement("div");
-    container.classList.add(CSS_CLASS.CONTAINER);
-    dom.insertAdjacentHTML("afterbegin", container.outerHTML);
-    dom.querySelector(`.${CSS_CLASS.CONTAINER}`).innerHTML = "";
-    const more = document.createElement("div");
-    const moreIcon = document.createElement("img");
-    more.id = `more-${uuid()}`;
-    moreIcon.src = svgTransform(SVG_ICON.MORE);
-    more.classList.add(CSS_CLASS.MORE);
-    more.appendChild(moreIcon);
-    dom.querySelector(`.${CSS_CLASS.CONTAINER}`).append(more);
-    let select = new SingleSelect(more);
-    let data = option?.legend?.data;
-    if (data === undefined) data = option?.series[0]?.data;
-    select.setOption({
-        color: [...option.color],
-        data: [...data],
-        itemStyle: option.legend.upgrade.itemStyle,
-        onclick: (clickItem) => {
-            chartsIns.getEchartsInstance().dispatchAction({
-                type: LEGEND_TOGGLE_SELECT,
-                name: clickItem.name,
-            });
-        },
-    });
-}
-
-function createSingleSelectLegend(chartsIns){
-    const { dom: dom, eChartOption: option } = chartsIns;
-    const { width } = option.legend.upgrade;
-    const container = document.createElement("div");
-    container.classList.add(CSS_CLASS.CONTAINER);
-    const legendBar = document.createElement("div");
-    legendBar.classList.add(CSS_CLASS.SINGLESELECT_CONTAINER);
-    if (width && typeof width === "string") {
-        legendBar.style.width = width;
-    }
-    container.append(legendBar);
-    dom.insertAdjacentHTML("afterbegin", container.outerHTML);
-    let singleSelect = new SingleSelectLegend(dom.querySelector(`.${CSS_CLASS.SINGLESELECT_CONTAINER}`));
-    let data = option?.legend?.data;
-    if (data === undefined) data = option?.series[0]?.data;
-    singleSelect.setOption({
-        data: [...data],
-        color: [...option.color],
-        itemStyle: option.legend.upgrade.itemStyle,
-        onclick: (clickItem) => {
-            chartsIns.getEchartsInstance().dispatchAction({
-                type: LEGEND_TOGGLE_SELECT,
-                name: clickItem.name,
-            });
-        },
-        onLegendClick: (clickItem) => {
-            chartsIns.getEchartsInstance().dispatchAction({
-                type: LEGEND_TOGGLE_SELECT,
-                name: clickItem.name,
-            });
-        },
-    });
-}
-export default expandLegend;
+/**
+ * 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 MutiSelectLegend from "./mutiSelectLegend";
+import MutiSelectList from "./mutiSelectList";
+import SingleSelect from "./singleSelect";
+import { uuid } from "../../util/math";
+import { svgTransform } from "../../util/convert";
+import { CSS_CLASS, SVG_ICON } from "./constants";
+import SingleSelectLegend from "./singleSelectLegend";
+// echarts图例切换事件名
+const LEGEND_TOGGLE_SELECT = "legendToggleSelect";
+
+function expandLegend(chartsIns) {
+    const { dom: dom, eChartOption: option } = chartsIns;
+    let preContainer = dom.querySelector(`.${CSS_CLASS.CONTAINER}`);
+    preContainer && dom.removeChild(preContainer);
+    if (option?.legend?.upgrade?.type === undefined) return;
+    // 将图表原有的图例隐藏
+    option.legend = {
+        ...option.legend,
+        show: false,
+    };
+    // 开始渲染
+    const { type } = option.legend.upgrade;
+    switch (type) {
+        case "mutiselect":
+            createMutiSelect(chartsIns);
+            break;
+        case "list":
+            createList(chartsIns);
+            break;
+        case "singleselect":
+            createSingleSelectLegend(chartsIns);
+            break;
+    }
+    chartsIns.setOption(option);
+}
+
+function createMutiSelect(chartsIns) {
+    const { dom: dom, eChartOption: option } = chartsIns;
+    const { width } = option.legend.upgrade;
+    const container = document.createElement("div");
+    container.classList.add(CSS_CLASS.CONTAINER);
+    const legendBar = document.createElement("div");
+    legendBar.classList.add(CSS_CLASS.MUTISELECT_CONTAINER);
+    if (width && typeof width === "string") {
+        legendBar.style.width = width;
+    }
+    container.append(legendBar);
+    dom.insertAdjacentHTML("afterbegin", container.outerHTML);
+    let mutiSelect = new MutiSelectLegend(dom.querySelector(`.${CSS_CLASS.MUTISELECT_CONTAINER}`));
+    let data = option?.legend?.data;
+    if (data === undefined) data = option?.series[0]?.data;
+    mutiSelect.setOption({
+        data: [...data],
+        color: [...option.color],
+        itemStyle: option.legend.upgrade.itemStyle,
+        onclick: (clickItem) => {
+            if (option.legend?.selected === undefined) option.legend.selected = {};
+            option.legend.selected[clickItem.name] = clickItem.selected;
+            chartsIns.setOption(option);
+        },
+        onLegendClick: (clickItem) => {
+            chartsIns.getEchartsInstance().dispatchAction({
+                type: LEGEND_TOGGLE_SELECT,
+                name: clickItem.name,
+            });
+        },
+    });
+}
+
+function createList(chartsIns) {
+    const { dom: dom, eChartOption: option } = chartsIns;
+    const container = document.createElement("div");
+    container.classList.add(CSS_CLASS.LIST_CONTAINER);
+    if (option?.legend?.upgrade?.position === "underCanvas") {
+        dom.insertAdjacentHTML("beforeend", container.outerHTML);
+        dom.parentNode.querySelector(`.${CSS_CLASS.LIST_CONTAINER}`).style.width = "100%"
+        dom.parentNode.querySelector(`.${CSS_CLASS.LIST_CONTAINER}`).style.position = "static"
+    } else {
+        dom.insertAdjacentHTML("afterbegin", container.outerHTML);
+        // 图表默认距离右边35%，图例列表宽30%
+        if (!option.grid) {
+            option.grid = [
+                {
+                    bottom: 0,
+                    left: 0,
+                    right: "35%",
+                    top: 0,
+                },
+            ];
+        }
+        if (option?.legend?.upgrade?.width) {
+            dom.parentNode.querySelector(`.${CSS_CLASS.LIST_CONTAINER}`).style.width = option.legend.upgrade.width;
+            option.grid[0].right = Number(option.legend.upgrade.width.split("%")[0]) + 5 + "%";
+        }
+    }
+
+    const list = new MutiSelectList(dom.parentNode.querySelector(`.${CSS_CLASS.LIST_CONTAINER}`));
+    let data = option?.legend?.data;
+    if (data === undefined) {
+        data = option?.series[0]?.data;
+    }
+    list.setOption({
+        data: [...data],
+        itemStyle: option.legend.upgrade.itemStyle,
+        color: [...option.color],
+        height: dom.style.height,
+        statistics: option.legend.upgrade.statistics,
+        onclick: (clickItem) => {
+            chartsIns.getEchartsInstance().dispatchAction({
+                type: LEGEND_TOGGLE_SELECT,
+                name: clickItem.name,
+            });
+        },
+    });
+}
+
+function createSingleSelect(chartsIns) {
+    const { dom: dom, eChartOption: option } = chartsIns;
+    const container = document.createElement("div");
+    container.classList.add(CSS_CLASS.CONTAINER);
+    dom.insertAdjacentHTML("afterbegin", container.outerHTML);
+    dom.querySelector(`.${CSS_CLASS.CONTAINER}`).innerHTML = "";
+    const more = document.createElement("div");
+    const moreIcon = document.createElement("img");
+    more.id = `more-${uuid()}`;
+    moreIcon.src = svgTransform(SVG_ICON.MORE);
+    more.classList.add(CSS_CLASS.MORE);
+    more.appendChild(moreIcon);
+    dom.querySelector(`.${CSS_CLASS.CONTAINER}`).append(more);
+    let select = new SingleSelect(more);
+    let data = option?.legend?.data;
+    if (data === undefined) data = option?.series[0]?.data;
+    select.setOption({
+        color: [...option.color],
+        data: [...data],
+        itemStyle: option.legend.upgrade.itemStyle,
+        onclick: (clickItem) => {
+            chartsIns.getEchartsInstance().dispatchAction({
+                type: LEGEND_TOGGLE_SELECT,
+                name: clickItem.name,
+            });
+        },
+    });
+}
+
+function createSingleSelectLegend(chartsIns){
+    const { dom: dom, eChartOption: option } = chartsIns;
+    const { width } = option.legend.upgrade;
+    const container = document.createElement("div");
+    container.classList.add(CSS_CLASS.CONTAINER);
+    const legendBar = document.createElement("div");
+    legendBar.classList.add(CSS_CLASS.SINGLESELECT_CONTAINER);
+    if (width && typeof width === "string") {
+        legendBar.style.width = width;
+    }
+    container.append(legendBar);
+    dom.insertAdjacentHTML("afterbegin", container.outerHTML);
+    let singleSelect = new SingleSelectLegend(dom.querySelector(`.${CSS_CLASS.SINGLESELECT_CONTAINER}`));
+    let data = option?.legend?.data;
+    if (data === undefined) data = option?.series[0]?.data;
+    singleSelect.setOption({
+        data: [...data],
+        color: [...option.color],
+        itemStyle: option.legend.upgrade.itemStyle,
+        onclick: (clickItem) => {
+            chartsIns.getEchartsInstance().dispatchAction({
+                type: LEGEND_TOGGLE_SELECT,
+                name: clickItem.name,
+            });
+        },
+        onLegendClick: (clickItem) => {
+            chartsIns.getEchartsInstance().dispatchAction({
+                type: LEGEND_TOGGLE_SELECT,
+                name: clickItem.name,
+            });
+        },
+    });
+}
+export default expandLegend;