bytev-charts-beta1.0/lib/component/Component.class.js

测试版-1.0,版本号为小版本; 基于echarts和JavaScript及ES6封装的一个可以直接调用的图表组件库，内置主题设计，简单快捷，且支持用户自定义配置； npm 安装方式: npm install bytev-charts 若启动提示还需额外install插件,则运行 npm install @babel/runtime-corejs2 即可;

import _classCallCheck from "@babel/runtime-corejs2/helpers/classCallCheck";
import _createClass from "@babel/runtime-corejs2/helpers/createClass";
import _defineProperty from "@babel/runtime-corejs2/helpers/defineProperty";
import _WeakSet from "@babel/runtime-corejs2/core-js/weak-set";
import "core-js/modules/es.array.concat.js";
import "core-js/modules/web.timers.js";
import "core-js/modules/es.regexp.exec.js";
import "core-js/modules/es.string.replace.js";
import "core-js/modules/es.function.name.js";
import "core-js/modules/es.array.for-each.js";
import "core-js/modules/es.object.to-string.js";
import "core-js/modules/web.dom-collections.for-each.js";

function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }

function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }

function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }

/*
 * Component抽象类
 * */
import Util from '../util/Util.class.js';
import Print from '../print/Print.class.js';
import ByteVModel from '../model/ByteVModel.class.js';
import ThemeFactory from '../theme/ThemeFactory.class.js';
import ComponentPlugin from '../config/ComponentPlugin.js';

var _createComponentContainer = /*#__PURE__*/new _WeakSet();

var _scaleComponentContainer = /*#__PURE__*/new _WeakSet();

var _elementResizeWatch = /*#__PURE__*/new _WeakSet();

