@ebiz/designer-components 0.0.18

package/src/components/charts/components/MilestoneChart/Layout.js

@@ -0,0 +1,183 @@
+/**
+ * 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.
+ *
+ */
+/**
+ * 根据传入数据的 nodes 和 edges 计算出绘制流程图需要的位置信息
+ * 包括节点位置和边的位置
+ */
+export default class Layout {
+  data;
+  option;
+  // 节点最小宽度
+  minItemWidth = 120;
+  size = 12;
+
+  constructor(data, option, dom) {
+    this.dom = dom;
+    this.scaleCon = this.dom.getElementsByClassName('mc-scales')[0];
+    
+    this.data = data;
+    this.option = option;
+    let len = data.length;
+    option.minItemWidth = this.option.minItemWidth || this.minItemWidth;
+    let maxSize = option.itemStyle.iconSize;
+    maxSize = data[0].icon && data[0].icon.size > maxSize ? data[0].icon.size : maxSize;
+    maxSize = data[len - 1].icon && data[len - 1].icon.size > maxSize ? data[len - 1].icon.size : maxSize;
+    this.option.maxSize = maxSize;
+    this.conWidth = this.scaleCon.offsetWidth - maxSize ;
+  }
+
+  /**
+   * 执行位置算法
+   */
+  // 根据用户传入数据与dom宽度，计算节点对应位置
+  computePositions(option) {
+    const data = option.data;
+    const len = data.length;
+    let minItemWidth = option.minItemWidth;
+    let dateSpan = data[len - 1].date - data[0].date; // 总时间
+    let minSpan = (minItemWidth / this.conWidth) * dateSpan; // 最小时间间隔宽度
+    const minDiff = this.getMinDiff(data); // 获取所有时间中最下间隔值
+    // 预留两边的间距，用于两边内容可正常显示
+    let extrasWidth = minDiff < minSpan ? minItemWidth : (minDiff / dateSpan) * this.conWidth; 
+    extrasWidth = extrasWidth == Infinity ? this.conWidth : extrasWidth
+    this.computePitch(extrasWidth);
+    let newConWidth = this.conWidth - extrasWidth - 20;
+    data.forEach((item, index) => {
+      const prev = data[index - 1];
+      const prevDate = prev && prev.date || 0;
+      const itemDate = item && item.date || 0;
+      let differdate = itemDate - prevDate;
+      item.min = false;
+      if (prev && differdate < minSpan) {
+        item.min = true;
+        item.x = minItemWidth;
+        newConWidth -= minItemWidth;
+        dateSpan -= differdate;
+      }
+      else {
+        item.x = 0;
+      }
+    });
+    data.forEach((item, index) => {
+      const current = this.option.current || { date: 0 };
+      const prev = data[index - 1];
+      const prevDate = prev && prev.date || 0;
+      const itemDate = item && item.date || 0;
+      if (prev && item.min) {
+        prev.width = item.x
+        item.x = item.x + prev.x;
+      }
+      else if (!prev) {
+        item.x = 0;
+      }
+      else {
+        let differdate = itemDate - prevDate;
+        let width = differdate / dateSpan * newConWidth;
+        if (width < minItemWidth) {
+          width = minItemWidth;
+        }
+        item.x = prev.x + width;
+        prev.width = width;
+      }
+      //计算‘今天’的位置
+      if (current.date === item.date) {
+        current.x = item.x;
+      }
+      else if ((prev && prev.date < current.date) && (current.date < item.date)) {
+        current.x = prev.x + (((current.date - prev.date) / (item.date - prev.date)) * prev.width );
+      }
+    });
+    option.newConWidth = newConWidth;
+    return option;
+  }
+
+  // 根据用户传入数据与dom宽度，平均分配节点对应位置
+  computeAveragePositions(option) {
+    const data = option.data;
+    const len = data.length;
+    let minItemWidth = option.minItemWidth;
+    let width = this.conWidth / len;
+    width = width < minItemWidth ? minItemWidth : width;  
+    this.computePitch(width)
+    let newConWidth = this.conWidth - width
+    data.forEach((item, index) => {
+      const current = this.option.current || { date: 0 };
+      const prev = data[index - 1];
+      item.width = width;
+      item.x = width*index;
+      if (current.date === item.date) {
+        current.x = item.x;
+      }
+      else if ((prev && prev.date < current.date) && current.date < item.date) {
+        current.x = prev.x + (((current.date - prev.date) / (item.date - prev.date)) * prev.width );
+      }
+    });
+    option.newConWidth = newConWidth;
+    return option;
+  }
+
+  // 获取date最小间值
+  getMinDiff(arr) {
+    let minDiff = Infinity;
+    for (let i = 1; i < arr.length; i++) {
+      const diff = Math.abs(arr[i].date - arr[i - 1].date );
+      if (diff < minDiff) {
+        minDiff = diff;
+      }
+    }
+    return minDiff;
+  }
+
+  // 设置含tips的节点定位信息
+  setTipsPosition(option) {
+    const layout = option.layout;
+    const alignment = option.alignment;
+    option.data.forEach((item, index) => {
+      if (layout == 'interlaced') {
+        item.position = index % 2 === 0 ? 'down-' + alignment : 'up-' + alignment;
+      } else {
+        item.position = layout+ '-' +alignment
+      }
+    });
+    option.data.forEach(item => {
+      item.dom.classList.add(item.position);
+    });
+  }
+
+  // 计算两边预留间距  26为两侧操作按钮大小
+  computePitch(width) {
+    width = width - 16;
+    let num = [];
+    let padding = '';
+    const option = this.option;
+    let data = option.data;
+    const len = data.length;
+    option.extrasWidth = width;
+    if (option.alignment === 'left') {
+      num = width;
+      padding = '0 ' + num + 'px' + ' 0 26px';
+      num = [num];
+      data[len-1].tipsWidth = width
+    } else if (option.alignment === 'right') {
+      num = width;
+      padding = '0 26px 0 ' + num + 'px';
+      num = [num];
+      data[0].tipsWidth = width
+    } else {
+      num = [width / 2 , width / 2];
+      padding = '0 ' + num[1] + 'px' + ' 0 ' + num[0] + 'px';
+      data[len-1].tipsWidth = width
+    }
+    option.padding = padding;
+    option.newPitch = num;
+  }
+}

