@ebiz/designer-components 0.0.18

package/src/components/charts/components/FlowChart/frameworkFn.js

@@ -0,0 +1,38 @@
+// // Vue 框架依赖配置
+// import { createApp, h } from 'vue';
+
+// // React 框架依赖配置
+// import ReactDOMServer from 'react-dom/server';
+
+// // Angular 框架依赖配置
+// import { ViewContainerRef } from '@angular/core';
+
+// export function createVueApp(options) {
+//   if (!createApp) {
+//     throw new Error('Vue is not installed. Please install Vue to use createApp.');
+//   }
+//   return createApp(options);
+// }
+
+// export function createElement(tag, props, children) {
+//   if (!h) {
+//     throw new Error('Vue is not installed. Please install Vue to use the createElement function.');
+//   }
+//   return h(tag, props, children);
+// }
+
+// export function renderToString(Component) {
+//   const { renderToString } = ReactDOMServer;
+
+//   if (!renderToString) {
+//     throw new Error('react-dom is not installed. Please install react-dom to use the renderToString function.');
+//   }
+//   return renderToString(Component);
+// }
+
+// export function AngularViewContainerRef() {
+//   if (!ViewContainerRef) {
+//     throw new Error('@angular/core is not installed. Please install @angular/core to use the renderToString function.');
+//   }
+//   return ViewContainerRef;
+// }

package/src/components/charts/components/FlowChart/index.js

