bytev-charts-beta1.0
Version:
测试版-1.0,版本号为小版本; 基于echarts和JavaScript及ES6封装的一个可以直接调用的图表组件库，内置主题设计，简单快捷，且支持用户自定义配置； npm 安装方式: npm install bytev-charts 若启动提示还需额外install插件,则运行 npm install @babel/runtime-corejs2 即可;
368 lines (327 loc) • 10.8 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 Print from "../print/Print.class.js";
import Util from "../util/Util.class.js";
import Series from "./component/echarts/Series.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, "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: 'transparent',
type: this.legend.type,
/*
* 图例类型
* 除echarts的('circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'),<br>
* 还新增了自定义属性'竖线'<br>
* verticalBar - 竖线<br>
* */
icon: "rect",
top: 'center',
// right: 'right',
right: 10,
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: 14,
align: 'left',
verticalAlign: "bottom",
// backgroundColor: '#0872EC30',
padding: [15, 25, 13, 0]
},
value: {
fontSize: 14,
align: 'left',
verticalAlign: "bottom",
// 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: ['rgba(0,0,0,0)','#37415830']
}
}
});
_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",
valueAnimation: true
});
_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
}
}
});
} //颜色池
_createClass(Theme, [{
key: "updateProperty",
value:
/*
* 更新加工处理byteModel, 一些特定的属性需要根据当前切换的子类皮肤色值来动态改变value
* propertyName - model的属性名
* theme - 当前皮肤色值color数组
* */
function updateProperty(propertyName, theme) {
this.series = new Series(this.color); // window.series = this.series
//echarts中itemStyle的color线性渐变xy配置的数组, 依次按从左上顺时针旋转排列
this.colorLinearXYArr = this.series.colorLinearXYArr; //当前皮肤的第一个颜色的rgba数组 例: [255,255,255,1]
this.firstColorRgbaArr = Util.colorRgbaArr(this.color[0]);
this.series.color = this.color;
this.series.firstColorRgbaArr = this.firstColorRgbaArr; //x轴的splitArea 颜色
// this.xAxis.splitArea.areaStyle.color[0] = this.xAxis.axisLine.lineStyle.color + '40'
//modify by damon 20220923 修改分隔区域的颜色为偶数下标的透明
this.xAxis.splitArea.areaStyle.color = ['rgba(0,0,0,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; //20220323 默认显示图例拼接的背景,在DoughnutLeftRightComponent组件中增加了showLegendBackground(boolean)方法
//图例 - 环形图左右结构的
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'
//series的悬浮高亮下的label样式
this.series.bar.emphasis.label = this.series.scatter.emphasis.label = this.series.barZebra.emphasis.label = this.label;
this.series.line.emphasis.label = _Object$assign(JSON.parse(_JSON$stringify(this.label)), this.labelBackground);
}
}, {
key: "toString",
value: function toString() {
Print.log(_JSON$stringify(this));
}
}]);
return Theme;
}();
export { Theme as default };