package/src/components/charts/components/MilestoneChart/Node.js

@@ -0,0 +1,319 @@
+/**
+ * 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 Layout from './Layout';
+import { insertIcon } from './insertIcon';
+import defendXSS from '../../util/defendXSS';
+import tips from '../../util/tips';
+import { insertSvg } from './insertSvg';
+export const NODE_ID_PREFIX = 'mc-node-';
+
+export default class NodeManager {
+  // 节点数据
+  data;
+  layoutNodes;
+  dom;
+  // 节点容器
+  scaleCon = null;
+  NODE_ID_PREFIX = 'mc-node-';
+  defaultColor = '#F3F3F3';
+  
+  constructor(data, option, container) {
+    this.option = option;
+    this.dom = container;
+    this.render = option.render;
+    
+  }
+
+  create(data, option, Theme) {
+    this.option.Theme = Theme;
+    this.scaleCon = this.dom.getElementsByClassName('mc-scales')[0];
+    this.layoutNodes = new Layout(data, option, this.dom);
+    
+    this.createNodes(this.option, this.scaleCon);
+    if (this.option.assign == 'date') {
+      this.option = this.layoutNodes.computePositions(this.option);
+    } else {
+      this.option = this.layoutNodes.computeAveragePositions(this.option);
+    }
+    this.layoutNodes.setTipsPosition(this.option);
+    if (this.option.current) this.createCurrentNode(this.option.current, this.dom.getElementsByClassName('mc-current')[0]);
+    
+  }
+
+  /**
+   * 创建tooltip节点
+   */
+  createTooltipDom(nodeDom, data) {
+    let tooltipDom = document.createElement('div');
+    tooltipDom.classList.add('mc-scales-item-tooltip');
+    if (this.option.tooltip) {
+      this.option.tooltip(tooltipDom, data);
+    }
+    else {
+      const date = new Date(data.date * 1000); // 将时间戳转换成毫秒
+      const year = date.getFullYear();
+      const month = date.getMonth() + 1;
+      const day = date.getDate();
+      tooltipDom.textContent = year + '/' + month + '/' + day;
+    }
+    nodeDom.appendChild(tooltipDom);
+  }
+
+  /**
+   * 创建节点
+   */
+  createNode(ndata,nextData,size) {
+    let { id, render, date,  icon, tilte, tooltip, prompt, promptIcon } = ndata;
+    if (!date) tips.error('The second parameter date is required');
+    this.getDefBg(ndata,this.option.Theme);
+    let nodeDom = document.createElement('div');
+    let lineBg = defendXSS(nextData && nextData.line && (nextData.line.color || nextData.line.defColor) || ndata.line.defColor);
+    let lineHeight = defendXSS(nextData && nextData.line && nextData.line.height || ndata.line && ndata.line.height || 8);
+    let classList = [];
+    let tooltipClass = tooltip && tooltip.show ? 'tooltip' : '';
+    let firstLine = '';
+    size = size > 48 ? 48 : size;
+    if (this.option.data && this.option.data.length === 1) {
+      ndata.width = this.dom.offsetWidth - 40;
+      lineBg = defendXSS(ndata.line.color || ndata.line.defColor);
+      firstLine = 'block'
+    }
+    nodeDom.innerHTML = `<div class="mc-scales-item-line" style="background:${lineBg};height:${lineHeight}px;width: ${defendXSS(ndata.width || ndata.tipsWidth)}px;display:${firstLine}"></div>
+                         <div class='mc-scales-item-icon ${tooltipClass}' style="width:${defendXSS(size)}px;height:${defendXSS(size)}px;">
+                         </div>`;
+    nodeDom.style.left = ndata.x + 'px';
+    classList.push('mc-scales-item');
+    if (icon && icon.name) classList.push(icon.name);
+    if (ndata.position) classList.push(ndata.position);
+    if (this.option.line) classList.push('line');
+    nodeDom.classList.add(...classList);
+    nodeDom.id = this.NODE_ID_PREFIX + id;
+    const iconDom = nodeDom.getElementsByClassName('mc-scales-item-icon')[0];
+    insertSvg(iconDom, { theme: this.option.theme, icon}, this.option.Theme);
+    // 高亮标注
+    if (prompt) {
+      let promptDom = document.createElement('img');
+      promptDom.classList.add('prompt');
+      promptDom.src = promptIcon ? promptIcon : insertIcon('prompt');
+      iconDom.appendChild(promptDom);
+    }
+    // 悬浮显示
+    if (tooltip && tooltip.show) {
+      this.createTooltipDom(nodeDom, ndata);
+    }
+    // 节点信息
+    let renderFun = render || this.render;
+    let tipsDom = this.createTips(renderFun, ndata);
+    tipsDom && nodeDom.appendChild(tipsDom);
+    return nodeDom;
+  }
+
+  getDefBg(data,Theme) {
+    let color = '';
+    const name = data.icon.name || '';
+    switch (name) {
+      case 'success':
+          color = Theme.config.colorState.colorSuccess;
+          break;
+      case 'done':
+          color = Theme.config.colorState.colorSuccess;
+          break;
+      case 'doing':
+          color = Theme.config.colorState.colorInfo;
+          break;
+      case 'todo':
+          color = Theme.config.colorState.colorNone;
+          break;
+      default:
+          color = Theme.config.colorState.colorNone;
+          break;
+    }
+    if (!data.line) data.line = {};
+    data.line.defColor = color;
+    data.icon.defColor = color;
+  }
+
+  /**
+   * 创建节点, 用户数据是否包含render
+   */
+  createTips(renderFun, ndata) {
+    let tipsDom = document.createElement('div');
+    tipsDom.style['border-color'] = ndata.line && (ndata.icon.color || ndata.icon.defColor) || this.defaultColor;
+    tipsDom.classList.add('mc-scales-item-tips');
+    tipsDom.style['max-width'] = (ndata.width || (ndata.tipsWidth)) + 'px';
+    if (renderFun) {
+      renderFun(tipsDom, ndata);
+      this.createTipsDom(tipsDom, ndata);
+    }else {
+      const date = new Date(ndata.date * 1000); // 将时间戳转换成毫秒
+      const year = date.getFullYear();
+      const month = date.getMonth() + 1;
+      const day = date.getDate();
+      tipsDom.textContent = year + '/' + month + '/' + day;
+      this.createTipsDom(tipsDom, ndata);
+    }
+    return tipsDom;
+  }
+
+  /**
+   * 创建节点dom
+   */
+  createTipsDom(tipsDom, data) {
+    // 克隆一个元素用于计算宽高
+    let cloneNode = tipsDom.cloneNode(true);
+    cloneNode.style.opacity = 0;
+    document.body.appendChild(cloneNode);
+    // 获取div的宽度和高度
+    const prevWidth = cloneNode.offsetWidth;
+    // 移除div元素
+    document.body.removeChild(cloneNode);
+    data.tipsWidth = prevWidth;
+    return tipsDom;
+  }
+
+  /**
+   * 根据用户传入数据生成节点Dom，并插入进container中
+   */
+  createNodes(option, scaleCon) {
+    let self = this;
+    option.data.forEach((node,index) => {
+      let nodeDom = this.createNode(node,option.data[index+1], node.icon && node.icon.size || option.itemStyle && option.itemStyle.iconSize || 12);
+      node.dom = nodeDom;
+      scaleCon.appendChild(nodeDom);
+    });
+    this.initHoverEvent();
+    this.initItemClickEvent();
+    setTimeout(() => {
+      self.setActions();
+    }, 100);
+    
+  }
+
+  setActions() {
+    const domWidth = this.dom.offsetWidth;
+    const contentWidth = this.dom.scrollWidth;
+    if (domWidth < contentWidth) {
+      const prevDom = this.dom.getElementsByClassName('mc-btn-prev')[0];
+      const nextDom = this.dom.getElementsByClassName('mc-btn-next')[0];
+      prevDom.style.display = 'block';
+      nextDom.style.display = 'block';
+      this.initHandoffEvent();
+    }
+  }
+
+  //  创建今天节点
+  createCurrentNode(current, dom) {
+    let className = 'top';
+    const data = this.option.data;
+    data.forEach((item, index) => {
+      let prev = data[index - 1];
+      const tipsWidth = item.dom && item.dom.getElementsByClassName('mc-scales-item-tips')[0].scrollWidth || 0;
+      const prevTipsWidth = prev && prev.dom.getElementsByClassName('mc-scales-item-tips')[0].scrollWidth || 0;
+      const itemPos = item.position.split('-');
+      const prevPos = prev && prev.position.split('-') || '';
+      if (current.x === item.x) {
+        if (itemPos[0] === 'up') {
+          className = 'bottom';
+        }
+      }
+      else if ((prev && prev.x < current.x) && current.x < item.x) {
+        if (prevPos[0] === 'up' && current.x < prev.x + prevTipsWidth) {
+          className = 'bottom';
+        }
+        if (itemPos[0] === 'up' && current.x > item.x - tipsWidth) {
+          className = 'bottom';
+        }
+      }
+    });
+    dom.classList.add(className);
+    dom.getElementsByClassName('mc-current-text')[0].textContent = current.tip;
+    dom.style.left = current.x + 'px';
+    if (current.x == undefined) {
+      dom.style.display = 'none'
+    }
+    insertSvg(dom, { theme: this.option.theme, icon:{src: current.icon || '' ,name: 'current'}}, this.option.Theme);
+  }
+
+  // 绑定hover事件
+  initHoverEvent() {
+    let elements = this.scaleCon.getElementsByClassName('tooltip');
+    Array.prototype.forEach.call(elements, (element) => {
+      // 鼠标滑入
+      element.addEventListener('mouseover', function() {
+        let parentNode = element.parentNode;
+        let tooltipDom = parentNode.getElementsByClassName('mc-scales-item-tooltip')[0];
+        tooltipDom.style.display = 'block';
+        element.style.zIndex = 2;
+        let x = parentNode.offsetLeft;
+        tooltipDom.style.left = '-' + ((x - tooltipDom.offsetWidth / 2) >= 0 ? tooltipDom.offsetWidth / 2 : 0) + 'px';
+        tooltipDom.style.top = 'calc(50% - ' + (tooltipDom.offsetHeight / 2 + 24) + 'px)';
+      });
+      // 鼠标移出
+      element.addEventListener('mouseout', function () {
+        let parentNode = element.parentNode;
+        let tooltipDom = parentNode.getElementsByClassName('mc-scales-item-tooltip')[0];
+        tooltipDom.style.display = 'none';
+      });
+    });
+  }
+
+  // 绑定click事件
+  initItemClickEvent() {
+    let elements = this.scaleCon.getElementsByClassName('mc-scales-item');
+    let onClick = this.option.onClick && this.option.onClick;
+    this.option.data.forEach((item, index) => {
+      elements[index].addEventListener("click", function() {
+        onClick(elements[index], item);
+      });
+    });
+  }
+
+  // 绑定前后切换click事件
+  initHandoffEvent() {
+    let position = 0;
+    let prev = false;
+    let next = true;
+    let num = this.option.newPitch;
+    const alignment = this.option.alignment;
+    num = alignment === 'left' ? 30 : alignment === 'right' ? num[0] + 10 : num;
+    const domWidth = this.dom.offsetWidth;
+    const contentWidth = this.dom.getElementsByClassName('mc-content')[0].scrollWidth;
+    const contentDom = this.dom.getElementsByClassName('mc-content')[0];
+    const prevDom = this.dom.getElementsByClassName('mc-btn-prev')[0];
+    const nextDom = this.dom.getElementsByClassName('mc-btn-next')[0];
+    prevDom.onmousedown = () => {
+      if (!prev) return;
+      next = true;
+      position -= 0.5;
+      let left = position * domWidth;
+      const newnum = alignment == 'center' ? num[0] : num;
+      if (left <= newnum) {
+        left = 0;
+        position = 0;
+        prev = false;
+      };
+      contentDom.style.left = -left +'px'
+    };
+    nextDom.onmousedown = () => {
+      if (!next) return;
+      prev = true;
+      position += 0.5;
+      let left = position * domWidth;
+      const newnum = alignment == 'center' ? num[1] : num;
+      if (domWidth + left > contentWidth) {
+        left = contentWidth - domWidth + newnum;
+        next = false;
+      }
+      contentDom.style.left = -left +'px'
+    };
+  }
+}

