@xiaomengqiang/charts/core.js

hcharts library for web visualization

function _inheritsLoose(t, o) { t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
import tips from './util/tips.js';
import * as echarts from 'echarts';
import Theme from './feature/token/index.js';
import xssOption from './feature/xss/index.js';
import throttle from './util/throttle.js';
import axistip from './feature/axistip/index.js';
import BaseChart from './components/BaseChart/index.js';
import readScreen from './feature/readScreen/index.js';
import _mediaScreen from './feature/mediaScreen/index.js';
import animation from './option/config/animation/index.js';
import merge, { mergeExtend } from './util/merge.js';
import WcagObserver from './feature/wcag/index.js';
import chartLinter from './feature/linter/index.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 SELF_CHART = ['FlowChart', 'WaveChart', 'TerraceChart', 'RiverChart', 'GanttChart', 'BaiduMapChart', 'HoneycombChart', 'OrganizationChart', 'AutonaviMapChart', 'SnowFlakeChart', 'TimelineChart', 'MilestoneChart'];

// 图表核心对象，按需引入图表 class 给 CoreChart 渲染，打包容量较小
var CoreChart = /*#__PURE__*/function (_BaseChart) {
  function CoreChart() {
    var _this;
    _this = _BaseChart.call(this) || this;
    // 图表echarts实例
    _this.echartsIns = null;
    // 图表icharts实例
    _this.ichartsIns = null;
    // 图表echarts配置项
    _this.eChartOption = null;
    // 图表icharts配置项
    _this.iChartOption = null;
    // 图表所在容器
    _this.dom = null;
    // 图表类型
    _this.chartClass = null;
    // 图表依赖的三方插件
    _this.plugins = {};
    // 图表还没有执行render()方法
    _this.hasRender = false;
    // 图表渲染完毕的回调
    _this.renderCallBack = null;
    // 图表resize节流时间
    _this.resizeThrottle = 0;
    // 图表容器的宽高变化监听器
    _this.resizeObserver = null;
    // 响应式布局的监听器
    _this.mediaScreenObserver = undefined;
    // 图表可选择能力
    _this.wcagObserver = undefined;
    return _this;
  }

  // 注册主题
  _inheritsLoose(CoreChart, _BaseChart);
  CoreChart.registerTheme = function registerTheme(name, config) {
    if (!config) {
      tips.error('The second parameter config is required');
      return;
    }
    Theme.set(name, config);
  }

  // 注册配置
  ;
  CoreChart.registerConfig = function registerConfig(name, config) {
    if (!config) {
      tips.error('The second parameter config is required');
      return;
    }
    Theme.setConfig(name, config);
  }

  // 设置主题
  ;
  CoreChart.theme = function theme(name) {
    Theme.setDefaultTheme(name);
  }

  // 重置token变量
  ;
  CoreChart.resetThemeCongfig = function resetThemeCongfig() {
    Theme.resetThemeCongfig();
  }

  // 开启响应式布局（类媒体查询效果）
  ;
  var _proto = CoreChart.prototype;
  _proto.mediaScreen = function mediaScreen(dom, screenOption) {
    var _this2 = this;
    this.mediaScreenObserver = new _mediaScreen(dom, screenOption, function (option) {
      _this2.setSimpleOption(_this2.chartClass, option, _this2.plugins, false);
      _this2.render();
    });
  }

  // 初始化echarts，并同时监听容器和窗口的大小变化
  ;
  _proto.init = function init(chartDom, initOpts) {
    var defaultInit = {
      domResize: true,
      windowResize: true,
      resizeThrottle: this.resizeThrottle
    };
    initOpts = merge(defaultInit, initOpts);
    this.dom = chartDom;
    this.echartsIns = echarts.init(chartDom, {}, initOpts);
    // resize节流函数
    this.throttleResize = initOpts.resizeThrottle === 0 ? this.setResize.bind(this) : throttle(initOpts.resizeThrottle, this.setResize.bind(this));
    // 容器大小变化监听
    initOpts.domResize && this.setResizeObserver();
    // 页面大小变化监听
    initOpts.windowResize && window.addEventListener('resize', this.throttleResize);
  };
  _proto.setResizeObserver = function setResizeObserver() {
    var _this3 = this;
    this.resizeObserver = new ResizeObserver(function () {
      window.requestAnimationFrame(function () {
        _this3.throttleResize();
      });
    });
    this.resizeObserver.observe(this.dom);
  }

  // 图表宽高自适应
  ;
  _proto.setResize = function setResize() {
    var _this4 = this;
    this.mediaScreenObserver && this.mediaScreenObserver.observe();
    this.echartsIns && this.echartsIns.resize && this.echartsIns.resize({
      width: 'auto'
    });
    this.ichartsIns && this.ichartsIns.resize && this.ichartsIns.resize(function (resizedOption) {
      _this4.setOption(resizedOption);
    });
  }

  // 传入简化后的icharts-option
  ;
  _proto.setSimpleOption = function setSimpleOption(ChartClass, iChartOption, plugins, isInit) {
    if (plugins === void 0) {
      plugins = {};
    }
    if (isInit === void 0) {
      isInit = true;
    }
    iChartOption = xssOption(iChartOption);
    // 设定主题、自适应图表
    if (isInit) {
      Theme.setDefaultTheme(iChartOption.theme);
      this.mediaScreenObserver && this.mediaScreenObserver.setInitOption(iChartOption, ChartClass);
    }
    // 添加读屏能力
    if (iChartOption.readScreen) {
      readScreen(this.dom, iChartOption.readScreen);
    }
    // 如果是复杂图表，则重定向this指向
    if (this.isSelfChart(ChartClass)) {
      this.redirectSelfChart(ChartClass, iChartOption, plugins);
      return;
    }
    this.plugins = plugins;
    this.chartClass = ChartClass;
    this.iChartOption = iChartOption;
    this.ichartsIns = new ChartClass(iChartOption, this.echartsIns, this.plugins);
    this.eChartOption = this.ichartsIns.getOption();
    axistip(this.dom, this.echartsIns, this.eChartOption, this.iChartOption.axistip);
    mergeExtend(this.iChartOption, this.eChartOption);
  }

  // 若自研图表，走自研图表路径，并更改this指向
  ;
  _proto.redirectSelfChart = function redirectSelfChart(SelfChart, option, plugins) {
    var stateDom = this.dom.getElementsByClassName('huicharts-state-container')[0];
    this.uninstall();
    this.dom.innerHTML = '';
    var instance = new SelfChart();
    instance.init(this.dom);
    instance.setSimpleOption(SelfChart, option, plugins);
    instance.renderCallBack = this.renderCallBack;
    if (stateDom) {
      this.dom.appendChild(stateDom);
    }
    Object.setPrototypeOf(this, instance);
    for (var key in this) {
      if (Object.hasOwnProperty.call(this, key)) {
        delete this[key];
      }
    }
  }

  // 判断是否为若自研图表
  ;
  _proto.isSelfChart = function isSelfChart(chartClass) {
    return SELF_CHART.includes(chartClass.name);
  }

  // 渲染图表
  ;
  _proto.render = function render(option) {
    // 已经开始渲染
    this.hasRender = true;
    // 第一次渲染
    this.setOption(this.eChartOption, option);
    // 第二次渲染
    this.setOptionAgain(this.eChartOption);
    // 图表渲染完成时回调
    this.renderCallBack && this.renderCallBack(this.echartsIns);
    // 监听全键盘事件
    this.keyboardFocus();
  }

  // 第一次渲染: 调用echarts原生的setOption
  ;
  _proto.setOption = function setOption(eChartOption, option) {
    option = merge({
      notMerge: true
    }, option);
    // 注入动画的配置
    var animationConfig = animation();
    eChartOption && merge(animationConfig, eChartOption);
    eChartOption && this.echartsIns.setOption(animationConfig, option);
  }

  // 第二次渲染: 有些图表需要根据第一次渲染出来的结果进行二次计算
  ;
  _proto.setOptionAgain = function setOptionAgain() {
    if (this.ichartsIns && this.ichartsIns.updateOptionAgain) {
      // 根据网格重新计算option
      this.ichartsIns.updateOptionAgain(this.echartsIns);
      // 再次渲染
      this.setOption(this.eChartOption);
    }
  }

  // 监听全键盘事件
  ;
  _proto.keyboardFocus = function keyboardFocus() {
    var _this$iChartOption = this.iChartOption,
      keyboardFocus = _this$iChartOption.keyboardFocus,
      theme = _this$iChartOption.theme;
    if (keyboardFocus) {
      if (this.wcagObserver) {
        this.wcagObserver.unobserve();
      }
      this.wcagObserver = new WcagObserver(keyboardFocus, theme, this.echartsIns, this.eChartOption);
    }
  }

  // 规范检查器
  ;
  _proto.linter = function linter(action, displayMode) {
    if (action !== 'check' && action !== 'fix') {
      console.error('Invalid action');
      return;
    }
    chartLinter(this.chartClass.name, this.eChartOption, this.dom, action, displayMode);
  }

  // 图表刷新，包括刷新配置和数据
  ;
  _proto.refresh = function refresh(iChartOption) {
    this.iChartOption = iChartOption;
    this.setSimpleOption(this.chartClass, iChartOption, this.plugins);
    this.render();
    this.mediaScreenObserver && this.mediaScreenObserver.refresh();
  }

  // 图表刷新，仅刷新数据
  ;
  _proto.refreshData = function refreshData(data) {
    this.iChartOption.data = data;
    this.refresh(this.iChartOption);
  }

  // 图表渲染完成时回调
  ;
  _proto.onRenderReady = function onRenderReady(callback) {
    this.renderCallBack = callback;
  }

  // 给echarts单独绑定事件
  ;
  _proto.on = function on() {
    var _this$echartsIns;
    this.echartsIns && (_this$echartsIns = this.echartsIns).on.apply(_this$echartsIns, arguments);
  }

  // 给echarts单独解绑事件
  ;
  _proto.off = function off() {
    var _this$echartsIns2;
    this.echartsIns && (_this$echartsIns2 = this.echartsIns).off.apply(_this$echartsIns2, arguments);
  }

  // 给echarts实例绑定事件
  ;
  _proto.bindEvents = function bindEvents(events) {
    var _this5 = this;
    if (events && events.length !== 0) {
      events.forEach(function (item) {
        if (item.query) {
          _this5.off(item.eventName, item.handler);
          _this5.on(item.eventName, item.query, item.handler);
        } else {
          _this5.off(item.eventName, item.handler);
          _this5.on(item.eventName, item.handler);
        }
      });
    }
  }

  // 批量给echarts实例解绑事件
  ;
  _proto.unbindEvents = function unbindEvents(events) {
    var _this6 = this;
    if (events && events.length !== 0) {
      events.forEach(function (item) {
        if (item.handler) {
          _this6.off(item.eventName, item.handler);
        } else {
          _this6.off(item.eventName);
        }
      });
    }
  }

  // 卸载图表
  ;
  _proto.uninstall = function uninstall() {
    // 卸载window resize监听功能
    window.removeEventListener('resize', this.throttleResize);
    // 卸载container容器变化监听
    if (this.resizeObserver) {
      this.resizeObserver.unobserve(this.dom);
      this.resizeObserver.disconnect();
      this.resizeObserver = null;
    }
    // 卸载图表可选择能力监听事件
    if (this.wcagObserver) {
      this.wcagObserver.unobserve();
    }
    // 销毁ECharts实例
    if (this.echartsIns && !this.echartsIns.isDisposed()) {
      this.echartsIns.dispose();
    }
    this.echartsIns = null;
  }

  // 获取到ECharts实例
  ;
  _proto.getEchartsInstance = function getEchartsInstance() {
    return this.echartsIns;
  }

  // 直接传入ECharts的原生配置项
  ;
  _proto.setEchartsOption = function setEchartsOption(option) {
    option && (this.eChartOption = option);
  }

  // 获取到ECharts配置项
  ;
  _proto.getEchartsOption = function getEchartsOption() {
    return this.eChartOption;
  };
  return CoreChart;
}(BaseChart);
export { CoreChart as default };