var Component = /*#__PURE__*/function () {
  //皮肤工厂
  //组件id
  //组件名称
  //组件类型
  //创建组件的dom对象
  //组件容器
  //动效容器
  //组件实例
  //动效实例
  //option
  //标记初始化byteVModel option是否已经创建完成
  //初始皮肤id
  //皮肤对象
  //组件数据
  //屏幕分辨率-宽
  //屏幕分辨率-高
  function Component(element, option) {
    _classCallCheck(this, Component);

    _classPrivateMethodInitSpec(this, _elementResizeWatch);

    _classPrivateMethodInitSpec(this, _scaleComponentContainer);

    _classPrivateMethodInitSpec(this, _createComponentContainer);

    _defineProperty(this, "componentPlugin", new ComponentPlugin());

    _defineProperty(this, "Util", Util);

    _defineProperty(this, "themeFactory", null);

    _defineProperty(this, "id", '');

    _defineProperty(this, "name", '');

    _defineProperty(this, "type", '');

    _defineProperty(this, "element", null);

    _defineProperty(this, "componentContainer", null);

    _defineProperty(this, "animationContainer", null);

    _defineProperty(this, "componentInstance", {});

    _defineProperty(this, "animationInstance", null);

    _defineProperty(this, "byteVModel", null);

    _defineProperty(this, "buildedByteVModel", false);

    _defineProperty(this, "initThemeId", '');

    _defineProperty(this, "theme", null);

    _defineProperty(this, "data", null);

    _defineProperty(this, "screenWidth", 0);

    _defineProperty(this, "screenHeight", 0);

    //JS中计算出现无限小数位问题，浮点数计算精度的问题
    Util.addMathProperty(); //console.log('element',element)

    this.id = Util.guid();
    this.themeFactory = new ThemeFactory();
    this.byteVModel = new ByteVModel(); //初始默认皮肤

    this.initTheme(option.initThemeId);

    if (element) {
      this.screenWidth = option.screenWidth;
      this.screenHeight = option.screenHeight; // this.buildByteVModel()

      this.init(element, option);
    }
  }
  /*
  * getter:	使用方式: 实例.option即可, 不用追加()括号
  * return:	byteVModel(即option)
  * */


  _createClass(Component, [{
    key: "option",
    get: function get() {
      return this.byteVModel;
    }
    /*
    * setter	使用方法: 实例.option = 新值,即可赋值, 不用追加()括号
    * */
    ,
    set: function set(option) {
      this.byteVModel = option;
      this.setOption();
    }
  }, {
    key: "byteVModel",
    get: function get() {
      return this.byteVModel;
    },
    set: function set(option) {
      this.byteVModel = option;
      this.setOption();
    }
    /*
    * 获取option(byteVModel),
    * 	如果有图表插件实例(如echarts实例),则调用该实例的getOption(), 返回该图表当前状态的option
    * 	else 返回byteVModel
    *
    * echarts的getOption()注解:
    * 	获取当前实例中维护的 option 对象，
    * 	返回的 option 对象中包含了用户多次 setOption 合并得到的配置项和数据，
    * 	也记录了用户交互的状态，例如图例的开关，数据区域缩放选择的范围等等。
    * 	所以从这份 option 可以恢复或者得到一个新的一模一样的实例。
    * */

  }, {
    key: "getOption",
    value: function getOption() {
      //如果有组件实例并且该组件实例中有getOption(), 则调用该组件实例的getOption()并返回返回值
      if (this.componentInstance && this.componentInstance.getOption) {
        return this.componentInstance.getOption();
      } else {
        return this.byteVModel;
      }
    }
  }, {
    key: "setOption",
    value: function setOption() {
      var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.byteVModel;
      var notMerge = arguments.length > 1 ? arguments[1] : undefined;

      // this.byteVModel = option
      if (option === true) {
        notMerge = true;
        option = this.byteVModel;
      } else {
        this.byteVModel = option;
      } //如果有组件实例并且该组件实例中有getOption(), 则调用该组件实例的setOption()


      if (this.componentInstance && this.componentInstance.setOption) {
        this.componentInstance.setOption(option, notMerge);
      }
    }
  }, {
    key: "init",
    value: function init(element, option) {
      if (!element) {
        console.warn("the element can't be null or undefined");
        return;
      }

      this.element = element;
      this.componentInstance.id = this.id;

      _classPrivateMethodGet(this, _createComponentContainer, _createComponentContainer2).call(this);

      _classPrivateMethodGet(this, _scaleComponentContainer, _scaleComponentContainer2).call(this); // this.#elementResizeWatch()


      this.buildByteVModel();
    }
  }, {
    key: "buildByteVModel",
    value:
    /*
    * 设置初始化byteVModel的各个属性
    * */
    function buildByteVModel() {
      this.byteVModel.color = this.theme.color;
    }
  }, {
    key: "dispose",
    value: function dispose() {
      var _this$componentInstan, _this$componentInstan2;

      // console.log('dispose', this.componentInstance)
      (_this$componentInstan = this.componentInstance) === null || _this$componentInstan === void 0 ? void 0 : (_this$componentInstan2 = _this$componentInstan.dispose) === null || _this$componentInstan2 === void 0 ? void 0 : _this$componentInstan2.call(_this$componentInstan);
    } //清空绘画内容，清空后实例可用

  }, {
    key: "clear",
    value: function clear() {
      var _this$componentInstan3, _this$componentInstan4;

      (_this$componentInstan3 = this.componentInstance) === null || _this$componentInstan3 === void 0 ? void 0 : (_this$componentInstan4 = _this$componentInstan3.clear) === null || _this$componentInstan4 === void 0 ? void 0 : _this$componentInstan4.call(_this$componentInstan3);
    }
  }, {
    key: "resize",
    value: function resize(screenWidth, screenHeight) {
      // this.screenWidth = screenWidth
      // this.screenHeight = screenHeight
      // 20230308调试resize()方法不会让ComponentContainer变的问题
      this.screenWidth = screenWidth || this.screenWidth;
      this.screenHeight = screenHeight || this.screenHeight;

      _classPrivateMethodGet(this, _scaleComponentContainer, _scaleComponentContainer2).call(this);
    }
  }, {
    key: "createAnimationContainer",
    value:
    /*
    * 创建动效层
    * */
    function createAnimationContainer() {
      //创建动效层div
      if (!this.animationContainer) {
        var _this$componentContai, _this$componentContai2;

        this.animationContainer = document.createElement("div");
        this.animationContainer.className = 'animationContainer'; // this.animationContainer.style.cssText = "width:100%; height:100%; position: absolute; top: 0; left: 0; pointer-events: none; z-index: 1;"

        this.animationContainer.style.cssText = "width:100%; height:100%; position: absolute; top: 0; left: 0; pointer-events: none; z-index: 0;"; // this.componentContainer.style.zIndex = '1'

        if ((_this$componentContai = this.componentContainer) !== null && _this$componentContai !== void 0 && (_this$componentContai2 = _this$componentContai.children) !== null && _this$componentContai2 !== void 0 && _this$componentContai2[0]) {
          this.componentContainer.insertBefore(this.animationContainer, this.componentContainer.children[0]);
        } else {
          this.componentContainer.appendChild(this.animationContainer);
        }
      }
    }
  }, {
    key: "playAnimation",
    value: function playAnimation() {
      window.ByteVChartsInterval.play();
    }
  }, {
    key: "stopAnimation",
    value: function stopAnimation() {
      window.ByteVChartsInterval.stop();
    }
  }, {
    key: "offAnimation",
    value: function offAnimation() {
      this.stopAnimation();

      if (this.animationContainer && this.circulatingContainer) {
        this.circulatingContainer.innerHTML = '';
      }
    }
    /*
    * 循环扫描光柱
    * */

  }, {
    key: "setCirculating",
    value: function setCirculating() {
      var _this = this;

      this.createAnimationContainer();

      if (this.animationContainer) {
        this.animationContainer.innerHTML = '';
        this.circulatingContainer = document.createElement("div");
        this.circulatingContainer.className = 'circulatingContainer';
        this.circulatingContainer.style.cssText = "width:100%; height:100%; position: absolute; top: 0; left: 0; box-sizing: border-box; padding-top: ".concat(this.theme.grid.top * .9, "px; padding-right: ").concat(this.theme.grid.right, "px; padding-bottom: ").concat(this.theme.grid.bottom + this.theme.xAxis.axisLabel.fontSize * 1.6, "px; padding-left: ").concat(this.theme.grid.left, "px;"); // this.animationContainer.appendChild(this.circulatingContainer)

        this.circulating = document.createElement("div");
        this.circulating.className = 'circulating';
        this.circulating.style.cssText = "width:100%; height:100%; overflow: hidden;";
        this.circulatingContainer.appendChild(this.circulating);
        this.circulatingFill = document.createElement("div");
        this.circulatingFill.className = 'circulatingFill';
        this.circulatingFill.style.cssText = "width:5%; height:100%; float: left; background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0), ".concat(this.theme.color[0], "20, ").concat(this.theme.color[0], "40, ").concat(this.theme.color[0], "80);");
        this.circulating.appendChild(this.circulatingFill);
        this.lightPillars = document.createElement("div");
        this.lightPillars.className = 'lightPillars'; // this.lightPillars.style.cssText = `width:6px; height:100%; float: left; background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(${this.theme.firstColorRgbaArr[0]*2}, ${this.theme.firstColorRgbaArr[1]*2}, ${this.theme.firstColorRgbaArr[2]*2}, .8), rgba(${this.theme.firstColorRgbaArr[0]*2}, ${this.theme.firstColorRgbaArr[1]*2}, ${this.theme.firstColorRgbaArr[2]*2}, .99), rgba(${this.theme.firstColorRgbaArr[0]*2}, ${this.theme.firstColorRgbaArr[1]*2}, ${this.theme.firstColorRgbaArr[2]*2}, .2));`

        this.lightPillars.style.cssText = "\n\t\t\t\twidth:6px; height:100%; \n\t\t\t\tfloat: left; \n\t\t\t\tbackground-image: linear-gradient(\n\t\t\t\t\tto right, \n\t\t\t\t\trgba(".concat(this.theme.firstColorRgbaArr[0], ", ").concat(this.theme.firstColorRgbaArr[1], ", ").concat(this.theme.firstColorRgbaArr[2], ", .5), \n\t\t\t\t\trgba(").concat(this.theme.firstColorRgbaArr[0] * 1.3, ", ").concat(this.theme.firstColorRgbaArr[1] * 1.3, ", ").concat(this.theme.firstColorRgbaArr[2] * 1.3, ", .6), \n\t\t\t\t\trgba(").concat(this.theme.firstColorRgbaArr[0] * 1.6, ", ").concat(this.theme.firstColorRgbaArr[1] * 1.6, ", ").concat(this.theme.firstColorRgbaArr[2] * 1.6, ", .7), \n\t\t\t\t\trgba(").concat(this.theme.firstColorRgbaArr[0] * 1.9, ", ").concat(this.theme.firstColorRgbaArr[1] * 1.9, ", ").concat(this.theme.firstColorRgbaArr[2] * 1.9, ", .8),\n\t\t\t\t\trgba(").concat(this.theme.firstColorRgbaArr[0] * 2, ", ").concat(this.theme.firstColorRgbaArr[1] * 2, ", ").concat(this.theme.firstColorRgbaArr[2] * 2, ", .9),\n\t\t\t\t\trgba(").concat(this.theme.firstColorRgbaArr[0] * 2.1, ", ").concat(this.theme.firstColorRgbaArr[1] * 2.1, ", ").concat(this.theme.firstColorRgbaArr[2] * 2.1, ", .8),\n\t\t\t\t\trgba(").concat(this.theme.firstColorRgbaArr[0] * 2.2, ", ").concat(this.theme.firstColorRgbaArr[1] * 2.2, ", ").concat(this.theme.firstColorRgbaArr[2] * 2.2, ", .6),\n\t\t\t\t\trgba(").concat(this.theme.firstColorRgbaArr[0] * 2, ", ").concat(this.theme.firstColorRgbaArr[1] * 2, ", ").concat(this.theme.firstColorRgbaArr[2] * 2, ", .4), \n\t\t\t\t\trgba(").concat(this.theme.firstColorRgbaArr[0] * 2, ", ").concat(this.theme.firstColorRgbaArr[1] * 2, ", ").concat(this.theme.firstColorRgbaArr[2] * 2, ", .2)\n\t\t\t\t);\n\t\t\t");
        this.circulating.appendChild(this.lightPillars); // rgb(138, 255, 255, .9),
        //周期定时移动填充色光柱

        setTimeout(function () {
          _this.animationContainer.appendChild(_this.circulatingContainer);

          window.ByteVChartsInterval.add(_this.componentInstance.id, function () {
            var w = _this.circulatingFill.style.width.replace('%', '') - 0;
            w = w >= 100 ? 5 : w;
            _this.circulatingFill.style.width = "".concat(w + .2, "%");
          }, 200);
        }, this.theme.animationDuration * .1);
      }
    }
  }, {
    key: "setData",
    value: function setData(data) {
      this.data = data; // this.theme.color = this.byteVModel.color
      // this.theme.updateProperty()

      if (!data || !data.length) {
        // alert(this.theme.color[0])
        console.log(data, 'setData收到了一个空数据');
        return;
      }
    }
  }, {
    key: "initTheme",
    value: function initTheme(themeId) {
      this.initThemeId = themeId;
      this.theme = this.themeFactory.getTheme(themeId); // this.themeFirstColorRgbaArr = Util.colorRgbaArr(this.theme.color[0])
      // //如果是themeId是数组,则为用户自定义的色值数组,则根据其传入的数组生成
      // if( themeId.constructor==Array){
      // 	this.theme.color = themeId
      // 	this.theme.updateProperty()
      // }
    }
    /*
    * 设置当前组件的皮肤, 当前组件换肤
    * param : themeId - 主题皮肤ID
    * */

  }, {
    key: "setTheme",
    value: function setTheme(themeId) {
      var _this$componentInstan5, _this$componentInstan6;

      if (themeId == this.themeId) {
        console.warn('The target themeId is the same as the current themeId.');
        return;
      }

      this.themeId = themeId;
      this.theme = this.themeFactory.getTheme(themeId); // this.themeFirstColorRgbaArr = Util.colorRgbaArr(this.theme.color[0])
      // //如果是themeId是数组,则为用户自定义的色值数组,则根据其传入的数组生成
      // if( themeId.constructor==Array){
      // 	this.theme.color = themeId
      // 	this.theme.updateProperty()
      // 	// this.byteVModel.color = this.theme.color
      // }
      // Object.assign(this.byteVModel, this.theme);

      this.buildByteVModel(); // ToDo
      // if(this?.data?.length){

      if (this !== null && this !== void 0 && this.data || false) {
        this.setData(this.data);
      } // this.setOption()


      this.setOption(this.byteVModel, true); //name和type相同，即代表没有使用重写的子类,而是用户使用的echarts空实例来自定义的,
      // 则调用echarts的setOption

      if (this.name == this.type) // this.componentInstance.setOption(this.byteVModel, true)
        this === null || this === void 0 ? void 0 : (_this$componentInstan5 = this.componentInstance) === null || _this$componentInstan5 === void 0 ? void 0 : (_this$componentInstan6 = _this$componentInstan5.setOption) === null || _this$componentInstan6 === void 0 ? void 0 : _this$componentInstan6.call(_this$componentInstan5, this.byteVModel, true);
    }
  }]);

  return Component;
}();