package/src/components/charts/components/MilestoneChart/assets/next.svg

@@ -0,0 +1,7 @@
+<svg width="8.215332" height="14.839447" viewBox="0 0 8.21533 14.8394" 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="path4" d="M0.75293 14.0864L7.41943 7.41974L0.75293 0.753052" stroke="#FFFFFF" stroke-opacity="1.000000" stroke-width="1.500000" stroke-linejoin="round" stroke-linecap="round"/>
+</svg>

package/src/components/charts/components/MilestoneChart/assets/prev.svg

@@ -0,0 +1,7 @@
+<svg width="8.215332" height="14.839447" viewBox="0 0 8.21533 14.8394" 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="path4" d="M7.4624 14.0864L0.795898 7.41974L7.4624 0.753052" stroke="#FFFFFF" stroke-opacity="1.000000" stroke-width="1.500000" stroke-linejoin="round" stroke-linecap="round"/>
+</svg>

package/src/components/charts/components/MilestoneChart/assets/prompt.svg

@@ -0,0 +1,9 @@
+<svg width="40.000000" height="40.000000" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs/>
+	<g opacity="0.000000"/>
+	<path id="矢量 210" d="M2.32837 32.8119L17.3428 4.56494C18.0881 3.1626 19.856 2.60834 21.3091 3.29187C21.887 3.56366 22.3606 4.00916 22.656 4.56494L37.6707 32.8119C38.437 34.2541 37.8162 36.0065 36.3237 36.7084C35.9153 36.9005 35.4673 37 35.0139 37L4.98486 37C3.35181 37 2 35.7284 2 34.1237C2 33.6668 2.11279 33.2173 2.32837 32.8119Z" fill="#2070F3" fill-opacity="1.000000" fill-rule="evenodd"/>
+	<path id="矢量 250" d="M17.8408 15.3881C17.7129 14.1095 18.717 13 20.002 13C21.2871 13 22.291 14.1095 22.1631 15.3881L21.3215 23.806C21.2537 24.4838 20.6833 25 20.002 25C19.3208 25 18.7505 24.4838 18.6826 23.806L17.8408 15.3881ZM20.002 27.4C19.0078 27.4 18.2019 28.2059 18.2019 29.2C18.2019 30.1942 19.0078 31 20.002 31C20.9961 31 21.802 30.1942 21.802 29.2C21.802 28.2059 20.9961 27.4 20.002 27.4Z" fill="#FFFFFF" fill-opacity="1.000000" fill-rule="evenodd"/>
+</svg>

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

