bytev-charts-beta1.0
Version:
测试版-1.0,版本号为小版本; 基于echarts和JavaScript及ES6封装的一个可以直接调用的图表组件库，内置主题设计，简单快捷，且支持用户自定义配置； npm 安装方式: npm install bytev-charts 若启动提示还需额外install插件,则运行 npm install @babel/runtime-corejs2 即可;
697 lines (619 loc) • 21.4 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 _Object$assign from "@babel/runtime-corejs2/core-js/object/assign";
import _JSON$stringify from "@babel/runtime-corejs2/core-js/json/stringify";
import "core-js/modules/es.array.concat.js";
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";
/*
* 存储echarts所有的series基础样式
* */
import Util from "../../../util/Util.class.js";
var Series = /*#__PURE__*/function () {
function Series(color) {
_classCallCheck(this, Series);
_defineProperty(this, "color", []);
_defineProperty(this, "firstColorRgbaArr", []);
_defineProperty(this, "colorLinearXYArr", [//左上
{
"x": 1,
"y": 1,
"x2": 0,
"y2": 0
}, //正上
{
"x": 0,
"y": 1,
"x2": 0,
"y2": 0
}, //右上
{
"x": 0,
"y": 1,
"x2": 1,
"y2": 0
}, //正右
{
"x": 0,
"y": 0,
"x2": 1,
"y2": 0
}, //右下
{
"x": 0,
"y": 0,
"x2": 1,
"y2": 1
}, //正下
{
"x": 1,
"y": 0,
"x2": 1,
"y2": 1
}, //左下
{
"x": 1,
"y": 0,
"x2": 0,
"y2": 1
}, //正左
{
"x": 1,
"y": 0,
"x2": 0,
"y2": 0
}]);
_defineProperty(this, "bar", {
type: "bar",
//柱子最大宽
// barMaxWidth: "25%",
barMaxWidth: "20%",
//柱子间距
barGap: .5,
emphasis: {
label: {}
},
itemStyle: {} // animationEasing: this.animationEasing
});
_defineProperty(this, "scatter", {
type: "scatter",
symbolSize: function symbolSize(param) {
//return Math.sqrt(param) / 5e2;
return Math.sqrt(param);
},
itemStyle: {
// borderColor: '#FFFFFF' + 'fa',
borderColor: "rgba(".concat(this.firstColorRgbaArr[0] * .6, ", ").concat(this.firstColorRgbaArr[1] * .6, ", ").concat(this.firstColorRgbaArr[2] * .6, ", 1)"),
borderWidth: 1
},
emphasis: {
label: {} //this.label
} // animationEasing: this.animationEasing
});
_defineProperty(this, "line", {
type: "line",
symbolSize: 1,
symbol: 'circle',
sampling: 'lttb',
emphasis: {
label: {}
},
//最后一个label
endLabel: {
show: true,
valueAnimation: true // align: "center",
// verticalAlign: "bottom",
} // animationEasing: this.animationEasing
});
_defineProperty(this, "barZebra", {
type: 'pictorialBar',
// barGap: "10%",
barGap: this.bar.barGap,
barWidth: this.bar.barMaxWidth,
symbol: 'rect',
symbolRepeat: 'true',
symbolMargin: '50%',
symbolSize: ['90%', '20%'],
emphasis: {
label: {} //this.label
}
});
_defineProperty(this, "pie", {
// z: 9,
type: 'pie',
selectedMode: true,
//'single'，//'multiple'
//是否在无数据的时候显示一个占位圆
showEmptyCircle: false,
center: ['50%', '56%'],
radius: [0, '70%'],
//标签的统一布局配置。 从echarts v5.0.0 开始支持
labelLayout: {
//标签是否可以允许用户通过拖拽二次调整位置。
draggable: true
},
label: {
// textBorderColor: "#000000",
// textBorderWidth: 1,
// textBorderDashOffset: 1,
// textShadowColor: "#000000",
// textShadowBlur: 2,
"color": "#FFFFFF",
formatter: ' {b|{b} : }{per|{d}%} \n{hr|}',
rich: {
// b: {
// lineHeight: 20
// },
hr: {
borderColor: '#374158',
width: '100%',
borderWidth: 1,
height: 0.5,
lineHeight: 10
}
}
},
emphasis: {},
//标签线
labelLine: {
show: true,
lineStyle: {
color: "#374158"
},
length: 10,
length2: 10
},
itemStyle: {
borderRadius: 3,
borderWidth: 1,
shadowColor: '#ffffff' // borderColor: `rgba(${this.firstColorRgbaArr[0]*.6}, ${this.firstColorRgbaArr[1]*.6}, ${this.firstColorRgbaArr[2]*.6}, 1)`,
}
});
_defineProperty(this, "doughnut", _Object$assign(JSON.parse(_JSON$stringify(this.pie)), {
center: this.pie.center,
radius: ['45%', '70%'],
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
// show: false,
show: true,
fontSize: 20,
//25,
formatter: function formatter(param) {
return '{name|' + param.data.name + '}' + '\n{per|' + (param.data.per || 0) + '%}' + '\n{unit|' + param.data.value + (param.data.unit || '') + '}';
},
rich: {
name: {
padding: [6, 0, 0, 0]
},
per: {
padding: [10, 0, 4, 0]
},
unit: {
padding: [4, 0, 4, 0]
}
}
},
labelLine: {
show: false
}
}
}));
_defineProperty(this, "rose", _Object$assign(JSON.parse(_JSON$stringify(this.pie)), {
center: this.pie.center,
radius: ['15%', '66%']
}));
_defineProperty(this, "roseSolidCircle", {
z: 9,
silent: true,
type: 'pie',
legendHoverLink: false,
center: this.pie.center,
radius: [0, this.rose.radius[0]],
label: {
show: false
},
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: '#FFFFFF' // 0% 处的颜色
}, {
offset: 0.85,
color: '#ffffff' // 0% 处的颜色
}, {
offset: 1,
color: '#ffffff' // 100% 处的颜色
}],
global: false // 缺省为 false
},
borderColor: '#ffffff',
borderWidth: 1,
shadowBlur: 2,
shadowColor: '#ffffff'
},
data: [1]
});
_defineProperty(this, "DoughnutLeftRightCenter", ['33%', '50%']);
_defineProperty(this, "DoughnutLeftRightSpiltMinAngle", 2.5);
_defineProperty(this, "doughnutThinShadowRadius", ['73%', '78%']);
_defineProperty(this, "doughnutBeadSightRadius", ['56%', '65%']);
_defineProperty(this, "doughnutThinShadow", _Object$assign(JSON.parse(_JSON$stringify(this.pie)), {
minAngle: this.DoughnutLeftRightSpiltMinAngle,
center: this.DoughnutLeftRightCenter,
// radius: ['73%', '78%'],
radius: this.doughnutThinShadowRadius,
// label: {show: false},
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
itemStyle: {
borderRadius: 0,
borderWidth: 0,
shadowBlur: 0
},
emphasis: this.doughnut.emphasis
}));
_defineProperty(this, "doughnutThinShadowEmptyCircle", _Object$assign(JSON.parse(_JSON$stringify(this.doughnutThinShadow)), {
selectedMode: false,
radius: ['58%', this.doughnutThinShadow.radius[0]],
data: [],
legendHoverLink: false
}));
_defineProperty(this, "doughnutBeadSight_X", {
type: 'pie',
silent: true,
minAngle: 0.85,
startAngle: 135,
center: this.DoughnutLeftRightCenter,
radius: ['65%', '100%'],
data: [],
labelLine: this.doughnutThinShadow.labelLine,
emphasis: this.doughnutThinShadow.emphasis,
itemStyle: {
color: 'transparent'
}
});
_defineProperty(this, "doughnutBeadSight_OuterBroken", {
type: 'pie',
silent: true,
minAngle: 91,
startAngle: 135,
center: this.DoughnutLeftRightCenter,
radius: ['80%', '86%'],
data: [{
value: 0,
itemStyle: {
color: 'transparent'
}
}, 1],
labelLine: this.doughnutThinShadow.labelLine,
emphasis: this.doughnutThinShadow.emphasis,
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [{
offset: 0,
color: '#ffffff' // 0% 处的颜色
}, {
offset: 1,
color: '#00ff00' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
});
_defineProperty(this, "doughnutBeadSight_OuterThinDoughnut", {
type: 'pie',
silent: true,
minAngle: 45,
legendHoverLink: false,
center: this.DoughnutLeftRightCenter,
radius: ['72%', '74%'],
data: [1],
labelLine: this.doughnutThinShadow.labelLine,
emphasis: this.doughnutThinShadow.emphasis,
itemStyle: {}
});
_defineProperty(this, "doughnutBeadSight_pie", {
z: 9,
type: 'pie',
minAngle: this.DoughnutLeftRightSpiltMinAngle,
showEmptyCircle: this.pie.showEmptyCircle,
selectedMode: this.pie.selectedMode,
center: this.DoughnutLeftRightCenter,
// radius: ['56%', '65%'],
radius: this.doughnutBeadSightRadius,
label: {
show: false
},
labelLine: this.doughnutThinShadow.labelLine,
emphasis: this.doughnut.emphasis
});
_defineProperty(this, "doughnutBeadSight_InnerThinDoughnut", {
type: 'pie',
silent: true,
minAngle: 45,
legendHoverLink: false,
center: this.DoughnutLeftRightCenter,
radius: ['45%', '50%'],
data: [1],
labelLine: this.doughnutThinShadow.labelLine,
emphasis: this.doughnutThinShadow.emphasis,
itemStyle: {}
});
_defineProperty(this, "doughnutInnerRotatingGradientDoughnut", _Object$assign(JSON.parse(_JSON$stringify(this.doughnutBeadSight_OuterThinDoughnut)), {
center: this.DoughnutLeftRightCenter
}));
_defineProperty(this, "doughnutInnerRotatingGradientCircle", _Object$assign(JSON.parse(_JSON$stringify(this.roseSolidCircle)), {
center: this.DoughnutLeftRightCenter
}));
_defineProperty(this, "radialBarGraph", _Object$assign(JSON.parse(_JSON$stringify(this.doughnutThinShadow)), {
selectedMode: false,
// minAngle: 90,
//是否顺时针排布
clockwise: false,
label: {
show: false
},
// labelLine: this.pie.labelLine,
center: this.DoughnutLeftRightCenter,
// emphasis: {
// label: {
// show: true,
// "fontSize": 16,
// position: 'inside',
// width: 2000,
// formatter: '{c}'
// },
// labelLine: {show: true},
// },
itemStyle: {
borderRadius: 50
},
data: []
}));
_defineProperty(this, "radialBarGraphBackGround", _Object$assign(JSON.parse(_JSON$stringify(this.radialBarGraph)), {
z: 1,
// // silent: true,
// //minAngle: 360 - this.seriesRadialBarGraph.minAngle,
// center: this.DoughnutLeftRightCenter,
// data: [
// 1, {
// value: 0,
// itemStyle: {
// color: 'transparent'
// }
// }
// ]
minAngle: 90,
silent: true,
//minAngle: 360 - this.seriesRadialBarGraph.minAngle,
center: this.DoughnutLeftRightCenter,
data: [1, {
value: 0,
itemStyle: {
color: 'transparent' // color: 'blue'
}
}],
label: {
show: false
},
emphasis: {
label: {
show: false
}
},
tooltip: {
show: false
}
}));
_defineProperty(this, "gauge", {
name: '',
type: 'gauge',
min: 0,
max: 100,
// startAngle: 180,
// endAngle: 0,
splitLine: {
show: true,
length: "5%",
distance: 10,
lineStyle: {
color: "#269DF0",
width: 2
}
},
axisTick: {
show: true,
length: "3%",
distance: 10,
lineStyle: {
color: "#269DF0",
width: 1
}
},
axisLabel: {
show: true,
distance: 15,
color: '#bbbbbb'
},
title: {
color: '#bbbbbb'
},
detail: {
formatter: '{value}',
color: '#bbbbbb'
},
axisLine: {
show: true,
lineStyle: {
// 轴线样式
width: 12,
// 宽度
color: [[0, '#269DF0'], [1, '#269DF0']],
// 颜色
opacity: 0.7
}
},
progress: {
show: true,
width: 20,
// width: true,
itemStyle: {
color: "#269DF0",
// borderWidth: 10,
borderColor: "#269DF0"
}
},
data: [// { name: 'SCORE', value: 50 }
]
});
//this.toString()
this.color = color; //当前皮肤的第一个颜色的rgba数组 例: [255,255,255,1]
this.firstColorRgbaArr = Util.colorRgbaArr(this.color[0]);
this.updateProperty();
} //颜色池
_createClass(Series, [{
key: "updateProperty",
value:
/*
* 更新加工处理byteModel的series, 一些特定的属性需要根据当前切换的子类皮肤色值来动态改变value
* propertyName - model的属性名
* theme - 当前皮肤色值color数组
* */
function updateProperty(color) {
var _this = this;
this.scatter.itemStyle.borderColor = this.pie.itemStyle.borderColor = this.doughnut.itemStyle.borderColor = "rgba(".concat(this.firstColorRgbaArr[0] * .6, ", ").concat(this.firstColorRgbaArr[1] * .6, ", ").concat(this.firstColorRgbaArr[2] * .6, ", .6)"); // this.doughnut.label.show = false
// this.doughnut.label.position = 'center'
//玫瑰图中间的实心装饰圆
this.roseSolidCircle.itemStyle.color.colorStops.forEach(function (m, i) {
if (i) m.color = _this.color[0];
});
this.roseSolidCircle.itemStyle.borderColor = this.color[0]; //重写瞄准星环形图的各个装饰圆环的颜色
// this.seriesDoughnutBeadSight.seriesOuterBroken.itemStyle.color?.colorStops?.forEach((m,i)=>{
// m.color = this.color[0]
// })
//X装饰
for (var i = 0; i < 4; i++) {
this.doughnutBeadSight_X.data.push({
value: 0,
itemStyle: {
color: {
type: 'linear',
x: 0,
y: i < 2 ? 0 : 1,
x2: 0,
y2: i < 2 ? 1 : 0,
colorStops: [{
offset: 0,
color: this.color[0] + '00' // 0% 处的颜色
}, {
offset: 0.5,
color: this.color[0] // 0% 处的颜色
}, {
offset: 1,
color: this.color[0] // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
}, 1);
} //缺失圆环装饰
this.doughnutBeadSight_OuterBroken.itemStyle.color.colorStops.forEach(function (m, i) {
m.color = _this.color[0] + (i ? 'cc' : '10');
}); //最外层的缺失环下面的细装饰环
this.doughnutBeadSight_OuterThinDoughnut.itemStyle.color = this.color[0] + '80'; // this.doughnutBeadSight_OuterThinDoughnut.itemStyle.color = this.doughnutBeadSight_OuterThinDoughnut.emptyCircleStyle.color = this.color[0] + '80'
//最内层的圆装饰环
this.doughnutBeadSight_InnerThinDoughnut.itemStyle.color = this.color[0] + '50'; //中间旋转的装饰渐变小圆形
// this.doughnutInnerRotatingGradientCircle = JSON.parse(JSON.stringify(this.roseSolidCircle))
// this.doughnutInnerRotatingGradientCircle.itemStyle.color.y = 1
// this.doughnutInnerRotatingGradientCircle.itemStyle.color.x2 = 0
this.doughnutInnerRotatingGradientCircle.itemStyle.borderWidth = 0;
this.doughnutInnerRotatingGradientCircle.itemStyle.shadowColor = "#000";
this.doughnutInnerRotatingGradientCircle.itemStyle.color.colorStops.forEach(function (m, i) {
m.color = "rgba(".concat(_this.firstColorRgbaArr[0] * .5, ", ").concat(_this.firstColorRgbaArr[1] * .5, ", ").concat(_this.firstColorRgbaArr[2] * .5, ", ").concat([0, .3, .4][i], ")");
});
/*
* 环形图内部旋转的渐变圆环
* 环形图中间旋转的装饰环(环边框上下渐变)
* */
this.doughnutInnerRotatingGradientDoughnut.itemStyle = JSON.parse(_JSON$stringify(this.doughnutBeadSight_OuterBroken.itemStyle));
this.doughnutInnerRotatingGradientDoughnut.itemStyle.color = JSON.parse(_JSON$stringify(this.doughnutInnerRotatingGradientCircle.itemStyle.color));
this.doughnutInnerRotatingGradientDoughnut.itemStyle.color.colorStops.forEach(function (m, i) {
// m.color = this.color[0] + (i?'e6':'01')
m.color = "rgba(".concat(_this.firstColorRgbaArr[0], ", ").concat(_this.firstColorRgbaArr[1], ", ").concat(_this.firstColorRgbaArr[2], ", ").concat([0, .7, 1][i], ")");
});
_Object$assign(this.doughnutInnerRotatingGradientDoughnut.itemStyle.color, this.colorLinearXYArr[1]);
_Object$assign(this.doughnutInnerRotatingGradientCircle.itemStyle.color, this.colorLinearXYArr[1]); //玉珏图/径向环形图 每个玉环的装饰背景
this.radialBarGraphBackGround.itemStyle.color = "rgba(".concat(this.firstColorRgbaArr[0] / 3, ", ").concat(this.firstColorRgbaArr[1] / 3, ", ").concat(this.firstColorRgbaArr[2] / 3, ", 1)"); //仪表盘的color
this.gauge.splitLine.lineStyle.color = this.gauge.axisTick.lineStyle.color = this.gauge.progress.itemStyle.color = this.gauge.progress.itemStyle.borderColor = this.color[0];
this.gauge.detail.color = this.color[0];
this.gauge.axisLine.lineStyle.color.forEach(function (m) {
m[1] = _this.color[0];
});
} //转换计算细阴影环形图的radius - 默认['73%', '78%']
}, {
key: "convertDoughnutThinShadowRadius",
value: function convertDoughnutThinShadowRadius() {
var radius = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.doughnutThinShadowRadius;
var r0 = String(radius[0]).replace('%', '') - 0;
var r1 = String(radius[1]).replace('%', '') - 0;
this.doughnutThinShadow.radius = [r0 + '%', r1 + '%']; //细阴影环形饼图 修饰中间的空心半透明圆
this.doughnutThinShadowEmptyCircle.radius[0] = r0 - (r1 - r0) * 3 + '%';
this.doughnutThinShadowEmptyCircle.radius[1] = r0 + '%'; // //细阴影环形图 - 中间旋转的装饰环(环边框和环内部背景上下渐变)
// this.doughnutInnerRotatingGradientDoughnut.radius = [radius[0]-1, this.doughnutThinShadowEmptyCircle.radius[0] - 6,]
// //细阴影环形图 - 环形图中间旋转的近透明装饰圆(环内部背景上下渐变)
// this.doughnutInnerRotatingGradientDoughnut.radius = [0, this.doughnutThinShadowEmptyCircle.radius[0] - 8,]
} //转换计算瞄准星环形图的radius - 默认['56%', '65%']
}, {
key: "convertDoughnutBeadSight",
value: function convertDoughnutBeadSight() {
var radius = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.doughnutBeadSightRadius;
var r0 = String(radius[0]).replace('%', '') - 0;
var r1 = String(radius[1]).replace('%', '') - 0; //装数据的环
this.doughnutBeadSight_pie.radius = [r0 + '%', r1 + '%']; //最外层的缺失环下面的细装饰环
this.doughnutBeadSight_OuterThinDoughnut.radius[0] = r1 + 7 + '%';
this.doughnutBeadSight_OuterThinDoughnut.radius[1] = r1 + 7 + 2 + '%'; //最外层的上下渐变缺失装饰环
this.doughnutBeadSight_OuterBroken.radius[0] = r1 + 7 + 6 + '%';
this.doughnutBeadSight_OuterBroken.radius[1] = r1 + 7 + 2 + 6 + 6 + '%'; //最外层的X装饰
this.doughnutBeadSight_X.radius[0] = r1 + '%';
this.doughnutBeadSight_X.radius[1] = r1 * 1.54 + '%'; //最内层的圆装饰环
this.doughnutBeadSight_InnerThinDoughnut.radius[0] = r0 - 6 - 5 + '%';
this.doughnutBeadSight_InnerThinDoughnut.radius[1] = r0 - 6 + '%';
} //
//转换计算//玉珏图/径向环形图的radius - 默认['33%', '50%']
}, {
key: "convertRadialBarGraphRadius",
value: function convertRadialBarGraphRadius() {
var radius = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.DoughnutLeftRightCenter;
var r0 = String(radius[0]).replace('%', '') - 0;
var r1 = String(radius[1]).replace('%', '') - 0; //玉珏图/径向环形图
this.radialBarGraph.radius = //玉珏图/径向环形图 每个玉环的装饰背景
this.radialBarGraphBackGround.radius = [r0 + '%', r1 + '%'];
}
}]);
return Series;
}();
export { Series as default };