@@ -0,0 +1,268 @@
+/**
+ * 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 BaseChart from '../BaseChart';
+import NodeManager from './NodeManager';
+import LineManager from './LineManager';
+import { initContainer } from './insert.js'
+import { CHART_TYPE } from '../../util/constants';
+import { isFunction } from '../../util/type';
+
+export default class FlowChart extends BaseChart{
+
+    static name = CHART_TYPE.FLOW
+
+    // 图表渲染容器
+    dom;
+    // 图表所需数据
+    data;
+    // 图表容器边距
+    padding = 30;
+    // 图表最外层容器
+    container;
+    // 图表svg元素容器
+    svgContainer;
+    // 图表html元素容器
+    htmlContainer;
+    // 图表容器的宽高变化监听器
+    resizeObserver = null;
+    /**
+     * 拖拽中的节点
+     * node： 拖拽的节点
+     * nodePosn: 拖拽节点的尺寸信息
+     * initDisX, initDisY： 拖拽开始时mouse与node左上角的距离 + 父容器与屏幕距离
+     */
+    draggingNode = {
+        node: null,
+        nodePosn: null,
+        initDisX: 0,
+        initDisY: 0
+    };
+    /**
+     * 生成连线和计算位置
+     */
+    lineManager;
+    /**
+     * 生成节点和计算位置
+     */
+    nodeManager;
+
+    constructor() {
+        super();
+        this.dom = null;
+        this.option = null;
+        this.resizeObserver = null;
+    }
+
+    // 初始化图表渲染容器
+    init(dom) {
+        this.dom = dom;
+    }
+
+    // 初始化图表渲染配置
+    setSimpleOption(name, option) {
+        this.option = option;
+    }
+
+    // 图表渲染回调
+    render() {
+        initContainer(this.dom);
+        this.container = this.dom.getElementsByClassName('fc-container')[0];
+        this.svgContainer = this.dom.getElementsByClassName('fc-line-container')[0];
+        this.tagContainer = this.dom.getElementsByClassName('fc-tag-container')[0];
+        this.htmlContainer = this.dom.getElementsByClassName('fc-node-container')[0];
+        this.containerPosn = this.container.getBoundingClientRect();
+        this.resetContainerPosn();
+        this.createNodes();
+        this.createLines();
+        this.setResizeObserver();
+        setTimeout(() => {
+          this.svgContainer.setAttribute('style',`height:${this.container.scrollHeight}px;width:${this.container.scrollWidth}px`);
+        }, 10);
+    }
+
+    // 图表渲染完成时回调
+    onRenderReady(callback) {
+        this.renderCallBack = callback;
+    }
+
+    // 图表刷新，刷新配置项
+    refresh(option) {
+        this.option = option;
+        if(this.resizeObserver){
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+        this.dom.innerHTML = '';
+        this.nodeManager=null;
+        this.lineManager=null;
+        this.render();
+    }
+
+    // 图表刷新，仅刷新数据
+    refreshData(data) {
+        this.option.data = data;
+        this.refresh(this.option);
+    }
+
+    // 刷新图表自适应宽度
+    setResize() {
+        if(this.nodeManager && this.lineManager){
+            this.containerPosn = this.container.getBoundingClientRect();
+            this.nodeManager.layoutNodes(this.data, this.containerPosn);
+            this.lineManager.updateAllLine();
+        }
+    }
+
+
+    /**
+     * 1.创建和渲染节点
+     * 2.处理数据，并计算出节点位置
+     * 3.移动节点到指定位置
+     */
+    createNodes(){
+        this.data = this.option.data;
+        this.nodeManager = new NodeManager(this.data, this.option, this.htmlContainer);
+        // 此时节点已经渲染在dom上，可以获取到宽高，计算布局
+        setTimeout(()=>{
+            this.nodeManager.layoutNodes(this.data, this.containerPosn);
+        },0);
+    }
+
+    /**
+     * 由于要支持前端框架，框架在渲染node时是异步的
+     * 因此，绘制线条时需要在微任务全部处理完成才行吗，使用 setTimeout(()=>{},0)
+     */
+    createLines(){
+        setTimeout(()=>{
+            let gContainer = this.svgContainer.getElementsByClassName('fc-line-g')[0];
+            this.lineManager = new LineManager(this.data, gContainer, this.tagContainer, this.containerPosn, this.option);
+            // if(this.option.slient !== true){
+            //     this.initEvent();
+            // }
+            this.renderCallBack && this.renderCallBack(this);
+        },10)
+    }
+
+    // 绑定事件
+    initEvent() {
+        // 鼠标按下节点，后续如果情况复杂，可能改为绑定在document上
+        this.htmlContainer.childNodes.forEach((item, index) => {
+            item.onmousedown = (mousedownEvent) => {
+                // 鼠标按下时刷新containerPosn，防止页面滚动后，containerPosn未刷新的现象
+                this.containerPosn = this.container.getBoundingClientRect();
+                // 鼠标点击
+                item.style.zIndex = 2;
+                let itemPosn = item.getBoundingClientRect();
+                this.draggingNode.node = item;
+                this.draggingNode.nodePosn = itemPosn;
+                this.draggingNode.initDisX = mousedownEvent.clientX - itemPosn.left + this.containerPosn.left;
+                this.draggingNode.initDisY = mousedownEvent.clientY - itemPosn.top + this.containerPosn.top;
+            }
+        });
+        // 鼠标移动
+        document.onmousemove = (mousemoveEvent) => {
+          if (this.draggingNode.node) {
+                // requestAnimationFrame(() => {
+                let moveX = mousemoveEvent.clientX - this.draggingNode.initDisX;
+                let moveY = mousemoveEvent.clientY - this.draggingNode.initDisY;
+                // 边界处理
+                if (moveX <= 0) {
+                    moveX = 0;
+                }
+                if (moveX + this.draggingNode.nodePosn.width >= this.containerPosn.width) {
+                    moveX = this.containerPosn.width - this.draggingNode.nodePosn.width;
+                }
+                if (moveY <= 0) {
+                    moveY = 0;
+                }
+                if (moveY + this.draggingNode.nodePosn.height >= this.container.scrollHeight) {
+                  moveY = this.container.scrollHeight - this.draggingNode.nodePosn.height;
+                }
+                // 设置定位
+                this.draggingNode.node.style.left = moveX + 'px';
+                this.draggingNode.node.style.top = moveY + 'px';
+                // 更改节点和连线的位置
+                let domId = this.draggingNode.node.id;
+                this.nodeManager.updateNode(domId, moveX, moveY);
+                this.lineManager.updateLine(domId);
+            }
+        };
+        // 鼠标抬起
+        document.onmouseup = (e) => {
+            if (this.draggingNode.node) {
+                this.draggingNode.node.style.zIndex = 1;
+                this.draggingNode = {
+                    initDisX: 0,
+                    initDisY: 0,
+                    node: null,
+                    nodePosn: null,
+                };
+            }
+        }
+        document.onmouseleave = (e) => {
+            if (this.draggingNode.node) {
+                this.draggingNode.node.style.zIndex = 1;
+                this.draggingNode = {
+                    node: null,
+                    nodePosn: null,
+                    initDisX: 0,
+                    initDisY: 0
+                };
+            }
+        }
+    }
+
+    // 监听容器样式变化
+    setResizeObserver(){
+        this.resizeObserver = new ResizeObserver(entries => {
+          // TODO: 补充节流函数
+          if(this.nodeManager && this.lineManager){
+            this.containerPosn = this.container.getBoundingClientRect();
+            this.resetContainerPosn()
+            this.nodeManager.layoutNodes(this.data, this.containerPosn);
+            this.lineManager.updateAllLine();
+          }
+          if(this.option.renderBorder && isFunction(this.option.renderBorder)){
+            this.option.renderBorder(this.htmlContainer,this.data.nodes);
+          }
+        });
+        this.resizeObserver.observe(this.dom);
+    }
+
+    resetContainerPosn(){
+        let transformOption = getComputedStyle(this.dom)['transform'];
+        let scaleX = 1;
+        let scaleY = 1;
+        if (transformOption !== 'none') {
+            const transfromStr = transformOption.replace('matrix(', '').split(',');
+            scaleX = Number(transfromStr[0]);
+            scaleY = Number(transfromStr[3]);
+        }
+        this.containerPosn = {
+            ...this.containerPosn,
+            width: this.containerPosn.width / scaleX,
+            height: this.containerPosn.height / scaleY,
+            scaleX,
+            scaleY
+        };
+    }
+
+    // 销毁图表
+    destory(){
+        this.resizeObserver.disconnect();
+        this.dom.innerHTML = '';
+    }
+
+    uninstall(){
+        this.destory();
+    }
+}