function _createComponentContainer2() {
  this.componentContainer = document.createElement("div");
  this.componentContainer.className = 'componentContainer';
  this.componentContainer.id = this.componentInstance.id; // this.componentContainer.style.cssText = this.scaleView()

  this.componentContainer.style.overflow = 'hidden'; // this.componentContainer.style.zIndex = '2'

  this.element.innerHTML = '';
  this.element.appendChild(this.componentContainer);
}

function _scaleComponentContainer2() {
  var domWidth = this.element.offsetWidth; //clientWidth;

  var domHeight = this.element.offsetHeight; //clientHeight;
  // let scaleW = window.screen.width / 1920
  // let scaleH = window.screen.height / 1080

  var scaleW = this.screenWidth / 1920;
  var scaleH = this.screenHeight / 1080; // console.log(this.screenWidth, this.screenHeight);
  // console.log(scaleW, scaleH);
  // let width = domWidth / scaleW
  // let height = domHeight / scaleH
  // 20211027 修改为取最小的进行缩放

  var min = scaleW < scaleH ? scaleW : scaleH;
  var width = domWidth / min;
  var height = domHeight / min;
  this.componentContainer.style.width = width + 'px';
  this.componentContainer.style.height = height + 'px'; // this.componentContainer.style.transform = `scale(${scaleW},${scaleH})`
  // 20211027 修改为取最小的进行缩放

  this.componentContainer.style.transform = "scale(".concat(min, ",").concat(min, ")");
  this.componentContainer.style['transform-origin'] = 'left top'; // this.componentContainer.style.position = 'absolute'
  // this.componentContainer.style.top = '0'
  // this.componentContainer.style.left = '0'
  // this.componentContainer.style.right = '0'
  // this.componentContainer.style.bottom = '0'
  // this.componentContainer.style.margin = 'auto'
}

function _elementResizeWatch2() {
  var _this2 = this;

  var observer = new MutationObserver(function (mutations, observer) {
    mutations.forEach(function (mutation) {
      //console.log(111,mutation)
      if (mutation.type === 'attributes') //console.log(mutation)
        // this.#scaleComponentContainer()
        _this2.resize();
    });
  }); // observer.observe(this.element, {

  observer.observe(this.componentContainer, {
    // childList: false,	//子节点的变动（指新增，删除或者更改）。
    // characterData: false,	//节点内容或节点文本的变动。
    attributes: true //属性的变动。

  });
}

export { Component as default };