bytev-charts-beta1.0
Version:
测试版-1.0,版本号为小版本; 基于echarts和JavaScript及ES6封装的一个可以直接调用的图表组件库，内置主题设计，简单快捷，且支持用户自定义配置； npm 安装方式: npm install bytev-charts 若启动提示还需额外install插件,则运行 npm install @babel/runtime-corejs2 即可;
452 lines (369 loc) • 17.4 kB
JavaScript
import _Reflect$construct from "@babel/runtime-corejs2/core-js/reflect/construct";
import _classCallCheck from "@babel/runtime-corejs2/helpers/classCallCheck";
import _createClass from "@babel/runtime-corejs2/helpers/createClass";
import _assertThisInitialized from "@babel/runtime-corejs2/helpers/assertThisInitialized";
import _get from "@babel/runtime-corejs2/helpers/get";
import _inherits from "@babel/runtime-corejs2/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime-corejs2/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime-corejs2/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime-corejs2/helpers/defineProperty";
import _Object$assign from "@babel/runtime-corejs2/core-js/object/assign";
import "core-js/modules/es.function.name.js";
import "core-js/modules/es.array.index-of.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";
import "core-js/modules/es.number.constructor.js";
import "core-js/modules/web.timers.js";
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct) return false; if (_Reflect$construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
// import * as echarts from 'echarts';
import Component from '../Component.class.js';
var EchartsComponent = /*#__PURE__*/function (_Component) {
_inherits(EchartsComponent, _Component);
var _super = _createSuper(EchartsComponent);
function EchartsComponent(element, option) {
var _assertThisInitialize, _assertThisInitialize2;
var _this2;
_classCallCheck(this, EchartsComponent);
_this2 = _super.call(this, element, option);
_defineProperty(_assertThisInitialized(_this2), "name", 'echarts');
_defineProperty(_assertThisInitialized(_this2), "type", 'echarts');
_defineProperty(_assertThisInitialized(_this2), "timeTicket", 0);
_defineProperty(_assertThisInitialized(_this2), "loopShowTooltipOpened", false);
if (!((_assertThisInitialize = _assertThisInitialized(_this2)) !== null && _assertThisInitialize !== void 0 && (_assertThisInitialize2 = _assertThisInitialize.componentPlugin) !== null && _assertThisInitialize2 !== void 0 && _assertThisInitialize2.echarts)) {
try {
_this2.componentPlugin.echarts = echarts;
} catch (e) {
//TODO handle the exception
console.error(e);
}
}
return _this2;
}
_createClass(EchartsComponent, [{
key: "init",
value: function init(element, option) {
_get(_getPrototypeOf(EchartsComponent.prototype), "init", this).call(this, element, option); // this.componentInstance = this.componentPlugin.echarts.init(this.componentContainer);
// this.componentInstance = this.componentPlugin.echarts.init(this.componentContainer, null, { renderer: 'svg' });
this.componentInstance = this.componentPlugin.echarts.init(this.componentContainer, null, {
renderer: option.renderer
}); //20220309 测试先直接setOption,方便后面setData中的setOption不再传option进去
this.componentInstance.setOption(this.byteVModel); // Object.assign(this, this.componentInstance)
}
}, {
key: "buildByteVModel",
value: function buildByteVModel() {
_get(_getPrototypeOf(EchartsComponent.prototype), "buildByteVModel", this).call(this);
this.byteVModel.color = this.theme.color;
this.byteVModel.animationDuration = this.theme.animationDuration; // this.byteVModel.legend = this.theme.legend
this.byteVModel.tooltip = this.theme.tooltip; // this.byteVModel.tooltip.formatter = (params)=> {
// let relVal = "";
// if(this.byteVModel.xAxis && this.byteVModel.yAxis){
// relVal = (params && params[0] && params[0].name) ? params[0].name : '';
// for (let i = 0; i < params.length; i++) {
// if(params[i].value){
// relVal += '<br/>' + params[i].marker + params[i].value + ' ' + (this.data[i].unitY || this.data[i].unit || '')
// }
// }
// }else
// if((params.componentSubType && params.componentSubType=="radar") || (params.seriesType && params.seriesType=="radar")){
// relVal = params.name || '';
// for (let i = 0; i < params.data.site.length; i++) {
// relVal += '<br/>' + params.marker + params.data.site[i] + ' ' + (params.value[i]) + ' ' + (params.data.unitY || params.data.unit || '')
// }
// }else
// if((params.componentSubType && params.componentSubType=="pie") || (params.seriesType && params.seriesType=="pie")){
// relVal = params.marker + params.name || '';
// relVal += '<br/>' + params.data.value + (params.data.unitY || params.data.unit || '')
// if(params.data.per){
// relVal += ' ' + params.data.per + '%'
// }
// }
// return relVal
// }
}
}, {
key: "setData",
value: function setData(data) {
var _this3 = this;
_get(_getPrototypeOf(EchartsComponent.prototype), "setData", this).call(this, data);
if (this.byteVModel.tooltip) {
if (this.byteVModel.xAxis && this.byteVModel.yAxis) {
this.byteVModel.tooltip.trigger = 'axis';
this.byteVModel.tooltip.formatter = function (params) {
var relVal = "";
relVal = params && params[0] && params[0].name ? params[0].name : '';
for (var i = 0; i < params.length; i++) {
if (params[i].value) {
// relVal += '<br/>' + params[i].marker + params[i].value + ' ' + (this.data[i].unitY || this.data[i].unit || '')
relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + (params[i].value || '--') + (_this3.data[i].unitY || _this3.data[i].unit || '');
}
}
return relVal;
};
} else if (this.name.indexOf("radar") != -1) {
this.byteVModel.tooltip.formatter = function (params) {
var relVal = "";
relVal = params.name || '';
for (var i = 0; i < params.data.site.length; i++) {
relVal += '<br/>' + params.marker + params.data.site[i] + ' ' + params.value[i] + (params.data.unitY || params.data.unit || '');
}
return relVal;
};
} else if (this.name.indexOf("pie") != -1 || this.name.indexOf("Rose") != -1 || this.name.indexOf("Doughnut") != -1 || this.name.indexOf("Radial") != -1) {
this.byteVModel.tooltip.formatter = function (params) {
var relVal = "";
relVal = params.marker + params.name || '';
relVal += '<br/>' + params.data.value + (params.data.unitY || params.data.unit || '');
if (params.data.per) {
relVal += ' ' + params.data.per + '%';
}
return relVal;
};
}
}
}
/*
* 根据图例icon设置图例样式
* */
}, {
key: "setLegendStyleByIcon",
value: function setLegendStyleByIcon() {
var _this$byteVModel, _this$byteVModel$lege;
if (!(this !== null && this !== void 0 && (_this$byteVModel = this.byteVModel) !== null && _this$byteVModel !== void 0 && (_this$byteVModel$lege = _this$byteVModel.legend) !== null && _this$byteVModel$lege !== void 0 && _this$byteVModel$lege.icon)) {
return;
}
if (this.byteVModel.legend.icon == 'verticalBar') {
_Object$assign(this.byteVModel.legend, {
icon: "verticalBar",
// BTVicon: 'verticalBar',
itemWidth: 4,
itemHeight: 44
});
} else {
delete this.byteVModel.legend.BTVicon;
delete this.byteVModel.legend.itemWidth;
delete this.byteVModel.legend.itemHeight;
}
}
}, {
key: "resize",
value: function resize(width, height) {
_get(_getPrototypeOf(EchartsComponent.prototype), "resize", this).call(this, width, height);
this.componentInstance.resize();
} //判断直角坐标系的图表数据
}, {
key: "verifyRectangularCoordinatesData",
value: function verifyRectangularCoordinatesData(data) {
if (!data || !data[0] || !data[0].x || !data[0].x.length || !data[0].y || !data[0].y.length) {
console.warn("The data is empty or incorrectly formatted, function name : setData(data);");
return false;
}
data.forEach(function (itm) {
itm.y.forEach(function (m, i) {
itm.y[i] = Number(m);
});
});
return true;
} //判断name value结构图表的数据 (如 饼状图)
}, {
key: "verifyNameValueData",
value: function verifyNameValueData(data) {
// if(!data || !data[0] || !data[0].value) {
if (!data || !data[0]) {
console.warn("The data is empty or incorrectly formatted, function name : setData(data), component name: ", this.name, ";");
return false;
}
data.forEach(function (itm, idx) {
try {
itm.value = Number(itm.value);
} catch (e) {
itm.value = 0;
}
});
return true;
} // 生成线性渐变色
}, {
key: "playAnimation",
value: function playAnimation() {
_get(_getPrototypeOf(EchartsComponent.prototype), "playAnimation", this).call(this);
this.createAnimationContainer();
if (!this.animationInstance) {
this.animationInstance = this.componentPlugin.echarts.init(this.animationContainer);
}
} //开启循环提示
}, {
key: "openLoopTooltip",
value: function openLoopTooltip() {
//关闭动效
// this.offAnimation()
clearInterval(this.timeTicket);
this.timeTicket = 0;
this.loopShowTooltip();
this.loopShowTooltipOpened = true;
}
}, {
key: "offLoopTooltip",
value: function offLoopTooltip() {
clearInterval(this.timeTicket);
this.timeTicket = 0;
this.loopShowTooltipOpened = false;
}
/**
* echarts tooltip 自动轮播
* @author liuyishi
* @param chart
* @param chartOption
* @param options
* {
* interval 轮播时间间隔，单位毫秒，默认为2000
* loopSeries boolean类型，默认为false。
* true表示循环所有series的tooltip，false则显示指定seriesIndex的tooltip
* seriesIndex 默认为0，指定某个系列（option中的series索引）循环显示tooltip，
* 当loopSeries为true时，从seriesIndex系列开始执行.
* }
* @returns {{clearLoop: clearLoop}}
*/
}, {
key: "loopShowTooltip",
value: function loopShowTooltip() {
var _chartOption$series;
var chart = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.componentInstance;
var chartOption = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.byteVModel;
var options = arguments.length > 2 ? arguments[2] : undefined;
var _this = this;
var defaultOptions = {
interval: 2000,
loopSeries: false,
seriesIndex: 0,
updateData: null
};
if (!chart || !chartOption) {
return {};
}
var dataIndex = 0; // 数据索引，初始化为-1，是为了判断是否是第一次执行
var seriesIndex = 0; // 系列索引
// let timeTicket = 0;
// let seriesLen = chartOption.series.length; // 系列个数
var seriesLen = (chartOption === null || chartOption === void 0 ? void 0 : (_chartOption$series = chartOption.series) === null || _chartOption$series === void 0 ? void 0 : _chartOption$series.length) || 0; // 系列个数
var dataLen = 0; // 某个系列数据个数
var chartType; // 系列类型
var first = true; // 不循环series时seriesIndex指定显示tooltip的系列，不指定默认为0，指定多个则默认为第一个
// 循环series时seriesIndex指定循环的series，不指定则从0开始循环所有series，指定单个则相当于不循环，指定多个
// 要不要添加开始series索引和开始的data索引？
if (options) {
options.interval = options.interval || defaultOptions.interval;
options.loopSeries = options.loopSeries || defaultOptions.loopSeries;
options.seriesIndex = options.seriesIndex || defaultOptions.seriesIndex;
options.updateData = options.updateData || defaultOptions.updateData;
} else {
options = defaultOptions;
} // 如果设置的seriesIndex无效，则默认为0
if (options.seriesIndex < 0 || options.seriesIndex >= seriesLen) {
seriesIndex = 0;
} else {
seriesIndex = options.seriesIndex;
}
function autoShowTip() {
function showTip() {
// 判断是否更新数据
if (dataIndex === 0 && !first && typeof options.updateData === "function") {
options.updateData();
chart.setOption(chartOption);
}
var series = chartOption.series;
chartType = series[seriesIndex].type; // 系列类型
dataLen = series[seriesIndex].data.length; // 某个系列的数据个数
var tipParams = {
seriesIndex: seriesIndex
};
switch (chartType) {
case 'map':
case 'pie':
case 'chord':
tipParams.name = series[seriesIndex].data[dataIndex].name;
break;
case 'radar':
// 雷达图
tipParams.seriesIndex = seriesIndex;
tipParams.dataIndex = dataIndex;
break;
default:
tipParams.dataIndex = dataIndex;
break;
}
if (chartType === 'pie' || chartType === 'radar') {
// 取消之前高亮的图形
chart.dispatchAction({
type: 'downplay',
// seriesIndex: options.loopSeries ? (seriesIndex === 0 ? seriesLen - 1 : seriesIndex - 1) : seriesIndex,
// seriesIndex: chartType === 'pie' ? 0 : options.loopSeries ? (seriesIndex === 0 ? seriesLen - 1 : seriesIndex - 1) : seriesIndex,
seriesIndex: chartType === 'pie' ? 0 : seriesIndex === 0 ? seriesLen - 1 : seriesIndex - 1,
dataIndex: dataIndex === 0 ? dataLen - 1 : dataIndex - 1
}); // 高亮当前图形
chart.dispatchAction({
type: 'highlight',
seriesIndex: seriesIndex,
dataIndex: dataIndex
});
} // 显示 tooltip
tipParams.type = 'showTip';
chart.dispatchAction(tipParams);
dataIndex = (dataIndex + 1) % dataLen;
if (options.loopSeries && dataIndex === 0 && !first) {
// 数据索引归0表示当前系列数据已经循环完
seriesIndex = (seriesIndex + 1) % seriesLen;
}
first = false;
}
showTip();
_this.timeTicket = setInterval(showTip, options.interval);
} // 关闭轮播
function stopAutoShow() {
if (_this.timeTicket) {
clearInterval(_this.timeTicket);
_this.timeTicket = 0;
if (chartType === 'pie' || chartType === 'radar') {
// 取消高亮的图形
chart.dispatchAction({
type: 'downplay',
seriesIndex: options.loopSeries ? seriesIndex === 0 ? seriesLen - 1 : seriesIndex - 1 : seriesIndex,
dataIndex: dataIndex === 0 ? dataLen - 1 : dataIndex - 1
});
}
}
}
var zRender = chart.getZr();
function zRenderMouseMove(param) {
if (param.event) {
// 阻止canvas上的鼠标移动事件冒泡
param.event.cancelBubble = true;
}
stopAutoShow();
} // 离开echarts图时恢复自动轮播
function zRenderGlobalOut() {
if (!_this.timeTicket && _this.loopShowTooltipOpened) {
autoShowTip();
}
} // 鼠标在echarts图上时停止轮播
chart.on('mousemove', stopAutoShow);
zRender.on('mousemove', zRenderMouseMove);
zRender.on('globalout', zRenderGlobalOut);
autoShowTip();
return {
clearLoop: function clearLoop() {
if (_this.timeTicket) {
clearInterval(_this.timeTicket);
_this.timeTicket = 0;
}
chart.off('mousemove', stopAutoShow);
zRender.off('mousemove', zRenderMouseMove);
zRender.off('globalout', zRenderGlobalOut);
}
};
}
}]);
return EchartsComponent;
}(Component);
export { EchartsComponent as default };