@xiaomengqiang/charts/components/BaseChart/index.js

hcharts library for web visualization

import { insertStateDom, removeStateDom } from '../../util/init/insert.js';

/**
 * 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.
 *
 */
var BaseChart = /*#__PURE__*/function () {
  function BaseChart() {
    // 图表渲染容器
    this.dom = void 0;
    // 图表渲染配置
    this.option = void 0;
    // 必须实现 init 方法，初始化图表渲染容器
    if (this.init === undefined) {
      throw new Error('This chart has not overwrite "init" callback!');
    }
    // 必须实现 setSimpleOption 方法，初始化图表渲染配置
    if (this.setSimpleOption === undefined) {
      throw new Error('This chart has not overwrite "setSimpleOption" callback!');
    }
    // 必须实现 render 方法，调用时开始渲染图表
    if (this.render === undefined) {
      throw new Error('This chart has not overwrite "render" callback!');
    }
    // 必须实现 onRenderReady 方法
    if (this.onRenderReady === undefined) {
      throw new Error('This chart has not overwrite "onRenderReady" callback!');
    }
    // 必须实现 refresh 方法，传入新的option，刷新图表
    if (this.refresh === undefined) {
      throw new Error('This chart has not overwrite "refresh" callback!');
    }
    // 必须实现 refreshData 方法，传入新的data，刷新图表
    if (this.refreshData === undefined) {
      throw new Error('This chart has not overwrite "refreshData" callback!');
    }
    // 必须实现 setResize 方法，该方法一般手动调用，实现图表自适应宽度
    if (this.setResize === undefined) {
      throw new Error('This chart has not overwrite "setResize" callback!');
    }
    // 必须实现 uninstall 方法，清空图表容器，卸载所有监听事件
    if (this.uninstall === undefined) {
      throw new Error('This chart has not overwrite "uninstall" callback!');
    }
  }

  // 加载状态
  var _proto = BaseChart.prototype;
  _proto.showLoading = function showLoading(option) {
    insertStateDom(this.dom, 'loading', option);
  };
  _proto.hideLoading = function hideLoading() {
    removeStateDom(this.dom, 'loading');
  };
  _proto.closeLoading = function closeLoading() {
    removeStateDom(this.dom, 'loading');
  }

  // 错误状态
  ;
  _proto.showError = function showError(option) {
    insertStateDom(this.dom, 'error', option);
  };
  _proto.closeError = function closeError() {
    removeStateDom(this.dom, 'error');
  }

  // 空数据状态
  ;
  _proto.showEmpty = function showEmpty(option) {
    insertStateDom(this.dom, 'empty', option);
  };
  _proto.closeEmpty = function closeEmpty() {
    removeStateDom(this.dom, 'empty');
  }

  // 阶段空数据状态
  ;
  _proto.showStageEmpty = function showStageEmpty(option) {
    insertStateDom(this.dom, 'stage_empty', option);
  };
  _proto.closeStageEmpty = function closeStageEmpty() {
    removeStateDom(this.dom, 'stage_empty');
  }

  // 自定义数据状态
  ;
  _proto.showState = function showState(option) {
    insertStateDom(this.dom, 'custom', option);
  };
  _proto.closeState = function closeState() {
    removeStateDom(this.dom, 'custom');
  }

  // 传入自定义DOM
  ;
  _proto.showCustomDom = function showCustomDom(callback) {
    if (this.dom.getElementsByClassName('huicharts-custom-dom').length > 0) return;
    if (getComputedStyle(this.dom).position === 'static') {
      this.dom.style.position = 'relative';
    }
    var customContainer = document.createElement('div');
    customContainer.className = 'huicharts-custom-dom';
    customContainer.setAttribute('style', 'position:absolute;width:100%;height:100%;top:0px;left:0px;display:flex;justify-content:center;align-items:center');
    this.dom.appendChild(customContainer);
    callback(customContainer);
  }

  // 删除自定义DOM
  ;
  _proto.closeCustomDom = function closeCustomDom() {
    var customContainer = this.dom.getElementsByClassName('huicharts-custom-dom');
    this.dom.removeChild(customContainer[0]);
  };
  return BaseChart;
}();
export { BaseChart as default };