bytev-charts-beta1.0
Version:
测试版-1.0,版本号为小版本; 基于echarts和JavaScript及ES6封装的一个可以直接调用的图表组件库，内置主题设计，简单快捷，且支持用户自定义配置； npm 安装方式: npm install bytev-charts 若启动提示还需额外install插件,则运行 npm install @babel/runtime-corejs2 即可;
526 lines (442 loc) • 23.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$assign from "@babel/runtime-corejs2/core-js/object/assign";
import _Object$keys from "@babel/runtime-corejs2/core-js/object/keys";
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";
import "core-js/modules/es.array.find.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 DoughnutLeftRightComponent = /*#__PURE__*/function (_EchartsComponent) {
_inherits(DoughnutLeftRightComponent, _EchartsComponent);
var _super = _createSuper(DoughnutLeftRightComponent);
function DoughnutLeftRightComponent(element, option) {
var _this;
_classCallCheck(this, DoughnutLeftRightComponent);
_this = _super.call(this, element, option);
_defineProperty(_assertThisInitialized(_this), "name", "DoughnutLeftRightComponent");
_this.name = 'DoughnutLeftRight';
return _this;
}
_createClass(DoughnutLeftRightComponent, [{
key: "buildByteVModel",
value: function buildByteVModel() {
var _this$byteVModel, _this$byteVModel$lege, _this$byteVModel2, _this$byteVModel2$leg, _this$byteVModel3, _this$byteVModel3$leg, _this$byteVModel4;
_get(_getPrototypeOf(DoughnutLeftRightComponent.prototype), "buildByteVModel", this).call(this); //切换皮肤时判断之前是否有自定义unitType和icon
var unitType = ((_this$byteVModel = this.byteVModel) === null || _this$byteVModel === void 0 ? void 0 : (_this$byteVModel$lege = _this$byteVModel.legend) === null || _this$byteVModel$lege === void 0 ? void 0 : _this$byteVModel$lege.unitType) || '';
var icon = ((_this$byteVModel2 = this.byteVModel) === null || _this$byteVModel2 === void 0 ? void 0 : (_this$byteVModel2$leg = _this$byteVModel2.legend) === null || _this$byteVModel2$leg === void 0 ? void 0 : _this$byteVModel2$leg.BTVicon) || ((_this$byteVModel3 = this.byteVModel) === null || _this$byteVModel3 === void 0 ? void 0 : (_this$byteVModel3$leg = _this$byteVModel3.legend) === null || _this$byteVModel3$leg === void 0 ? void 0 : _this$byteVModel3$leg.icon) || ''; //增加自定义属性center和radius,让用户在初始化时即可以调整饼图的位置和大小,并影响与之对应生成的装饰饼们
var center = ((_this$byteVModel4 = this.byteVModel) === null || _this$byteVModel4 === void 0 ? void 0 : _this$byteVModel4.center) || '';
this.byteVModel.legend = JSON.parse(_JSON$stringify(this.theme.legendDoughnutLeftRight));
this.byteVModel.legend.unitType = unitType ? unitType : this.byteVModel.legend.unitType;
this.byteVModel.legend.icon = icon ? icon : this.byteVModel.legend.icon;
this.byteVModel.center = center ? center : this.theme.series.DoughnutLeftRightCenter;
this.byteVModel.title = [_Object$assign(JSON.parse(_JSON$stringify(this.theme.radarAndPieUnit)), {
top: 5
})]; //modify by damon 20220323 取消自动根据容器宽高比分布两列图例的功能
// this.convertCenterByWidthHeight()
delete this.byteVModel.tooltip.axisPointer;
delete this.theme.label.position; //
// //拼接series数组
// let center = this.byteVModel?.series?.[0].center || []
// if(center.length){
// this.byteVModel.series.forEach((itm,idx)=>{
// itm.center = center
// })
// }else{
// this.byteVModel.series
// }
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(DoughnutLeftRightComponent.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) {
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; //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; // 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]
}
});
}); // modigy by damon 20220911 改为无论有没有父级, 悬浮时label背景的都显示
// //外层环悬浮时的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;
} // remove by damon 20220911 改为无论有没有父级, 悬浮时label背景的都显示
// Object.assign(this.theme.series.doughnut.emphasis.label, bg)
} // add by damon 20220911 改为无论有没有父级, 悬浮时label背景的都显示
_Object$assign(this.theme.series.doughnut.emphasis.label, this.theme.labelBackground); // this.theme.series.doughnut.emphasis.label.backgroundColor = '#FFFFFFbf'
this.theme.series.doughnut.emphasis.label.backgroundColor = 'rgba(255,255,255,0.85)';
}
/*
* 动态拼接生成图例
* */
}, {
key: "buildLegendFormatterAndRich",
value: function buildLegendFormatterAndRich(data) {
var _this$byteVModel5, _this$byteVModel5$leg;
if (!(this !== null && this !== void 0 && (_this$byteVModel5 = this.byteVModel) !== null && _this$byteVModel5 !== void 0 && (_this$byteVModel5$leg = _this$byteVModel5.legend) !== null && _this$byteVModel5$leg !== void 0 && _this$byteVModel5$leg.icon)) {
return;
}
var legend = this.byteVModel.legend;
this.setLegendStyleByIcon();
var lengthAndTotal = this.getDataValueTotalAndNameMaxLength(data); // //动态拼接处理图例
// legend.padding[1] = (!legend.unitType || legend.unitType == 'none') ? Math.abs(legend.padding[1]) : (0 - Math.abs(legend.padding[1]))
// if(legend.padding && legend.padding.length){
// legend.padding[1] = (!legend.unitType || legend.unitType == 'none') ? Math.abs(legend.padding[1]) : (0 - Math.abs(legend.padding[1]))
// }
legend.textStyle.rich.name.width = lengthAndTotal.length ? lengthAndTotal.length * legend.textStyle.rich.name.fontSize + 2 : "auto";
legend.textStyle.rich.value.width = lengthAndTotal.valueLength ? lengthAndTotal.valueLength * legend.textStyle.rich.name.fontSize + 2 : "auto";
legend.data = data;
legend.formatter = function (param) {
// let obj = this.byteVModel.series[0].data.find((itm,idx)=>{
// return itm.name == param && !itm.spilt
// }) || 0
// if(!obj){
// obj = this.byteVModel.series[2]?.data?.find?.((itm,idx)=>{
// return itm.name == param && !itm.spilt
// }) || 0
// }
var obj = data.find(function (itm, idx) {
return itm.name == param && !itm.spilt;
}) || 0;
if (obj) {
var res = '';
if (legend.unitType == '%' || legend.unitType == 'per') {
res = '{name|' + param + '}' + '{per|' + Number(obj.per || 0) + '%}';
} else if (legend.unitType == 'value') {
res = '{name|' + param + '}' + '{value|' + Number(obj.value || 0) + (obj.unit || '') + '}';
} else if (legend.unitType == 'value&per' || legend.unitType == 'value&%') {
res = '{name|' + param + '}' + '{value|' + Number(obj.value || 0) + (obj.unit || '') + '}' + '{per|' + Number(obj.per || 0) + '%}';
} else if (legend.unitType == 'per&value' || legend.unitType == '%&value') {
res = '{name|' + param + '}' + '{per|' + Number(obj.per || 0) + '%}' + '{value|' + Number(obj.value || 0) + (obj.unit || '') + '}';
} else {
res = '{name|' + param + '}';
}
return res;
}
};
}
/*
* 处理数据,为了向环形图数据中添加分割线数据
* @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;
}
/*
* 根据图例icon设置图例样式
* */
}, {
key: "setLegendStyleByIcon",
value: function setLegendStyleByIcon() {
var _this$byteVModel6, _this$byteVModel6$leg;
if (!(this !== null && this !== void 0 && (_this$byteVModel6 = this.byteVModel) !== null && _this$byteVModel6 !== void 0 && (_this$byteVModel6$leg = _this$byteVModel6.legend) !== null && _this$byteVModel6$leg !== void 0 && _this$byteVModel6$leg.icon)) {
return;
}
_get(_getPrototypeOf(DoughnutLeftRightComponent.prototype), "setLegendStyleByIcon", this).call(this);
var legend = this.byteVModel.legend;
legend.BTVicon = legend.icon;
var themeLegend = JSON.parse(_JSON$stringify(this.theme.legendDoughnutLeftRight));
switch (legend.icon) {
//竖线
case 'verticalBar':
_Object$assign(legend, {
icon: "rect",
itemWidth: 4,
itemHeight: 44
});
legend.textStyle.padding = -10;
legend.textStyle.rich.name.padding[3] = 20;
legend.textStyle.rich.name.borderRadius = 0;
break;
default:
legend.itemWidth = themeLegend.itemWidth;
legend.itemHeight = themeLegend.itemHeight; // legend.textStyle = themeLegend.textStyle
legend.textStyle.padding = themeLegend.textStyle.padding;
legend.textStyle.rich.name.padding = themeLegend.textStyle.rich.name.padding;
legend.textStyle.rich.name.borderRadius = legend.textStyle.rich.name.borderRadius;
break;
} // //设置背景颜色
// /*
// * 为环形图左右结构的legend新增自定义属性 backgroundColor,
// * 此backgroundColor不会为图例添加整体背景颜色, 而是根据此色值设置图例的富文本背景色
// * */
// let bg = this.byteVModel.legend?.backgroundColor || 'transparent'
// if(bg){
// this.byteVModel.legend.textStyle.rich.name.backgroundColor =
// this.byteVModel.legend.textStyle.rich.per.backgroundColor =
// this.byteVModel.legend.textStyle.rich.value.backgroundColor = bg
// delete this.byteVModel.legend.backgroundColor
// }
}
/*
* 判断容器的宽高比并处理center,
* 因为左右布局结构的环形图 pie的center根据百分比确定的位置可能并不是很完美,
* 故加此更具宽高比动态处理
* */
}, {
key: "convertCenterByWidthHeight",
value: function convertCenterByWidthHeight() {
var x = this.theme.series.DoughnutLeftRightCenter[0].replace('%', '') - 0;
var y = this.theme.series.DoughnutLeftRightCenter[1].replace('%', '') - 0; // console.log('原始百分比',x,y)
var w = this.componentContainer.offsetWidth;
var h = this.componentContainer.offsetHeight; // console.log('容器宽高',w,h)
var wx = w * x / 100;
var hy = h * y / 100; // console.log('实际像素',wx,hy)
var min = wx < hy ? wx : hy;
var center = JSON.parse(_JSON$stringify(this.theme.series.DoughnutLeftRightCenter));
var legendType = 'scroll'; //计算宽高比
if (w / h >= 1.75) {
legendType = 'plain';
center = [min, min];
} //更新皮肤中所有"环形图-左右结构"的center
this.theme.series.doughnutThinShadow.center = this.theme.series.doughnutThinShadowEmptyCircle.center = this.theme.series.doughnutBeadSight_X.center = this.theme.series.doughnutBeadSight_OuterBroken.center = this.theme.series.doughnutBeadSight_OuterThinDoughnut.center = this.theme.series.doughnutBeadSight_pie.center = this.theme.series.doughnutBeadSight_InnerThinDoughnut.center = this.theme.series.doughnutInnerRotatingGradientDoughnut.center = this.theme.series.doughnutInnerRotatingGradientCircle.center = this.theme.series.radialBarGraph.center = this.theme.series.radialBarGraphBackGround.center = this.theme.series.DoughnutLeftRightCenter = center;
this.byteVModel.legend.type = legendType;
} //由于环形图左右结构一键统一更换所有组件皮肤时,会产生更换延迟(当前皮肤为上一次皮肤),故在此继承setTheme方法多换一次
}, {
key: "setTheme",
value: function setTheme(themeId) {
_get(_getPrototypeOf(DoughnutLeftRightComponent.prototype), "setTheme", this).call(this, themeId);
this.setOption(this.byteVModel, true);
}
/*
*
* */
}, {
key: "showLegendBackground",
value: function showLegendBackground() {
var _this$componentInstan, _this$componentInstan2;
var f = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
var legend = this.byteVModel.legend;
if (f) {
legend.textStyle.rich.name.backgroundColor = legend.textStyle.rich.per.backgroundColor = legend.textStyle.rich.value.backgroundColor = this.byteVModel.color[0] + '20'; // legend.itemGap = this.theme.legendDoughnutLeftRight.itemGap
// legend.padding = this.theme.legendDoughnutLeftRight.padding
// legend.right = this.theme.legendDoughnutLeftRight.right
} else {
delete legend.textStyle.rich.name.backgroundColor;
delete legend.textStyle.rich.per.backgroundColor;
delete legend.textStyle.rich.value.backgroundColor; // legend.itemGap = 16
// legend.padding = [10, 10, 10, 10]
// legend.right = 10
}
(_this$componentInstan = this.componentInstance) === null || _this$componentInstan === void 0 ? void 0 : (_this$componentInstan2 = _this$componentInstan.setOption) === null || _this$componentInstan2 === void 0 ? void 0 : _this$componentInstan2.call(_this$componentInstan, this.byteVModel, true);
}
}]);
return DoughnutLeftRightComponent;
}(EchartsComponent);
export { DoughnutLeftRightComponent as default };