@ebiz/designer-components 0.0.46 → 0.0.48

package/src/components/charts/components/SnowFlakeChart/NodeManager.js

@@ -1,240 +1,240 @@
-/**
- * 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 { setStyle, pxToNumber, insertDom, getStyle, createDom, judgeDisabled, moveToCenter, boundaryJudge } from './util.js';
-import { defaultToolTip } from './defaultOption.js';
-export default class NodeManager {
-  dom;
-  wrapper; // 节点需要多插入一层dom结构，用于回正内容
-  constructor(container, data, deg, isCenter, branchInstance) {
-    const { drag, snowInstance, chartContainer, option, equalDeg, wrapper: branchWrapper } = branchInstance;
-    this.container = container;
-    this.data = data;
-    this.option = option;
-    this.deg = deg;
-    this.isCenter = isCenter;
-    this.chartContainer = chartContainer;
-    this.drag = drag;
-    this.snowInstance = snowInstance;
-    this.equalDeg = equalDeg;
-    this.branchWrapper = branchWrapper;
-    this.branchInstance = branchInstance;
-    this.mount();
-    // 下钻后移动选中dom到视口中心(删除会由于恢复全网视口時dom尺寸变化导致雪花图移位)
-    moveToCenter(branchInstance, this, true);
-  }
-
-  mount() {
-    // 创建每一个节点容器
-    let domClass = this.isCenter ? 'sfc-node-center' : 'sfc-node-item';
-    if (this.data.faultNumber) {
-      domClass += ' sfc-node-error';
-    }
-    this.dom = insertDom(this.container, { class: domClass });
-    this.wrapper = insertDom(this.dom);
-    // 绑定事件
-    this.addEvent();
-    // 中心节点插入内容
-    this.isCenter && this.insertContent();
-    // 全网视图下，添加悬浮提示框
-    this.addToolTip();
-  }
-
-  returnWrapper() {
-    return this.wrapper;
-  }
-
-  addEvent() {
-    this.dom.addEventListener('click', this.nodeClick);
-    this.container.addEventListener('click', this.containerClick);
-  }
-
-  nodeClick = (e) => {
-    if (this.drag.draging || this.data.disabled) { // 拖动中、disabled不触发点击
-      return;
-    }
-    // 每次只能高亮一个节点，移除其他节点的高亮状态
-    this.snowInstance.removeNodeActive();
-    // 非中心dom添加点击下钻
-    !this.isCenter && this.drillDown(true, true, true);
-    this.findSameDom();
-    if (this.data.click) {
-      this.data.click(e, { ...this.data, dom: this.dom });
-    }
-    // 点击后重新调用node的render方法,去刷新高亮状态。以及根据当前的scale，是否显隐
-    !this.isCenter && this.insertContent();
-  };
-
-  // 叶子点击下钻,会重构dom，因此需要找到mac一致的新叶子dom，添加高亮类名。
-  findSameDom() {
-    this.snowInstance.branchs.forEach((item) => {
-      item.leafsArr.forEach((leaf) => {
-        if (leaf.data.mac === this.data.mac) {
-          this.dom = leaf.node.dom;
-          this.wrapper = leaf.node.wrapper;
-        }
-      });
-    });
-    this.dom.classList.add('nodeActive');
-  }
-
-  containerClick = (e) => {
-    if (this.drag.draging || this.container.parentNode.classList.contains('noLeafChild')) {
-      return;
-    }
-    if (e.target === this.container) {
-      // 容器允许点击下钻，下钻后将容器展示在视口中心
-      this.drillDown(true, false, true);
-      if (this.data.containerClick) {
-        this.data.containerClick(e, this.data);
-      }
-    }
-  };
-
-  setAngle() {
-    // 获取整个雪花图容器与每个节点的宽度，计算旋转中心
-    const containerWidth = getStyle(this.container, 'width'); // 节点所在分组容器的宽度
-    const nodeItemWidth = getStyle(this.wrapper, 'width');  // 节点自身的宽度
-    setStyle(this.dom, {
-      transform: ` translate(-50%,-50%) rotate(${this.deg}deg)`,
-      transformOrigin: `${-1 * (pxToNumber(containerWidth) / 2 - pxToNumber(nodeItemWidth) / 2)}px center`,
-    });
-    setStyle(this.wrapper, {
-      transform: `rotate(${360 - this.deg}deg)`,
-    });
-  }
-
-  insertContent() {
-    judgeDisabled(this.option, [this.dom], false, this.data, true);
-    const renderFun = this.data.render || this.option.render;
-    if (renderFun) {
-      renderFun({
-        nodeContainer: this.wrapper,
-        tagContainer: createDom()
-      }, this.data, this.option, this.drag.scale);
-    }
-  }
-
-  setSubRootWidth() {
-    if (this.option.overAll) {
-      // render完毕，更新宽高
-      setStyle(this.branchWrapper, {
-        width: pxToNumber(getStyle(this.wrapper, 'width')) + 50 * 2 + 'px',
-        height: pxToNumber(getStyle(this.wrapper, 'height')) + 50 * 2 + 'px',
-      });
-    }
-  }
-
-  addToolTip() {
-    let toolTip = document.querySelector('.sfc-overAllTip');
-    if (!toolTip) { // 在家庭视口需要将其隐藏
-      toolTip = document.createElement('div');
-      toolTip.className = 'sfc-overAllTip';
-      document.documentElement.appendChild(toolTip);
-    }
-    if (this.option.overAll) {
-      const toolTipFun = this.data.toolTip || this.option.toolTip || defaultToolTip;
-
-      if (this.isCenter) {
-        this.wrapper.addEventListener('mousemove', (e) => {
-          e.stopPropagation();
-          toolTip.style.display = 'none';
-        });
-      } else {
-        this.wrapper.addEventListener('mousemove', (e) => {
-          if (this.drag.startPos) { // 此处用draging判断会出问题
-            toolTip.style.display = 'none';
-            return;
-          }
-          e.stopPropagation();
-          toolTip.style.display = 'block';
-          const { x, y } = boundaryJudge(e, this.drag.container, toolTip);
-          toolTip.style.left = `${x}px`;
-          toolTip.style.top = `${y}px`;
-          toolTip.innerHTML = toolTipFun(this.data, true);
-        });
-        this.wrapper.addEventListener('mouseleave', (e) => {
-          toolTip.style.display = 'none';
-        });
-      }
-
-      this.container.addEventListener('mousemove', (e) => {
-        if (this.drag.startPos || this.container.parentNode.classList.contains('noLeafChild')) {
-          toolTip.style.display = 'none';
-          return;
-        }
-        toolTip.style.display = 'block';
-        const { x, y } = boundaryJudge(e, this.drag.container, toolTip);
-        toolTip.style.left = `${x}px`;
-        toolTip.style.top = `${y}px`;
-        toolTip.innerHTML = toolTipFun(this.data, false);
-        this.container.style.backgroundImage = 'radial-gradient(rgba(89,144,253,0) 0%,rgba(89,144,253,.1) 100%)';
-      });
-      this.container.addEventListener('mouseleave', (e) => {
-        toolTip.style.display = 'none';
-        this.container.style.backgroundImage = 'unset';
-      });
-    } else {
-      toolTip.style.display = 'none';
-    }
-  }
-
-  // 刷新数据的方法
-  refreshData(data) {
-    this.data = data !== undefined ? data : this.data;
-    this.insertContent();
-    this.upDateNodeClass();
-  }
-
-  // 判断data.faultNumber字段,更新node节点类名
-  upDateNodeClass() {
-    const { faultNumber } = this.data;
-    const classList = this.dom.classList;
-    if (faultNumber) {
-      classList.add('sfc-node-error');
-    } else {
-      classList.remove('sfc-node-error');
-    }
-  }
-
-  // 点击下钻（node、tag、lina、次级根节点node修改样式）
-  drillDown(drill = true, leafTrigger, clickTrigger, mac) {
-    // 下钻
-    if (drill) {
-      // 已经是下钻状态，如果再次点击下钻，直接return
-      if (this.option.overAll === false && clickTrigger) {
-        return;
-      }
-      this.option.overAll = false;
-      this.chartContainer.classList.remove('overAll');
-    }
-    else {
-      this.option.overAll = true;
-      this.chartContainer.classList.add('overAll');
-    }
-    // 重刷dom结构
-    this.snowInstance.branchs[0].reRender(mac || this.data.mac, leafTrigger);
-    // 如果是通过api下钻，不是点击，那么下钻后调用缩放自适应。
-    // 如果是点击下钻，那么不走自适应，因为自适应后若scale<0.75,点击的终端看不见，交互不友好
-    if (drill && !clickTrigger) {
-      this.snowInstance.findFitScale();
-    } else {
-      this.drag.reset();
-    }
-    // 下钻后，如果scale在0.5-0.75之间，那么节点是隐藏状态。不应该让其居中，改变为整个图表容器居中
-    // 下钻后，自适应能力不需要触发，滚轮才触发。或者首次进入图表就是家庭视口才自适应
-    // this.snowInstance.findFitScale(() => {
-    //   if (this.drag.scale >= 0.5 && this.drag.scale <= 0.75) {
-    //     this.drag.moveTargetToCenter(this.chartContainer);
-    //   }
-    // });
-  }
+/**
+ * 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 { setStyle, pxToNumber, insertDom, getStyle, createDom, judgeDisabled, moveToCenter, boundaryJudge } from './util.js';
+import { defaultToolTip } from './defaultOption.js';
+export default class NodeManager {
+  dom;
+  wrapper; // 节点需要多插入一层dom结构，用于回正内容
+  constructor(container, data, deg, isCenter, branchInstance) {
+    const { drag, snowInstance, chartContainer, option, equalDeg, wrapper: branchWrapper } = branchInstance;
+    this.container = container;
+    this.data = data;
+    this.option = option;
+    this.deg = deg;
+    this.isCenter = isCenter;
+    this.chartContainer = chartContainer;
+    this.drag = drag;
+    this.snowInstance = snowInstance;
+    this.equalDeg = equalDeg;
+    this.branchWrapper = branchWrapper;
+    this.branchInstance = branchInstance;
+    this.mount();
+    // 下钻后移动选中dom到视口中心(删除会由于恢复全网视口時dom尺寸变化导致雪花图移位)
+    moveToCenter(branchInstance, this, true);
+  }
+
+  mount() {
+    // 创建每一个节点容器
+    let domClass = this.isCenter ? 'sfc-node-center' : 'sfc-node-item';
+    if (this.data.faultNumber) {
+      domClass += ' sfc-node-error';
+    }
+    this.dom = insertDom(this.container, { class: domClass });
+    this.wrapper = insertDom(this.dom);
+    // 绑定事件
+    this.addEvent();
+    // 中心节点插入内容
+    this.isCenter && this.insertContent();
+    // 全网视图下，添加悬浮提示框
+    this.addToolTip();
+  }
+
+  returnWrapper() {
+    return this.wrapper;
+  }
+
+  addEvent() {
+    this.dom.addEventListener('click', this.nodeClick);
+    this.container.addEventListener('click', this.containerClick);
+  }
+
+  nodeClick = (e) => {
+    if (this.drag.draging || this.data.disabled) { // 拖动中、disabled不触发点击
+      return;
+    }
+    // 每次只能高亮一个节点，移除其他节点的高亮状态
+    this.snowInstance.removeNodeActive();
+    // 非中心dom添加点击下钻
+    !this.isCenter && this.drillDown(true, true, true);
+    this.findSameDom();
+    if (this.data.click) {
+      this.data.click(e, { ...this.data, dom: this.dom });
+    }
+    // 点击后重新调用node的render方法,去刷新高亮状态。以及根据当前的scale，是否显隐
+    !this.isCenter && this.insertContent();
+  };
+
+  // 叶子点击下钻,会重构dom，因此需要找到mac一致的新叶子dom，添加高亮类名。
+  findSameDom() {
+    this.snowInstance.branchs.forEach((item) => {
+      item.leafsArr.forEach((leaf) => {
+        if (leaf.data.mac === this.data.mac) {
+          this.dom = leaf.node.dom;
+          this.wrapper = leaf.node.wrapper;
+        }
+      });
+    });
+    this.dom.classList.add('nodeActive');
+  }
+
+  containerClick = (e) => {
+    if (this.drag.draging || this.container.parentNode.classList.contains('noLeafChild')) {
+      return;
+    }
+    if (e.target === this.container) {
+      // 容器允许点击下钻，下钻后将容器展示在视口中心
+      this.drillDown(true, false, true);
+      if (this.data.containerClick) {
+        this.data.containerClick(e, this.data);
+      }
+    }
+  };
+
+  setAngle() {
+    // 获取整个雪花图容器与每个节点的宽度，计算旋转中心
+    const containerWidth = getStyle(this.container, 'width'); // 节点所在分组容器的宽度
+    const nodeItemWidth = getStyle(this.wrapper, 'width');  // 节点自身的宽度
+    setStyle(this.dom, {
+      transform: ` translate(-50%,-50%) rotate(${this.deg}deg)`,
+      transformOrigin: `${-1 * (pxToNumber(containerWidth) / 2 - pxToNumber(nodeItemWidth) / 2)}px center`,
+    });
+    setStyle(this.wrapper, {
+      transform: `rotate(${360 - this.deg}deg)`,
+    });
+  }
+
+  insertContent() {
+    judgeDisabled(this.option, [this.dom], false, this.data, true);
+    const renderFun = this.data.render || this.option.render;
+    if (renderFun) {
+      renderFun({
+        nodeContainer: this.wrapper,
+        tagContainer: createDom()
+      }, this.data, this.option, this.drag.scale);
+    }
+  }
+
+  setSubRootWidth() {
+    if (this.option.overAll) {
+      // render完毕，更新宽高
+      setStyle(this.branchWrapper, {
+        width: pxToNumber(getStyle(this.wrapper, 'width')) + 50 * 2 + 'px',
+        height: pxToNumber(getStyle(this.wrapper, 'height')) + 50 * 2 + 'px',
+      });
+    }
+  }
+
+  addToolTip() {
+    let toolTip = document.querySelector('.sfc-overAllTip');
+    if (!toolTip) { // 在家庭视口需要将其隐藏
+      toolTip = document.createElement('div');
+      toolTip.className = 'sfc-overAllTip';
+      document.documentElement.appendChild(toolTip);
+    }
+    if (this.option.overAll) {
+      const toolTipFun = this.data.toolTip || this.option.toolTip || defaultToolTip;
+
+      if (this.isCenter) {
+        this.wrapper.addEventListener('mousemove', (e) => {
+          e.stopPropagation();
+          toolTip.style.display = 'none';
+        });
+      } else {
+        this.wrapper.addEventListener('mousemove', (e) => {
+          if (this.drag.startPos) { // 此处用draging判断会出问题
+            toolTip.style.display = 'none';
+            return;
+          }
+          e.stopPropagation();
+          toolTip.style.display = 'block';
+          const { x, y } = boundaryJudge(e, this.drag.container, toolTip);
+          toolTip.style.left = `${x}px`;
+          toolTip.style.top = `${y}px`;
+          toolTip.innerHTML = toolTipFun(this.data, true);
+        });
+        this.wrapper.addEventListener('mouseleave', (e) => {
+          toolTip.style.display = 'none';
+        });
+      }
+
+      this.container.addEventListener('mousemove', (e) => {
+        if (this.drag.startPos || this.container.parentNode.classList.contains('noLeafChild')) {
+          toolTip.style.display = 'none';
+          return;
+        }
+        toolTip.style.display = 'block';
+        const { x, y } = boundaryJudge(e, this.drag.container, toolTip);
+        toolTip.style.left = `${x}px`;
+        toolTip.style.top = `${y}px`;
+        toolTip.innerHTML = toolTipFun(this.data, false);
+        this.container.style.backgroundImage = 'radial-gradient(rgba(89,144,253,0) 0%,rgba(89,144,253,.1) 100%)';
+      });
+      this.container.addEventListener('mouseleave', (e) => {
+        toolTip.style.display = 'none';
+        this.container.style.backgroundImage = 'unset';
+      });
+    } else {
+      toolTip.style.display = 'none';
+    }
+  }
+
+  // 刷新数据的方法
+  refreshData(data) {
+    this.data = data !== undefined ? data : this.data;
+    this.insertContent();
+    this.upDateNodeClass();
+  }
+
+  // 判断data.faultNumber字段,更新node节点类名
+  upDateNodeClass() {
+    const { faultNumber } = this.data;
+    const classList = this.dom.classList;
+    if (faultNumber) {
+      classList.add('sfc-node-error');
+    } else {
+      classList.remove('sfc-node-error');
+    }
+  }
+
+  // 点击下钻（node、tag、lina、次级根节点node修改样式）
+  drillDown(drill = true, leafTrigger, clickTrigger, mac) {
+    // 下钻
+    if (drill) {
+      // 已经是下钻状态，如果再次点击下钻，直接return
+      if (this.option.overAll === false && clickTrigger) {
+        return;
+      }
+      this.option.overAll = false;
+      this.chartContainer.classList.remove('overAll');
+    }
+    else {
+      this.option.overAll = true;
+      this.chartContainer.classList.add('overAll');
+    }
+    // 重刷dom结构
+    this.snowInstance.branchs[0].reRender(mac || this.data.mac, leafTrigger);
+    // 如果是通过api下钻，不是点击，那么下钻后调用缩放自适应。
+    // 如果是点击下钻，那么不走自适应，因为自适应后若scale<0.75,点击的终端看不见，交互不友好
+    if (drill && !clickTrigger) {
+      this.snowInstance.findFitScale();
+    } else {
+      this.drag.reset();
+    }
+    // 下钻后，如果scale在0.5-0.75之间，那么节点是隐藏状态。不应该让其居中，改变为整个图表容器居中
+    // 下钻后，自适应能力不需要触发，滚轮才触发。或者首次进入图表就是家庭视口才自适应
+    // this.snowInstance.findFitScale(() => {
+    //   if (this.drag.scale >= 0.5 && this.drag.scale <= 0.75) {
+    //     this.drag.moveTargetToCenter(this.chartContainer);
+    //   }
+    // });
+  }
 }

package/src/components/charts/components/SnowFlakeChart/TagManager.js

@@ -1,80 +1,80 @@
-/**
- * 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 { setStyle, pxToNumber, insertDom, getStyle, createDom, judgeDisabled, setDirection, degPositive } from './util.js';
-import { tagPosition, direction } from './CommonConstant.js';
-export default class TagManager {
-  wrapper;
-  constructor(container, data, option, deg, isCenter, drag) {
-    this.container = container;
-    this.data = data;
-    this.option = option;
-    this.deg = degPositive(deg);
-    this.isCenter = isCenter;
-    this.direction = setDirection(this.deg);
-    this.tagPositionVal = tagPosition; // tag当前的定位值
-    this.drag = drag;
-    this.mount();
-  }
-
-  mount() {
-    this.dom = insertDom(this.container, { class: 'sfc-tag-item' });
-    this.wrapper = insertDom(this.dom);
-    // 判断是否来自于主网关传递给子网关的tag
-    this.isCenter && this.insertContent();
-  }
-
-  returnWrapper() {
-    return this.wrapper || createDom();
-  }
-
-  setAngle() {
-    const containerWidth = pxToNumber(getStyle(this.container, 'width')); // tag分组容器的宽度
-    const tagItemWidth = pxToNumber(getStyle(this.wrapper, 'width')); // tagdom自身的宽度 
-    let originPoint;
-    let tagStyle = {};
-    if (this.direction === direction['left']) {
-      originPoint = (containerWidth * ((this.tagPositionVal - 50) / 100) + tagItemWidth / 2);
-      tagStyle = {
-        right: `${this.tagPositionVal}%`,
-        transformOrigin: `${originPoint}px center`,
-        transform: `translate(50%,-50%) rotate(${this.deg - 180}deg)`,
-      };
-    } else {
-      originPoint = -1 * (containerWidth * ((this.tagPositionVal - 50) / 100) - tagItemWidth / 2);
-      tagStyle = {
-        left: `${this.tagPositionVal}%`,
-        transformOrigin: `${originPoint}px center`,
-        transform: `translate(-50%,-50%) rotate(${this.deg}deg)`,
-      };
-    }
-    setStyle(this.dom, { ...tagStyle });
-  }
-
-  insertContent() {
-    judgeDisabled(this.option, [this.dom]);
-    const renderFun = this.data.render || this.option.render;
-    if (renderFun) {
-      renderFun({
-        nodeContainer: createDom(),
-        tagContainer: this.wrapper
-      }, this.data, this.option, this.drag.scale);
-    }
-    // 重新计算tag的旋转角度和定位
-    this.setAngle();
-  }
-
-  // 刷新数据的方法
-  refreshData(data) {
-    this.data = data;
-    this.insertContent();
-  }
+/**
+ * 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 { setStyle, pxToNumber, insertDom, getStyle, createDom, judgeDisabled, setDirection, degPositive } from './util.js';
+import { tagPosition, direction } from './CommonConstant.js';
+export default class TagManager {
+  wrapper;
+  constructor(container, data, option, deg, isCenter, drag) {
+    this.container = container;
+    this.data = data;
+    this.option = option;
+    this.deg = degPositive(deg);
+    this.isCenter = isCenter;
+    this.direction = setDirection(this.deg);
+    this.tagPositionVal = tagPosition; // tag当前的定位值
+    this.drag = drag;
+    this.mount();
+  }
+
+  mount() {
+    this.dom = insertDom(this.container, { class: 'sfc-tag-item' });
+    this.wrapper = insertDom(this.dom);
+    // 判断是否来自于主网关传递给子网关的tag
+    this.isCenter && this.insertContent();
+  }
+
+  returnWrapper() {
+    return this.wrapper || createDom();
+  }
+
+  setAngle() {
+    const containerWidth = pxToNumber(getStyle(this.container, 'width')); // tag分组容器的宽度
+    const tagItemWidth = pxToNumber(getStyle(this.wrapper, 'width')); // tagdom自身的宽度 
+    let originPoint;
+    let tagStyle = {};
+    if (this.direction === direction['left']) {
+      originPoint = (containerWidth * ((this.tagPositionVal - 50) / 100) + tagItemWidth / 2);
+      tagStyle = {
+        right: `${this.tagPositionVal}%`,
+        transformOrigin: `${originPoint}px center`,
+        transform: `translate(50%,-50%) rotate(${this.deg - 180}deg)`,
+      };
+    } else {
+      originPoint = -1 * (containerWidth * ((this.tagPositionVal - 50) / 100) - tagItemWidth / 2);
+      tagStyle = {
+        left: `${this.tagPositionVal}%`,
+        transformOrigin: `${originPoint}px center`,
+        transform: `translate(-50%,-50%) rotate(${this.deg}deg)`,
+      };
+    }
+    setStyle(this.dom, { ...tagStyle });
+  }
+
+  insertContent() {
+    judgeDisabled(this.option, [this.dom]);
+    const renderFun = this.data.render || this.option.render;
+    if (renderFun) {
+      renderFun({
+        nodeContainer: createDom(),
+        tagContainer: this.wrapper
+      }, this.data, this.option, this.drag.scale);
+    }
+    // 重新计算tag的旋转角度和定位
+    this.setAngle();
+  }
+
+  // 刷新数据的方法
+  refreshData(data) {
+    this.data = data;
+    this.insertContent();
+  }
 }

package/src/components/charts/components/SnowFlakeChart/assets/down.svg

@@ -1,8 +1,8 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>ic_sort_down_lined</title>
-    <g id="ic_sort_down_lined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <rect id="矩形" fill="#D8D8D8" fill-rule="nonzero" opacity="0" x="0" y="0" width="24" height="24"></rect>
-        <path d="M10.5378223,20.4595993 L10.4086699,20.340022 L3.2348349,13.1661871 C2.94194168,12.8732939 2.94194168,12.3984201 3.2348349,12.1055269 C3.50109868,11.8392631 3.91775799,11.8150573 4.21136641,12.0329095 L4.29548953,12.1055325 L11.25,19.060189 L11.25,3.74996861 C11.25,3.33575501 11.5857864,2.99996861 12,2.99996861 C12.3796958,2.99996861 12.693491,3.28212251 12.7431534,3.64819801 L12.75,3.74996861 L12.75,19.061189 L19.7045458,12.1055679 C19.9707712,11.8393013 20.3874008,11.8150649 20.6810065,12.0328799 L20.765165,12.1055269 C21.0580582,12.3984201 21.0580582,12.8732939 20.765165,13.1661871 L13.5913301,20.340022 C13.1528193,20.7785328 12.5783942,20.9982551 12.0036796,20.9992941 C11.4813635,21.0000377 10.9588083,20.8201745 10.5378223,20.4595993 Z" id="形状结合" fill="#6D8FF0" fill-rule="nonzero"></path>
-    </g>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>ic_sort_down_lined</title>
+    <g id="ic_sort_down_lined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="矩形" fill="#D8D8D8" fill-rule="nonzero" opacity="0" x="0" y="0" width="24" height="24"></rect>
+        <path d="M10.5378223,20.4595993 L10.4086699,20.340022 L3.2348349,13.1661871 C2.94194168,12.8732939 2.94194168,12.3984201 3.2348349,12.1055269 C3.50109868,11.8392631 3.91775799,11.8150573 4.21136641,12.0329095 L4.29548953,12.1055325 L11.25,19.060189 L11.25,3.74996861 C11.25,3.33575501 11.5857864,2.99996861 12,2.99996861 C12.3796958,2.99996861 12.693491,3.28212251 12.7431534,3.64819801 L12.75,3.74996861 L12.75,19.061189 L19.7045458,12.1055679 C19.9707712,11.8393013 20.3874008,11.8150649 20.6810065,12.0328799 L20.765165,12.1055269 C21.0580582,12.3984201 21.0580582,12.8732939 20.765165,13.1661871 L13.5913301,20.340022 C13.1528193,20.7785328 12.5783942,20.9982551 12.0036796,20.9992941 C11.4813635,21.0000377 10.9588083,20.8201745 10.5378223,20.4595993 Z" id="形状结合" fill="#6D8FF0" fill-rule="nonzero"></path>
+    </g>
 </svg>