bytev-charts-beta1.0
Version:
测试版-1.0,版本号为小版本; 基于echarts和JavaScript及ES6封装的一个可以直接调用的图表组件库，内置主题设计，简单快捷，且支持用户自定义配置； npm 安装方式: npm install bytev-charts 若启动提示还需额外install插件,则运行 npm install @babel/runtime-corejs2 即可;
312 lines (263 loc) • 13.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 _JSON$stringify from "@babel/runtime-corejs2/core-js/json/stringify";
import _Object$keys from "@babel/runtime-corejs2/core-js/object/keys";
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.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.regexp.exec.js";
import "core-js/modules/es.string.replace.js";
import "core-js/modules/es.array.reduce.js";
import "core-js/modules/es.number.to-fixed.js";
import "core-js/modules/es.array.index-of.js";
import "core-js/modules/es.number.constructor.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 EchartsComponent from '../EchartsComponent.class.js';
var PieComponent = /*#__PURE__*/function (_EchartsComponent) {
_inherits(PieComponent, _EchartsComponent);
var _super = _createSuper(PieComponent);
function PieComponent(element, option) {
var _this;
_classCallCheck(this, PieComponent);
_this = _super.call(this, element, option);
_defineProperty(_assertThisInitialized(_this), "name", "PieComponent");
_this.name = 'Pie';
return _this;
}
_createClass(PieComponent, [{
key: "buildByteVModel",
value: function buildByteVModel() {
var _this$byteVModel, _this$byteVModel2;
_get(_getPrototypeOf(PieComponent.prototype), "buildByteVModel", this).call(this); //备份基本饼状图和基本环形图的series,以方便下面根据parent动态更变样式和恢复
this.seriesClone = {
pie: JSON.parse(_JSON$stringify(this.theme.series.pie)),
doughnut: JSON.parse(_JSON$stringify(this.theme.series.doughnut))
};
this.byteVModel.legend = this.theme.legend;
this.byteVModel.title = [JSON.parse(_JSON$stringify(this.theme.radarAndPieUnit))];
delete this.byteVModel.tooltip.axisPointer;
delete this.theme.label.position; // //增加自定义属性center和radius,让用户在初始化时即可以调整饼图的位置和大小,并影响与之对应生成的装饰饼们
// this.byteVModel.center = this.theme.series.pie.center
// this.byteVModel.radius = this.theme.series.pie.radius
//增加自定义属性center和radius,让用户在初始化时即可以调整饼图的位置和大小,并影响与之对应生成的装饰饼们
this.byteVModel.center = ((_this$byteVModel = this.byteVModel) === null || _this$byteVModel === void 0 ? void 0 : _this$byteVModel.center) || this.theme.series.pie.center;
this.byteVModel.radius = ((_this$byteVModel2 = this.byteVModel) === null || _this$byteVModel2 === void 0 ? void 0 : _this$byteVModel2.radius) || this.theme.series.pie.radius; // this.byteVModel.tooltip.formatter = (params)=> {
// let 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) {
//验证name value结构图表的数据
if (!this.verifyNameValueData(data)) {
//this.isNoData
return false;
} else {
this.byteVModel.series = [];
this.getDataValueTotalAndNameMaxLength(data);
this.convertParentAndAddPer(data);
}
_get(_getPrototypeOf(PieComponent.prototype), "setData", this).call(this, data);
}
}, {
key: "setCenterByOption",
value: function setCenterByOption(series) {
var _this2 = this;
if (this.byteVModel.center && this.byteVModel.center.length) {
series.forEach(function (itm, idx) {
itm.center = _this2.byteVModel.center;
});
}
}
}, {
key: "setRadiusByOption",
value: function setRadiusByOption(series) {
var _this3 = this;
if (this.byteVModel.radius && this.byteVModel.radius.length) {
series.forEach(function (itm, idx) {
if (itm.data && itm.data.length) {
//外层环的数据data会有parent属性
var isParent = false;
for (var i = 0; i < itm.data.length; i++) {
if (itm.data[i].parent) {
isParent = true;
break;
}
} //如果只有一个系列饼,或是当前饼为外圈
if (isParent || series.length == 1) {
itm.radius = _this3.byteVModel.radius;
} else {
var radius = JSON.parse(_JSON$stringify(_this3.byteVModel.radius));
itm.radius = [String(radius[0]).replace('%', '') * .5 + '%', String(radius[1]).replace('%', '') * .55 + '%'];
}
}
});
}
}
/*
* 获取数据data中所有value的和
* 获取数据data中name名字的最大长度
* */
}, {
key: "getDataValueTotalAndNameMaxLength",
value: function getDataValueTotalAndNameMaxLength(data) {
var nameWidth = 0;
this.dataValueTotal = data.reduce(function (total, currentVal) {
var _total$name, _total$name2, _currentVal$name, _currentVal$name2;
nameWidth = nameWidth < (((_total$name = total.name) === null || _total$name === void 0 ? void 0 : _total$name.length) || 0) ? ((_total$name2 = total.name) === null || _total$name2 === void 0 ? void 0 : _total$name2.length) || 0 : nameWidth;
nameWidth = nameWidth < (((_currentVal$name = currentVal.name) === null || _currentVal$name === void 0 ? void 0 : _currentVal$name.length) || 0) ? ((_currentVal$name2 = currentVal.name) === null || _currentVal$name2 === void 0 ? void 0 : _currentVal$name2.length) || 0 : nameWidth; //remove by 20211227;移除饼状图的单位不在默认显示
// this.buildTitle2Unit(currentVal.unit)
// return (total.value || total) + (currentVal.value || 0)
// return (total?.value || total) + (currentVal?.value || 0)
var res = (total.hasOwnProperty('value') ? total.value : total) + (currentVal.hasOwnProperty('value') ? currentVal.value : 0);
return res;
});
this.dataValueTotal = this.dataValueTotal.hasOwnProperty('value') ? this.dataValueTotal.value : this.dataValueTotal;
return {
length: nameWidth,
total: this.dataValueTotal
};
}
/*
* 计算per占比百分比
* //防止0作为除数
* */
}, {
key: "zeroPer",
value: function zeroPer(value, total) {
if (value == 0) {
return 0;
} else {
return ((value - 0) / total * 100).toFixed(2);
}
}
/*
* 处理parent - 根据各个数据的parent名称进行排序
* 根据总和计算数据data中各个value所占总数的百分比,并将每个value所在对象添加属性per来记录百分比
* */
}, {
key: "convertParentAndAddPer",
value: function convertParentAndAddPer(data) {
var _this4 = this;
//用来特殊字符来标记没有设置parent的数据
var unParent = ' '; //'&BTV&pie&parent&empty&';
var parent = {}; //按照parent排序
data.forEach(function (itm, idx) {
for (var j = 0; j < data.length - 1 - idx; j++) {
if (data[j].parent > data[j + 1].parent) {
var temp = data[j];
data[j] = data[j + 1];
data[j + 1] = temp;
}
}
});
data.forEach(function (itm, idx) {
var _itm$parent;
// itm.per = ((itm.value - 0) / this.dataValueTotal * 100).toFixed(2)
itm.per = _this4.zeroPer(itm.value, _this4.dataValueTotal);
if ((_itm$parent = itm === null || itm === void 0 ? void 0 : itm.parent) !== null && _itm$parent !== void 0 ? _itm$parent : "") {
var _parent$itm$parent;
parent[itm.parent] = (_parent$itm$parent = parent[itm.parent]) !== null && _parent$itm$parent !== void 0 ? _parent$itm$parent : 0; // parent[itm.parent] += itm.value
//JS中计算出现无限小数位问题，浮点数计算精度的问题
parent[itm.parent] = Math.add(parent[itm.parent], itm.value);
} else {
var _parent$unParent;
//如果没有定义parent则使用特殊字符标记
parent[unParent] = (_parent$unParent = parent[unParent]) !== null && _parent$unParent !== void 0 ? _parent$unParent : 0;
parent[unParent] += itm.value;
}
});
var arr = []; //如果有parent的属性只有1个,则先判断其属性是否为’特殊标记‘的没有parent属性
var keyArr = _Object$keys(parent);
if (keyArr.length && !(keyArr.length == 1 && keyArr[0] == unParent)) {
//内层父级饼状图
keyArr.forEach(function (k, i) {
arr.push({
name: k,
value: parent[k],
unit: data[0].unit,
// per: ((parent[k]-0) / this.dataValueTotal * 100).toFixed(2),
per: _this4.zeroPer(parent[k], _this4.dataValueTotal),
itemStyle: {
color: _this4.byteVModel.color[i % _this4.byteVModel.color.length]
}
});
}); // //外层环悬浮时的label背景添加
// Object.assign(this.theme.series.doughnut.emphasis.label, this.theme.labelBackground)
var parentPie = JSON.parse(_JSON$stringify(this.theme.series.pie));
_Object$assign(parentPie, {
z: 4,
data: arr
}); // parentPie.center = this.theme.series.doughnutThinShadowEmptyCircle.center
// parentPie.radius = ["20%", this.theme.series.doughnut.radius[0].replace('%','')-7.5 + '%']
if (String(this.byteVModel.radius[0]).indexOf('%') != -1) {
parentPie.radius = ["20%", String(this.byteVModel.radius[0]).replace('%', '') - 7.5 + '%'];
} else {
var r = Number(this.byteVModel.radius[0]) <= 10 ? '35%' : Number(this.byteVModel.radius[0]) - 7.5;
parentPie.radius = [this.name == 'PieBasic' ? "0%" : "20%", r];
if (this.name == 'PieBasic') {
_Object$assign(parentPie.itemStyle, {
borderColor: this.theme.series.pie.itemStyle.borderColor,
borderJoin: "round",
borderWidth: 1,
shadowColor: "#00000090",
shadowBlur: 10
});
}
}
parentPie.label = {
"formatter": " {b}\n\n{d}%",
"position": "inside",
"color": "#FFFFFF"
};
this.byteVModel.series.push(parentPie);
} else {
var _this$theme$series, _this$theme$series$do, _this$theme$series$do2;
//外层环悬浮时的label背景去除
var bg = JSON.parse(_JSON$stringify(this.theme.labelBackground));
for (var i in bg) {
bg[i] = null;
}
if ((_this$theme$series = this.theme.series) !== null && _this$theme$series !== void 0 && (_this$theme$series$do = _this$theme$series.doughnut) !== null && _this$theme$series$do !== void 0 && (_this$theme$series$do2 = _this$theme$series$do.emphasis) !== null && _this$theme$series$do2 !== void 0 && _this$theme$series$do2.label) {
_Object$assign(this.theme.series.doughnut.emphasis.label, bg);
}
}
}
/*
* 处理title属性用来做单位<br>
* @param {String} unit字符串
* */
}, {
key: "buildTitle2Unit",
value: function buildTitle2Unit(unitStr) {
if (this.byteVModel.title) {
var title = this.byteVModel.title;
if (title.length && title[0].constructor === Object) {
title[0].subtext = unitStr || title[0].subtext;
} else if (title.constructor === Object) {
title.subtext = unitStr || title[0].subtext;
}
}
}
}]);
return PieComponent;
}(EchartsComponent);
export { PieComponent as default };