enoad-component-web
Version:
针对web端的控件
169 lines (168 loc) • 6.25 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = (0, tslib_1.__importStar)(require("react"));
var styled_1 = require("./styled");
var util_1 = require("../../core/util");
var echarts = (0, tslib_1.__importStar)(require("echarts"));
var EchartComponent = /** @class */ (function (_super) {
(0, tslib_1.__extends)(EchartComponent, _super);
function EchartComponent(props) {
var _this = _super.call(this, props) || this;
_this.width = window.innerWidth / 4;
_this.height = window.innerHeight / 2;
return _this;
}
EchartComponent.prototype.componentDidMount = function () {
this.initTip();
var _a = this.props, xAxis = _a.xAxis, yAxis = _a.yAxis, pies = _a.pies;
this.initLine(xAxis, yAxis);
this.initBar(xAxis, yAxis);
this.initPie(pies);
};
EchartComponent.prototype.initTip = function () {
if (!this.main) {
return;
}
var wind = echarts.init(this.main);
wind.setOption({
tooltip: { tip: '按照一年进行统计' },
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E', 'F'],
axisLabel: {
show: true,
textStyle: { color: "#2b2b2b" }
}
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
textStyle: { color: "#2b2b2b" }
}
},
series: [{
data: [22, 13, 22, 44, 43, 54],
type: 'line',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}]
});
};
//线性图表
EchartComponent.prototype.initLine = function (xAxis, yAxis) {
if (xAxis && xAxis.length > 0 && yAxis && yAxis.length > 0) {
if (!this.chartsline) {
return;
}
var line = echarts.init(this.chartsline);
// 指定图表的配置项和数据
line.setOption({
xAxis: {
type: "category",
data: xAxis,
axisLabel: {
show: true,
textStyle: { color: "#2b2b2b" },
},
},
yAxis: {
type: "value",
axisLabel: {
show: true,
textStyle: { color: "#2b2b2b" },
},
},
series: [
{
data: yAxis,
type: "line",
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
],
});
}
};
//柱状图表
EchartComponent.prototype.initBar = function (xAxis, yAxis) {
if (xAxis && xAxis.length > 0 && yAxis && yAxis.length > 0) {
if (!this.chartsbar) {
return;
}
var bar = echarts.init(this.chartsbar);
// 指定图表的配置项和数据
bar.setOption({
xAxis: {
type: "category",
data: xAxis,
axisLabel: {
show: true,
textStyle: { color: "#2b2b2b" },
},
},
yAxis: {
type: "value",
axisLabel: {
show: true,
textStyle: { color: "#2b2b2b" },
},
},
series: [
{
data: yAxis,
type: "bar",
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
],
});
}
};
//圆形图
EchartComponent.prototype.initPie = function (pies) {
if (pies && pies.length > 0) {
if (!this.chartspie) {
return;
}
var chartPie = echarts.init(this.chartspie);
// 指定图表的配置项和数据
chartPie.setOption({
series: [
{
name: "访问来源",
radius: "75%",
data: pies,
roseType: "angle",
type: "pie",
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
],
});
}
};
EchartComponent.prototype.render = function () {
var _this = this;
if (util_1.isDebug) {
console.log("[EchartComponent]");
}
return (React.createElement(styled_1.ChartWrapper, null,
React.createElement(styled_1.ChartItem, { ref: function (ref) { _this.main = ref; }, style: { width: this.width, height: this.height }, id: "main" }),
React.createElement(styled_1.ChartItem, { ref: function (ref) { _this.chartsline = ref; }, style: { width: this.width, height: this.height }, id: "chartsline" }),
React.createElement(styled_1.ChartItem, { ref: function (ref) { _this.chartsbar = ref; }, style: { width: this.width, height: this.height }, id: "chartsbar" }),
React.createElement(styled_1.ChartItem, { ref: function (ref) { _this.chartspie = ref; }, style: { width: this.width, height: this.height }, id: "chartspie" })));
};
return EchartComponent;
}(React.Component));
exports.default = EchartComponent;
//# sourceMappingURL=./components/EchartComp/view.js.map