package/src/components/charts/components/FlowChart/index.less

@@ -0,0 +1,90 @@
+/**
+ * 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.
+ *
+ */
+.fc-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.fc-node-container {
+    width: 100%;
+    height: 100%;
+}
+
+.fc-tag-container {
+    width: 100%;
+    height: 100%;
+}
+
+.fc-absolute {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+}
+
+.fc-line {
+    fill: transparent;
+    stroke-linejoin: round;
+    pointer-events: stroke;
+    marker-end: url(#markerArrow);
+    &.fc-noArrow{
+        marker-end: unset;
+    }
+}
+
+.fc-arrow {
+    /* fill: #c2c2c2; */
+}
+
+
+.fc-node {
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    & > div{
+        flex-grow: 0;
+        flex-shrink: 0;
+    }
+}
+
+.fc-line-up-tag{
+    position: absolute;
+    line-height: 18px;
+    text-align: center;
+    border-radius: 10px;
+    background-color: #494949;
+    .fc-line-tag-main{
+        color: #ffffff;
+        font-size: 12px;
+    }
+    .fc-line-tag-unit{
+        color: #999999;
+        font-size: 12px;
+    }
+}
+
+.fc-trans-point {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 6px;
+  height: 8px;
+  offset-distance: 0%;
+  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT7lnIbop5JXaUZp5aSH5Lu9IDE3PC90aXRsZT4KICAgIDxnIGlkPSLnlKjmiLfmpoLop4giIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLnlLvmnb8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzU2LjAwMDAwMCwgLTYwNi4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9IuWchuinkldpRmnlpIfku70tMTciIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIzNjAuMDAwMDU5LCA2MTAuMDAwMDAwKSBzY2FsZSgtMSwgMSkgdHJhbnNsYXRlKC0yMzYwLjAwMDA1OSwgLTYxMC4wMDAwMDApIHRyYW5zbGF0ZSgyMzU2LjAwMDA1OSwgNjA1Ljk5OTk0MSkiPgogICAgICAgICAgICAgICAgPGcgaWQ9IuWchuinkldpRmnlpIfku70tMTYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuMDAwMDAwLCA0LjAwMDA1OSkgc2NhbGUoLTEsIDEpIHRyYW5zbGF0ZSgtNC4wMDAwMDAsIC00LjAwMDA1OSkgdHJhbnNsYXRlKDAuMDAwMDAwLCAwLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSLnn6nlvaIiIHg9IjAiIHk9IjAiIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMi4yMDAwNTg4NSwwLjQwMDA1ODg1MiBDMi41MzE0Mjk3LC0wLjA0MTc2ODk0ODEgMy4xNTgyMzEwNSwtMC4xMzEzMTE5OTggMy42MDAwNTg4NSwwLjIwMDA1ODg1MiBDNS42OTg3NDA5LDEuNzc0MDcwMzkgNi4xMjQwNzAzOSw0Ljc1MTM3NjggNC41NTAwNTg4NSw2Ljg1MDA1ODg1IEM0LjI4MDAwMTE3LDcuMjEwMTM1NzcgMy45NjAxMzU3Nyw3LjUzMDAwMTE3IDMuNjAwMDU4ODUsNy44MDAwNTg4NSBDMy4xNTgyMzEwNSw4LjEzMTQyOTcgMi41MzE0Mjk3LDguMDQxODg2NjUgMi4yMDAwNTg4NSw3LjYwMDA1ODg1IEMxLjg2ODY4OCw3LjE1ODIzMTA1IDEuOTU4MjMxMDUsNi41MzE0Mjk3IDIuNDAwMDU4ODUsNi4yMDAwNTg4NSBDMi42MDg1MjQ0Myw2LjA0MzcwOTY3IDIuNzkzNzA5NjcsNS44NTg1MjQ0MyAyLjk1MDA1ODg1LDUuNjUwMDU4ODUgQzMuODYxMzI4NjksNC40MzUwMzI0IDMuNjE1MDg1MywyLjcxMTMyODY5IDIuNDAwMDU4ODUsMS44MDAwNTg4NSBDMS45NTgyMzEwNSwxLjQ2ODY4OCAxLjg2ODY4OCwwLjg0MTg4NjY1MiAyLjIwMDA1ODg1LDAuNDAwMDU4ODUyIFoiIGlkPSLot6/lvoQtNiIgZmlsbD0iIzA1ODM1OCIgZmlsbC1ydWxlPSJub256ZXJvIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==');
+}
+

package/src/components/charts/components/FlowChart/insert.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 defendXSS from '../../util/defendXSS';
+const svgContainer =
+    `<svg class="fc-line-container fc-absolute" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
+        <defs id='fc-defs-container'>
+            <marker id="markerArrow" markerWidth="6" markerHeight="9" refX="5.8" refY="3.3" markerUnits="strokeWidth" class="fc-arrow" orient='auto'>
+                <path
+                    d="M3,0.5 L6.3,4.9 C6.63137085,5.3418278 6.5418278,5.96862915 6.1,6.3 C5.92690383,6.42982213 5.71637021,6.5 5.5,6.5 L0.5,6.5 C-0.0522847498,6.5 -0.5,6.05228475 -0.5,5.5 C-0.5,5.28362979 -0.429822128,5.07309617 -0.3,4.9 L3,0.5 Z"
+                    transform="translate(3.000000, 3.500000) rotate(-270.000000) translate(-3.000000, -3.500000) scale(0.9)">
+                </path>
+            </marker>
+        </defs>
+        <g class="fc-line-g"></g>
+    </svg>`;
+
+const htmlContainer = '<div class="fc-node-container fc-absolute" id="fc-node-container"></div>';
+const transContainer = '<div id="fc-trans-container"></div>';
+
+const tagContainer = '<div class="fc-tag-container fc-absolute" id="fc-tag-container"></div>';
+
+export function initContainer(dom) {
+    let container =
+        `<div id="fc-container" class="fc-container">
+            ${svgContainer}
+            ${tagContainer}
+            ${htmlContainer}
+            ${transContainer}
+        </div>`
+    dom.insertAdjacentHTML('beforeend', container);
+}

package/src/components/charts/components/FlowChart/util.js

@@ -0,0 +1,43 @@
+/**
+ * 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.
+ *
+ */
+// 判断数组
+function isArray(data) {
+    return Object.prototype.toString.call(data) === '[object Array]' ? true : false;
+}
+
+// 根据指定tag创建svg元素
+function createSvgByTag(tag) {
+    return document.createElementNS('http://www.w3.org/2000/svg', tag);
+}
+
+// 给指定dom添加class类名，classList为数组类型
+function addClass(dom, classes) {
+    if (isArray(classes)) {
+        classes.forEach(cls => {
+            dom.classList.add(cls);
+        });
+    } else {
+        classes&&dom.classList.add(classes);
+    }
+}
+
+// 给指定dom添加或更改属性
+function attr(dom, key, value) {
+    dom.setAttribute(key, value);
+}
+
+export {
+    attr,
+    isArray,
+    addClass,
+    createSvgByTag
+}

package/src/components/charts/components/FunnelChart/chartToken.js

@@ -0,0 +1,17 @@
+/**
+ * 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 Token from '../../feature/token';
+import {CHART_TYPE} from '../../util/constants'
+
+const chartToken = Token.getTokenByName(CHART_TYPE.FUNNEL)
+
+export default chartToken;

package/src/components/charts/components/FunnelChart/handleLegend.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.
+ *
+ */
+import cloneDeep from '../../util/cloneDeep';
+
+function sortData(sort, data) {
+  let legendName = [];
+  // 升序
+  if (sort == 'ascending') {
+    const sortedData = [...data].sort((a, b) => { return a.value - b.value })
+    sortedData.forEach((item) => {
+      legendName.push(item.name);
+    })
+  }
+  // 降序
+  else {
+    const sortedData = [...data].sort((a, b) => { return b.value - a.value })
+    sortedData.forEach((item) => {
+      legendName.push(item.name);
+    })
+  }
+  return legendName
+}
+
+// 设置legend顺序
+export function setLegend(baseOption) {
+  let dataUnit = cloneDeep(baseOption.series[0].data);
+  let data = [];
+  let sort = [];
+  if (dataUnit !== undefined) {
+    data = dataUnit;
+    sort = baseOption.series[0].sort;
+  }
+  let legendData = sortData(sort, data);
+  return legendData
+}

package/src/components/charts/components/FunnelChart/handleSeries.js

@@ -0,0 +1,77 @@
+/**
+ * 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 merge from '../../util/merge';
+import chartToken from './chartToken';
+
+// 默认的seies配置
+function getSeriesInit() {
+  return {
+    type: 'funnel',
+    width: '80%',
+    minSize: '0%',
+    maxSize: '100%',
+    left: 'center',
+    top: 60,
+    bottom: 60,
+    funnelAlign: 'center',
+    orient: 'vertical',
+    sort: 'descending',
+    gap: 1,
+    itemStyle: {
+      borderWidth: chartToken.borderWidth,
+      borderColor: chartToken.borderColor,
+    },
+    label: {
+      color: chartToken.labelColor,
+      position: 'inside',
+      show: true
+    },
+    data: undefined,
+  };
+}
+
+function getSeriesUnit(iChartOption) {
+  const { data, sort, size, position, gap, label } = iChartOption;
+  const seriesUnit = getSeriesInit()
+  data && (seriesUnit.data = data);
+  sort && (seriesUnit.sort = sort);
+  gap && (seriesUnit.gap = gap);
+  // 配置漏斗图的label
+  label && (merge(seriesUnit.label, label));
+  // 处理漏斗图的size和position
+  size && (merge(seriesUnit, size));
+  position && (merge(seriesUnit, position));
+  return seriesUnit
+}
+
+/**
+ * 组装echarts所需要的series
+ * @param {传入数据} iChartOption
+ * @returns
+ */
+export function setSeries(iChartOption) {
+  const { series: selfSeries } = iChartOption;
+  if (selfSeries && selfSeries.length !== 0) {
+    const newSelfSeries = selfSeries.map(seriesItem => {
+      const seriesUnit = getSeriesUnit(iChartOption);
+      merge(seriesUnit, seriesItem);
+      return seriesUnit
+    })
+    return newSelfSeries
+  }
+  const series = [];
+  const seriesUnit = getSeriesUnit(iChartOption);
+  series.push(seriesUnit);
+  return series;
+}
+

package/src/components/charts/components/FunnelChart/index.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.
+ *
+ */
+import init from '../../option/init';
+import { setLegend } from './handleLegend.js';
+import { setSeries } from './handleSeries.js';
+import PolarCoordSys from '../../option/PolarSys';
+import { CHART_TYPE } from '../../util/constants';
+
+export default class FunnelChart {
+
+  static name = CHART_TYPE.FUNNEL
+
+  constructor(iChartOption, chartInstance) {
+    this.baseOption = {};
+    this.iChartOption = {};
+    // 组装 iChartOption, 补全默认值
+    this.iChartOption = init(iChartOption);
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption(chartInstance);
+  }
+
+  updateOption(chartInstance) {
+    const iChartOption = this.iChartOption;
+    // 装载除series之外的其他配置   
+    PolarCoordSys(this.baseOption, iChartOption, CHART_TYPE.FUNNEL);
+    // 组装series 
+    this.baseOption.series = setSeries(iChartOption);
+    // 组装legend.data
+    this.baseOption.legend.data ? this.baseOption.legend.data : setLegend(this.baseOption);
+  }
+
+  getOption() {
+    return this.baseOption;
+  }
+}