bytev-charts
Version:
基于echarts和JavaScript及ES6封装的一个可以直接调用的图表组件库，内置主题设计，简单快捷，且支持用户自定义配置； npm 安装方式: npm install bytev-charts 若启动提示还需额外install插件,则运行 npm install @babel/runtime-corejs2 即可;
214 lines (177 loc) • 10.3 kB
JavaScript
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 "core-js/modules/es.function.name.js";
import "core-js/modules/es.array.filter.js";
import "core-js/modules/es.object.to-string.js";
import _Object$freeze from "@babel/runtime-corejs2/core-js/object/freeze";
import _Object$values from "@babel/runtime-corejs2/core-js/object/values";
/*
*
* */
import Print from './print/Print.class.js';
import ThemeEnum from "./config/enum/ThemeEnum.js";
import ComponentEnum from "./config/enum/ComponentEnum.js";
import ComponentFactory from "./component/ComponentFactory.class.js";
import Interval from "./timerTask/Interval.class.js";
var ByteVCharts = /*#__PURE__*/function () {
//储存所有实例
//echarts渲染器, 默认使用canvas, 可以svg
//echarts皮肤
function ByteVCharts() {
var _window, _window$screen, _window2, _window2$screen, _window3, _window3$screen, _window4, _window4$screen;
_classCallCheck(this, ByteVCharts);
_defineProperty(this, "allComponentInstanceObj", {});
_defineProperty(this, "allComponentInstanceArr", []);
_defineProperty(this, "initThemeId", '');
_defineProperty(this, "screenWidth", ((_window = window) === null || _window === void 0 ? void 0 : (_window$screen = _window.screen) === null || _window$screen === void 0 ? void 0 : _window$screen.availWidth) || ((_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$screen = _window2.screen) === null || _window2$screen === void 0 ? void 0 : _window2$screen.width) || 1920);
_defineProperty(this, "screenHeight", ((_window3 = window) === null || _window3 === void 0 ? void 0 : (_window3$screen = _window3.screen) === null || _window3$screen === void 0 ? void 0 : _window3$screen.availHeight) || ((_window4 = window) === null || _window4 === void 0 ? void 0 : (_window4$screen = _window4.screen) === null || _window4$screen === void 0 ? void 0 : _window4$screen.height) || 1080);
_defineProperty(this, "chartsRenderer", 'canvas');
_defineProperty(this, "chartsTheme", 'dark');
_defineProperty(this, "theme", _Object$freeze(new ThemeEnum()));
_defineProperty(this, "component", _Object$freeze(new ComponentEnum()));
//console.log(this.screenWidth, this.screenHeight)
//初始化ByteV周期定时器,用来做周期动画
window.ByteVChartsInterval = new Interval();
}
/*
* init<br>
* @param{Object} element dom对象<br/>
* @param{String} componentId 组件唯一id/名称<br/>
* @param{Object} data 数据(3D类组件时,为option设置项)<br/>
* */
_createClass(ByteVCharts, [{
key: "init",
value: function init(element, componentId, data) {
var _element$querySelecto, _this$allComponentIns, _this$allComponentIns2, _this$allComponentIns3, _this$allComponentIns4, _this$allComponentIns5;
if (!element) {
console.warn('Initialization must have an element: init()');
return this.allComponentInstanceObj;
} //如果该dom下有.componentContainer, 则此dom之前被inti过,再次init前先销毁之前的实例
var id = (_element$querySelecto = element.querySelector('.componentContainer')) === null || _element$querySelecto === void 0 ? void 0 : _element$querySelecto.id; // || ""
//销毁动画实例
(_this$allComponentIns = this.allComponentInstanceObj[id]) === null || _this$allComponentIns === void 0 ? void 0 : (_this$allComponentIns2 = _this$allComponentIns.animationInstance) === null || _this$allComponentIns2 === void 0 ? void 0 : (_this$allComponentIns3 = _this$allComponentIns2.dispose) === null || _this$allComponentIns3 === void 0 ? void 0 : _this$allComponentIns3.call(_this$allComponentIns2); //销毁组件实例
(_this$allComponentIns4 = this.allComponentInstanceObj[id]) === null || _this$allComponentIns4 === void 0 ? void 0 : (_this$allComponentIns5 = _this$allComponentIns4.dispose) === null || _this$allComponentIns5 === void 0 ? void 0 : _this$allComponentIns5.call(_this$allComponentIns4); //删除组件对象
delete this.allComponentInstanceObj[id]; // let component = ComponentFactory.getComponent(element, componentId, this.initThemeId)
var component = ComponentFactory.getComponent(element, componentId, {
initThemeId: this.initThemeId,
screenWidth: this.screenWidth,
screenHeight: this.screenHeight,
renderer: this.chartsRenderer
});
if (component) {
this.allComponentInstanceObj[component.id] = component;
this.allComponentInstanceObj[component.id].name = component.name; //console.log(component,data)
if (data) {
if (componentId.toUpperCase() == '3D' || componentId.toUpperCase() == 'THREE') {
component.setOption(data);
} else {
component.setData(data);
}
}
}
this.allComponentInstanceArr = _Object$values(this.allComponentInstanceObj);
return component;
}
}, {
key: "initTheme",
value: function initTheme(themeId) {
this.initThemeId = themeId;
}
}, {
key: "setTheme",
value: function setTheme(themeId) {
this.initTheme(themeId); //console.log(themeId, this.allComponentInstanceObj)
for (var i in this.allComponentInstanceObj) {
this.allComponentInstanceObj[i].clear();
this.allComponentInstanceObj[i].setTheme(themeId);
}
}
}, {
key: "initScreenSize",
value: function initScreenSize(width, height) {
var _window5, _window5$screen, _window6, _window6$screen;
this.screenWidth = width || ((_window5 = window) === null || _window5 === void 0 ? void 0 : (_window5$screen = _window5.screen) === null || _window5$screen === void 0 ? void 0 : _window5$screen.width) || 1920;
this.screenHeight = height || ((_window6 = window) === null || _window6 === void 0 ? void 0 : (_window6$screen = _window6.screen) === null || _window6$screen === void 0 ? void 0 : _window6$screen.height) || 1080;
}
}, {
key: "setScreenSize",
value: function setScreenSize(width, height) {
var _window7, _window7$screen, _window8, _window8$screen;
this.screenWidth = width || ((_window7 = window) === null || _window7 === void 0 ? void 0 : (_window7$screen = _window7.screen) === null || _window7$screen === void 0 ? void 0 : _window7$screen.width) || 1920;
this.screenHeight = height || ((_window8 = window) === null || _window8 === void 0 ? void 0 : (_window8$screen = _window8.screen) === null || _window8$screen === void 0 ? void 0 : _window8$screen.height) || 1080;
this.resize(this.screenWidth, this.screenHeight);
} //resize所有图表实例
}, {
key: "resize",
value: function resize(width, height) {
for (var i in this.allComponentInstanceObj) {
this.allComponentInstanceObj[i].resize(width, height);
}
} //开启所有图表图例轮播
}, {
key: "openLoopTooltip",
value: function openLoopTooltip() {
for (var i in this.allComponentInstanceObj) {
var _this$allComponentIns6, _this$allComponentIns7;
(_this$allComponentIns6 = this.allComponentInstanceObj[i]) === null || _this$allComponentIns6 === void 0 ? void 0 : (_this$allComponentIns7 = _this$allComponentIns6.openLoopTooltip) === null || _this$allComponentIns7 === void 0 ? void 0 : _this$allComponentIns7.call(_this$allComponentIns6);
}
}
}, {
key: "offLoopTooltip",
value: function offLoopTooltip() {
for (var i in this.allComponentInstanceObj) {
var _this$allComponentIns8, _this$allComponentIns9;
(_this$allComponentIns8 = this.allComponentInstanceObj[i]) === null || _this$allComponentIns8 === void 0 ? void 0 : (_this$allComponentIns9 = _this$allComponentIns8.offLoopTooltip) === null || _this$allComponentIns9 === void 0 ? void 0 : _this$allComponentIns9.call(_this$allComponentIns8);
}
}
}, {
key: "playAnimation",
value: function playAnimation() {
for (var i in this.allComponentInstanceObj) {
var _this$allComponentIns10, _this$allComponentIns11;
(_this$allComponentIns10 = this.allComponentInstanceObj[i]) === null || _this$allComponentIns10 === void 0 ? void 0 : (_this$allComponentIns11 = _this$allComponentIns10.playAnimation) === null || _this$allComponentIns11 === void 0 ? void 0 : _this$allComponentIns11.call(_this$allComponentIns10);
}
}
}, {
key: "stopAnimation",
value: function stopAnimation() {
for (var i in this.allComponentInstanceObj) {
var _this$allComponentIns12, _this$allComponentIns13;
(_this$allComponentIns12 = this.allComponentInstanceObj[i]) === null || _this$allComponentIns12 === void 0 ? void 0 : (_this$allComponentIns13 = _this$allComponentIns12.stopAnimation) === null || _this$allComponentIns13 === void 0 ? void 0 : _this$allComponentIns13.call(_this$allComponentIns12);
}
}
}, {
key: "offAnimation",
value: function offAnimation() {
for (var i in this.allComponentInstanceObj) {
var _this$allComponentIns14, _this$allComponentIns15;
(_this$allComponentIns14 = this.allComponentInstanceObj[i]) === null || _this$allComponentIns14 === void 0 ? void 0 : (_this$allComponentIns15 = _this$allComponentIns14.offAnimation) === null || _this$allComponentIns15 === void 0 ? void 0 : _this$allComponentIns15.call(_this$allComponentIns14);
}
}
}, {
key: "getComponentInstanceByName",
value: function getComponentInstanceByName(name) {
return this.allComponentInstanceArr.filter(function (value) {
return name == value.name;
});
}
}, {
key: "getComponentInstanceById",
value: function getComponentInstanceById(id) {
return this.allComponentInstanceObj[id] || {};
}
}, {
key: "getAllComponentInstanceObj",
value: function getAllComponentInstanceObj() {
return this.allComponentInstanceObj;
}
}, {
key: "getAllComponentInstanceArr",
value: function getAllComponentInstanceArr(id) {
return this.allComponentInstanceArr;
}
}]);
return ByteVCharts;
}();
export { ByteVCharts as default };