bytev-charts
Version:
基于echarts和JavaScript及ES6封装的一个可以直接调用的图表组件库，内置主题设计，简单快捷，且支持用户自定义配置； npm 安装方式: npm install bytev-charts 若启动提示还需额外install插件,则运行 npm install @babel/runtime-corejs2 即可;
841 lines (762 loc) • 23.9 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 _parseInt from "@babel/runtime-corejs2/core-js/parse-int";
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.date.to-string.js";
import "core-js/modules/es.object.to-string.js";
import "core-js/modules/es.regexp.to-string.js";
import "core-js/modules/es.array.slice.js";
import "core-js/modules/es.function.name.js";
import "core-js/modules/es.array.for-each.js";
import "core-js/modules/web.dom-collections.for-each.js";
import "core-js/modules/es.array.concat.js";
/*
* 主题皮肤抽象类
* */
import Print from "../print/Print.class.js";
import Util from "../util/Util.class.js";
var Theme = /*#__PURE__*/function () {
function Theme() {// console.print("Theme")
//this.toString()
_classCallCheck(this, Theme);
_defineProperty(this, "color", []);
_defineProperty(this, "backgroundColor", 'transparent');
_defineProperty(this, "firstColorRgbaArr", []);
_defineProperty(this, "animationDuration", 2000);
_defineProperty(this, "animationEasing", "sinusoidalOut");
_defineProperty(this, "animationDurationUpdate", function (idx) {
// 越往后的数据时长越大
return idx * 500;
});
_defineProperty(this, "animationDelayUpdate", function (idx) {
// 越往后的数据延迟越大
return idx * 500;
});
_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, "title", null);
_defineProperty(this, "grid", {
top: 60,
left: 20,
right: 40,
bottom: 20,
containLabel: true
});
_defineProperty(this, "nameTextStyle", {
//字体大小
fontSize: 14,
//字体颜色
color: '#BBBBBC'
});
_defineProperty(this, "legendTextStyle", {
"fontSize": 14,
"color": "#FFFFFF"
});
_defineProperty(this, "radarAndPieUnit", {
subtext: '',
left: '15',
top: 35,
subtextStyle: {
fontSize: this.nameTextStyle.fontSize,
color: this.nameTextStyle.color,
align: "left"
}
});
_defineProperty(this, "legend", {
type: "scroll",
left: 'right',
padding: [10, 20, 10, 20],
itemGap: 20,
//icon: "roundRect",
/*
* 为legend新增自定义属性 unitType，环形饼状图特有自定义属性：图例单位类型<br>
* @param {String} unitType：<br>
* 'none' - 不显示<br>
* ‘%’ - 显示百分比<br>
* ‘value’ - 显示数据+单位<br>
* */
unitType: 'none',
textStyle: {
"fontSize": this.legendTextStyle.fontSize,
"color": this.legendTextStyle.color
},
pageTextStyle: {
color: this.nameTextStyle.color
}
});
_defineProperty(this, "legendDoughnutLeftRight", {
/*
* 为环形图左右结构的legend新增自定义属性 unitType，环形饼状图特有自定义属性：图例单位类型<br>
* @param {String} unitType：<br>
* 'none' - 不显示<br>
* ‘%’或'per'或'percent' - 显示百分比<br>
* ‘value’ - 显示数据+单位<br>
* */
unitType: 'none',
// backgroundColor: '#0872EC30',
type: this.legend.type,
/*
* 图例类型
* 除echarts的('circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'),<br>
* 还新增了自定义属性'竖线'<br>
* verticalBar - 竖线<br>
* */
icon: "rect",
top: 'center',
right: 'right',
orient: 'vertical',
height: "80%",
// itemWidth: 4,
// itemHeight: 40,
padding: [10, 10, 10, 20],
itemGap: 10,
itemWidth: 14,
itemHeight: 14,
textStyle: {
"color": this.legendTextStyle.color,
padding: -33,
//-40,
// padding: [0,0,0,-40],
rich: {
name: {
fontSize: 16,
// backgroundColor: '#0872EC30',
padding: [15, 10, 13, 40],
align: 'left',
borderRadius: [20, 0, 0, 20]
},
per: {
fontSize: 16,
align: 'left',
// backgroundColor: '#0872EC30',
padding: [15, 25, 13, 0]
},
value: {
fontSize: 16,
align: 'left',
// backgroundColor: '#0872EC30',
padding: [15, 25, 13, 0]
}
}
},
pageTextStyle: this.legend.pageTextStyle
});
_defineProperty(this, "tooltip", {
//是否将 tooltip 框限制在图表的区域内。
confine: true,
//触发类型。 - 'item' 'axis' 'none'
trigger: 'item',
axisPointer: {
type: "cross"
},
backgroundColor: 'rgba(0,0,0,0.8)',
textStyle: {
fontSize: 12 //14,
// fontColor: '#FFFFFF',
}
});
_defineProperty(this, "xAxis", {
//是否有边界
boundaryGap: false,
//坐标轴刻度标签
axisLabel: {
fontSize: 12,
//16,
color: this.nameTextStyle.color //强制显示所有标签。
//interval: 0,
},
//坐标轴刻度
axisTick: {
show: true
},
//轴线样式
axisLine: {
show: true,
lineStyle: {
color: "#374158",
width: 2
}
},
nameTextStyle: {
fontSize: this.nameTextStyle.fontSize,
color: this.nameTextStyle.color,
align: "right",
verticalAlign: "bottom"
},
splitArea: {
show: false,
interval: 0,
areaStyle: {
color: ['#37415830', 'rgba(0,0,0,0)']
}
}
});
_defineProperty(this, "yAxis", {
//是否有边界
boundaryGap: false,
//坐标轴刻度标签
axisLabel: {
fontSize: 12,
//16,
color: this.nameTextStyle.color //强制显示所有标签。
//interval: 0,
},
//轴线样式
axisLine: {
lineStyle: {
color: "#70a3b8",
width: 2
}
},
//分隔线
splitLine: {
lineStyle: {
type: "dashed",
color: "rgba(49, 61, 87, 1)"
}
},
nameTextStyle: {
fontSize: this.nameTextStyle.fontSize,
color: this.nameTextStyle.color,
align: "left",
verticalAlign: "bottom"
},
min: function min(value) {
var a = value.min.toString();
if (value.min >= 0 && value.min <= 10) {
return 0;
} else if (value.min == 0) {
return 0;
} else if (value.min > 0) {
var b = a.slice(1);
return Math.round(a - b == a ? 0 : a - b);
} else if (value.min < 0) {
var _b = a.slice(2);
return _parseInt(a - _b);
} else {
return value.min;
}
}
});
_defineProperty(this, "label", {
show: true,
fontSize: 14,
position: "outside"
});
_defineProperty(this, "labelBackground", {
backgroundColor: "#FFFFFFf0",
// borderColor: this.color[0],
borderWidth: 1,
borderRadius: 5,
//50,
padding: [4, 12, 0, 12],
// shadowColor: this.color[0],
shadowBlur: 3
});
_defineProperty(this, "radar", {
indicator: [],
center: ['50%', '53%'],
radius: '70%',
startAngle: 90,
shape: 'polygon',
//'circle',
name: {
// formatter: '【{value}】',
textStyle: {
color: this.xAxis.axisLabel.color
}
},
splitArea: {// areaStyle: {
// color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
// shadowColor: 'rgba(0, 0, 0, 0.2)',
// shadowBlur: 10
// }
},
axisLine: {
lineStyle: {
color: '#2F466A'
}
},
splitNumber: 4,
splitLine: {
lineStyle: {
color: '#2F466A',
width: 2
}
}
});
_defineProperty(this, "seriesBarWidth", "25%");
_defineProperty(this, "seriesBar", {
type: "bar",
barMaxWidth: "25%",
emphasis: {
label: this.label
}
});
_defineProperty(this, "seriesScatter", {
type: "scatter",
symbolSize: function symbolSize(param) {
//return Math.sqrt(param) / 5e2;
return Math.sqrt(param);
},
itemStyle: {
borderColor: '#FFFFFF' + 'fa',
//borderColor: `rgba(${this.theme.firstColorRgbaArr[0]*2}, ${this.theme.firstColorRgbaArr[1]*2}, ${this.theme.firstColorRgbaArr[2]*2}, .6)`,
borderWidth: 1
},
emphasis: {
label: this.label
},
animationEasing: this.animationEasing
});
_defineProperty(this, "seriesLine", {
type: "line",
symbolSize: 1,
symbol: 'circle',
sampling: 'lttb',
emphasis: {
label: _Object$assign(JSON.parse(_JSON$stringify(this.label)), this.labelBackground)
},
//最后一个label
endLabel: {
show: true,
valueAnimation: true // align: "center",
// verticalAlign: "bottom",
},
animationEasing: this.animationEasing
});
_defineProperty(this, "seriesBarZebra", {
type: 'pictorialBar',
barGap: "10%",
barWidth: this.seriesBar.barMaxWidth,
symbol: 'rect',
symbolRepeat: 'true',
symbolMargin: '50%',
symbolSize: ['90%', '20%'],
emphasis: {
label: this.label
}
});
_defineProperty(this, "seriesPie", {
z: 9,
type: 'pie',
selectedMode: true,
//'single'，//'multiple'
//是否在无数据的时候显示一个占位圆
showEmptyCircle: false,
//center
center: ['50%', '58%'],
//饼状图半径 基础
radiusBasic: [0, '70%'],
//饼状图半径 环形
radiusDoughnut: ['45%', '70%'],
//饼状图半径 玫瑰图
radiusRose: ['15%', '66%'],
//饼状图半径 阴影细环形饼状图
// radiusDoughnutThinShadow: ['60%', '65%'],
// centerDoughnutThinShadow: ['30%', '50%'],
label: {
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,
borderColor: '#383C4760',
borderWidth: 3
}
});
_defineProperty(this, "seriesDoughnut", {
emphasis: {
// show: false,
label: {
// show: false,
show: true,
fontSize: 20,
//25,
// formatter: '{b|{b}}\n{d|{d}%}\n{c|{c}}',
formatter: function formatter(param) {
return '{name|' + param.data.name + '}' + '\n{per|' + param.data.per + '%}' + '\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, "pieSolidCircle", {
silent: true,
type: 'pie',
legendHoverLink: false,
center: this.seriesPie.center,
radius: [0, this.seriesPie.radiusRose[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, "seriesDoughnutThinShadow", _Object$assign(JSON.parse(_JSON$stringify(this.seriesPie)), {
minAngle: 3,
center: ['33%', '50%'],
radius: ['73%', '78%'],
label: {
show: false
},
labelLine: {
show: false
},
itemStyle: {
borderRadius: 0,
borderWidth: 0,
shadowBlur: 0
},
// emphasis: {
// show: false,
// label: {
// show: false
// },
// labelLine: {show: false},
// },
emphasis: this.seriesDoughnut.emphasis
}));
_defineProperty(this, "seriesDoughnutThinShadowEmptyCircle", {
type: 'pie',
silent: true,
minAngle: 3,
showEmptyCircle: this.seriesPie.showEmptyCircle,
radius: ['58%', this.seriesDoughnutThinShadow.radius[0]],
center: this.seriesDoughnutThinShadow.center,
label: {
show: false
},
data: [],
legendHoverLink: false
});
_defineProperty(this, "seriesDoughnutBeadSight", {
//最外层的X装饰
seriesX: {
type: 'pie',
silent: true,
minAngle: 0.85,
startAngle: 135,
center: this.seriesDoughnutThinShadow.center,
radius: ['65%', '100%'],
data: [],
labelLine: this.seriesDoughnutThinShadow.labelLine,
emphasis: this.seriesDoughnutThinShadow.emphasis,
itemStyle: {
color: 'transparent'
}
},
//最外层的上下渐变缺失装饰环(上部缺失)
seriesOuterBroken: {
type: 'pie',
silent: true,
minAngle: 91,
startAngle: 135,
center: this.seriesDoughnutThinShadow.center,
radius: ['80%', '86%'],
data: [{
value: 0,
itemStyle: {
color: 'transparent'
}
}, 1],
labelLine: this.seriesDoughnutThinShadow.labelLine,
emphasis: this.seriesDoughnutThinShadow.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
}
}
},
//最外层的缺失环下面的细装饰环
seriesOuterThinDoughnut: {
type: 'pie',
silent: true,
minAngle: 45,
legendHoverLink: false,
center: this.seriesDoughnutThinShadow.center,
radius: ['72%', '74%'],
data: [1],
labelLine: this.seriesDoughnutThinShadow.labelLine,
emphasis: this.seriesDoughnutThinShadow.emphasis,
itemStyle: {}
},
//装数据的环
seriesPie: {
z: 9,
type: 'pie',
minAngle: 3,
showEmptyCircle: this.seriesPie.showEmptyCircle,
selectedMode: this.seriesPie.selectedMode,
center: this.seriesDoughnutThinShadow.center,
radius: ['56%', '65%'],
label: {
show: false
},
labelLine: this.seriesDoughnutThinShadow.labelLine,
// emphasis: this.seriesDoughnutThinShadow.emphasis,
emphasis: this.seriesDoughnut.emphasis
},
//最内层的圆装饰环
seriesInnerThinDoughnut: {
type: 'pie',
silent: true,
minAngle: 45,
legendHoverLink: false,
center: this.seriesDoughnutThinShadow.center,
radius: ['45%', '50%'],
data: [1],
labelLine: this.seriesDoughnutThinShadow.labelLine,
emphasis: this.seriesDoughnutThinShadow.emphasis,
itemStyle: {}
}
});
_defineProperty(this, "doughnutInnerRotatingGradientDoughnut", JSON.parse(_JSON$stringify(this.seriesDoughnutBeadSight.seriesOuterThinDoughnut)));
_defineProperty(this, "doughnutInnerRotatingGradientCircle", {});
_defineProperty(this, "seriesRadialBarGraph", _Object$assign(JSON.parse(_JSON$stringify(this.seriesDoughnutThinShadow)), {
selectedMode: false,
minAngle: 90,
//是否顺时针排布
clockwise: false,
label: {
show: false
},
labelLine: this.seriesPie.labelLine,
// emphasis: {
// label: {
// show: true,
// "fontSize": 16,
// position: 'inside',
// width: 2000,
// formatter: '{c}'
// },
// labelLine: {show: true},
// },
itemStyle: {
borderRadius: 50
},
data: []
}));
_defineProperty(this, "seriesRadialBarGraphBackGround", _Object$assign(JSON.parse(_JSON$stringify(this.seriesRadialBarGraph)), {
z: 1,
// silent: true,
//minAngle: 360 - this.seriesRadialBarGraph.minAngle,
data: [1, {
value: 0,
itemStyle: {
color: 'transparent'
}
}]
}));
} //颜色池
_createClass(Theme, [{
key: "updateProperty",
value:
/*
* 更新加工处理byteModel, 一些特定的属性需要根据当前切换的子类皮肤色值来动态改变value
* propertyName - model的属性名
* theme - 当前皮肤色值color数组
* */
function updateProperty(propertyName, theme) {
var _this = this;
//当前皮肤的第一个颜色的rgba数组 例: [255,255,255,1]
this.firstColorRgbaArr = Util.colorRgbaArr(this.color[0]); //x轴的splitArea 颜色
this.xAxis.splitArea.areaStyle.color[0] = this.xAxis.axisLine.lineStyle.color + '40'; //更新背景
this.labelBackground.borderColor = this.color[0];
this.labelBackground.shadowColor = this.color[0]; //tooltip
_Object$assign(this.tooltip, this.labelBackground);
delete this.tooltip.borderRadius;
delete this.tooltip.padding; //环形图等环形饼图的悬浮时label背景
// Object.assign(this.seriesDoughnut.emphasis.label, this.labelBackground)
// this.seriesDoughnut.emphasis.label.backgroundColor = "#FFFFFF90"
// Object.assign(this.seriesRadialBarGraph.emphasis.label, this.labelBackground)
//环形图中间的实心装饰圆
this.pieSolidCircle.itemStyle.color.colorStops.forEach(function (m, i) {
if (i) m.color = _this.color[0];
});
this.pieSolidCircle.itemStyle.borderColor = this.color[0]; // this.pieSolidCircle.itemStyle.shadowColor = this.color[0]
//图例 - 环形图左右结构的
this.legendDoughnutLeftRight.textStyle.rich.name.backgroundColor = this.legendDoughnutLeftRight.textStyle.rich.per.backgroundColor = this.legendDoughnutLeftRight.textStyle.rich.value.backgroundColor = this.color[0] + '20'; // this.legendDoughnutLeftRight.backgroundColor = this.color[0] + '20'
//重写瞄准星环形图的各个装饰圆环的颜色
// this.seriesDoughnutBeadSight.seriesOuterBroken.itemStyle.color?.colorStops?.forEach((m,i)=>{
// m.color = this.color[0]
// })
//X装饰
for (var i = 0; i < 4; i++) {
this.seriesDoughnutBeadSight.seriesX.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.seriesDoughnutBeadSight.seriesOuterBroken.itemStyle.color.colorStops.forEach(function (m, i) {
m.color = _this.color[0] + (i ? 'cc' : '10');
}); //最外层的缺失环下面的细装饰环
this.seriesDoughnutBeadSight.seriesOuterThinDoughnut.itemStyle.color = this.color[0] + '80'; // this.seriesDoughnutBeadSight.seriesOuterThinDoughnut.itemStyle.color = this.seriesDoughnutBeadSight.seriesOuterThinDoughnut.emptyCircleStyle.color = this.color[0] + '80'
//最内层的圆装饰环
this.seriesDoughnutBeadSight.seriesInnerThinDoughnut.itemStyle.color = this.color[0] + '50'; //中间旋转的装饰渐变小圆形
this.doughnutInnerRotatingGradientCircle = JSON.parse(_JSON$stringify(this.pieSolidCircle)); // 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.seriesDoughnutBeadSight.seriesOuterBroken.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]);
}
}, {
key: "toString",
value: function toString() {
Print.log(_JSON$stringify(this));
}
}]);
return Theme;
}();
export { Theme as default };