@@ -0,0 +1,108 @@
+/**
+ * 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 Node from './Node';
+import { initContainer } from './insertDom';
+import Token from '../../feature/token';
+import { CHART_TYPE } from '../../util/constants';
+
+export default class MilestoneChart extends BaseChart {
+
+  static name = CHART_TYPE.MILESTONE
+  // 图表渲染容器
+  dom;
+  // 图表所需数据
+  data;
+  // 生成节点和计算位置
+  Node;
+
+  constructor() {
+    super();
+    // 图表渲染容器
+    this.dom = null;
+    // 图表配置项
+    this.option = null;
+    // 图表容器的宽高变化监听器
+    this.resizeObserver = null;
+  }
+
+  // 初始化图表渲染容器
+  init(dom) {
+    this.dom = dom;
+  }
+
+  // 初始化图表渲染配置
+  setSimpleOption(chartName, option) {
+    this.option = option;
+  }
+
+  // 图表渲染回调
+  render() {
+    this.createDom();
+    this.setResizeObserver();
+  }
+
+  // 图表渲染完成时回调
+  onRenderReady(callback) {
+    this.renderCallBack = callback;
+  }
+
+  createDom() {
+    this.dom.innerHTML = '';
+    initContainer(this.dom, this.option);
+    this.data = this.option.data;
+    const container = this.dom.getElementsByClassName('mc-container')[0];
+    this.Node = new Node(this.data, this.option, container);
+    this.Node.create(this.data, this.option, Token);
+    container.style.setProperty('--operationButtonBgColor', Token.config.colorBoard.blue.colorBlue50);
+    container.style.setProperty('--tooltipBgColor', Token.config.tooltipBg);
+    container.style.setProperty('--tooltipBoxShadow', `0 ${Token.config.tooltipShadowOffsetY}px ${Token.config.tooltipShadowBlur}px 0 ${Token.config.tooltipShadowColor}`);
+    container.style.setProperty('--currentTextColor', Token.config.titleTextColor);
+    container.style.setProperty('--newPitch', this.option.padding || '0, 20px');
+    container.style.setProperty('--maxWidth', this.option.itemStyle.maxWidth+'px' || '160px');
+    container.style.setProperty('--maxHeight', this.option.itemStyle.maxHeight+'px' || '120px');
+    this.renderCallBack && this.renderCallBack(this);
+  }
+
+  // 图表刷新，刷新配置项
+  refresh(option) {
+    this.option = option;
+    this.createDom();
+  }
+
+  // 图表刷新，仅刷新数据
+  refreshData() {
+    this.createDom();
+  }
+
+  // 刷新图表自适应宽度
+  setResize() {
+    this.createDom();
+  }
+
+  // 监听容器变化
+  setResizeObserver() {
+    this.resizeObserver = new ResizeObserver(entries => {
+      this.setResize();
+    });
+    this.resizeObserver.observe(this.dom);
+  }
+
+  // 销毁图表
+  uninstall() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+    this.dom.innerHTML = '';
+  }
+}