bytev-charts-beta1.0
Version:
测试版-1.0,版本号为小版本; 基于echarts和JavaScript及ES6封装的一个可以直接调用的图表组件库，内置主题设计，简单快捷，且支持用户自定义配置； npm 安装方式: npm install bytev-charts 若启动提示还需额外install插件,则运行 npm install @babel/runtime-corejs2 即可;
338 lines (289 loc) • 13.9 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.array.reduce.js";
import "core-js/modules/es.number.to-fixed.js";
import "core-js/modules/es.regexp.exec.js";
import "core-js/modules/es.string.replace.js";
import "core-js/modules/es.array.concat.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 DoughnutComponent = /*#__PURE__*/function (_EchartsComponent) {
_inherits(DoughnutComponent, _EchartsComponent);
var _super = _createSuper(DoughnutComponent);
function DoughnutComponent(element, option) {
var _this;
_classCallCheck(this, DoughnutComponent);
_this = _super.call(this, element, option);
_defineProperty(_assertThisInitialized(_this), "name", "DoughnutComponent");
_this.name = 'DoughnutComponent';
return _this;
}
_createClass(DoughnutComponent, [{
key: "buildByteVModel",
value: function buildByteVModel() {
var _this$byteVModel, _this$byteVModel2;
_get(_getPrototypeOf(DoughnutComponent.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$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 = function (params) {
var 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 {
//拼接series数组
this.byteVModel.series = [];
this.buildLegendFormatterAndRich(data);
this.convertParentAndAddPer(data);
}
_get(_getPrototypeOf(DoughnutComponent.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() {// if(this.byteVModel.raidus && this.byteVModel.raidus.length){
// this.byteVModel.series.forEach((itm,idx)=>{
// itm.raidus = this.byteVModel.raidus
// })
// }
}
/*
* 处理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;
}
}
}
/*
* 获取数据data中所有value的和
* 获取数据data中name名字的最大长度
* */
}, {
key: "getDataValueTotalAndNameMaxLength",
value: function getDataValueTotalAndNameMaxLength(data) {
// let nameWidth = 0
// this.dataValueTotal = data.reduce((total, currentVal)=>{
// nameWidth = nameWidth < (total.name?.length || 0) ? (total.name?.length || 0) : nameWidth
// nameWidth = nameWidth < (currentVal.name?.length || 0) ? (currentVal.name?.length || 0) : nameWidth
//
// this.buildTitle2Unit(currentVal.unit)
// let res = (total.hasOwnProperty('value') ? total.value : total) + (currentVal.hasOwnProperty('value') ? currentVal.value : 0)
// return res
// })
// // this.dataValueNameWidth = nameWidth
// return {
// length: nameWidth,
// total: this.dataValueTotal
// }
var nameWidth = 0;
var valueWidth = 0;
this.dataValueTotal = data.reduce(function (total, currentVal) {
var _total$name, _total$name2, _currentVal$name, _currentVal$name2, _ref, _currentVal$unit;
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;
var currValLen = (((_ref = currentVal.value + '') === null || _ref === void 0 ? void 0 : _ref.length) || 0) + (((_currentVal$unit = currentVal.unit) === null || _currentVal$unit === void 0 ? void 0 : _currentVal$unit.length) || 0);
valueWidth = valueWidth < currValLen ? currValLen : valueWidth;
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; // console.log(nameWidth, valueWidth, this.dataValueTotal)
return {
length: nameWidth,
valueLength: valueWidth,
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 _this3 = 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 = _this3.zeroPer(itm.value, _this3.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: _this3.zeroPer(parent[k], _this3.dataValueTotal),
itemStyle: {
color: _this3.byteVModel.color[i % _this3.byteVModel.color.length]
}
});
}); //外层环悬浮时的label背景添加
_Object$assign(this.theme.series.doughnut.emphasis.label, this.theme.labelBackground);
this.theme.series.doughnut.emphasis.label.backgroundColor = '#FFFFFFbf';
var parentPie = this.theme.series.pie;
_Object$assign(this.theme.series.pie, {
// z: 4,
minAngle: this.theme.series.DoughnutLeftRightSpiltMinAngle,
data: arr,
center: this.theme.series.doughnutThinShadowEmptyCircle.center,
// radius: ["0", this.theme.series.doughnutThinShadowEmptyCircle.radius[0].replace('%','')-7.5 + '%'],
radius: ["0", this.theme.series.doughnutThinShadowEmptyCircle.radius[0].replace('%', '') - 8 + '%'],
label: {
"formatter": " {b}\n\n{d}%",
"position": "inside",
"color": "#FFFFFF",
textBorderColor: "#000000",
textBorderWidth: 1,
textBorderDashOffset: 1,
textShadowColor: "#000000",
textShadowBlur: 2
}
});
_Object$assign(this.theme.series.pie.itemStyle, {
borderRadius: 0,
//borderWidth: this.theme.series.doughnutThinShadowEmptyCircle.minAngle,
borderColor: "rgba(".concat(this.theme.firstColorRgbaArr[0] * .1, ", ").concat(this.theme.firstColorRgbaArr[1] * .1, ", ").concat(this.theme.firstColorRgbaArr[2] * .1, ", .5)")
});
this.byteVModel.series.push(parentPie);
} else {
//外层环悬浮时的label背景去除
var bg = JSON.parse(_JSON$stringify(this.theme.labelBackground));
for (var i in bg) {
bg[i] = null;
}
_Object$assign(this.theme.series.doughnut.emphasis.label, bg);
}
}
/*
* 处理数据,为了向环形图数据中添加分割线数据
* @return return 添加了分割线样式的饼图数据arr
* */
}, {
key: "buildDoughnutSpilt2Data",
value: function buildDoughnutSpilt2Data(data, forEachFun) {
var arr = [];
data.forEach(function (m, i) {
arr.push(m);
if (data.length > 1) {
arr.push({
value: 0,
name: m.name,
//标记是分割线
spilt: true,
cursor: "auto",
itemStyle: {
color: 'transparent'
},
emphasis: {
label: {
show: false
}
},
tooltip: {
show: false
}
});
}
forEachFun === null || forEachFun === void 0 ? void 0 : forEachFun(m, i);
});
return arr;
}
}]);
return DoughnutComponent;
}(EchartsComponent);
export { DoughnutComponent as default };