enoad-component-web
Version:
针对web端的控件
127 lines (126 loc) • 4.2 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var styled_1 = require("./styled");
var util_1 = require("../../core/util");
var echarts = (0, tslib_1.__importStar)(require("echarts"));
var LineCharts = /** @class */ (function (_super) {
(0, tslib_1.__extends)(LineCharts, _super);
function LineCharts(props) {
return _super.call(this, props) || this;
}
LineCharts.prototype.componentDidMount = function () {
var data = this.props.data;
this.setLineChart(data);
};
LineCharts.prototype.componentWillUnmount = function () { };
LineCharts.prototype.componentWillReceiveProps = function (nextProps) {
var data = nextProps.data;
if (data != this.props.data) {
this.setLineChart(data);
}
};
LineCharts.prototype.setLineChart = function (data) {
var _a = this.props, title = _a.title, color = _a.color;
if (!data || !data.x || data.x.length === 0) {
return null;
}
if (!this.chartDiv) {
return null;
}
this.current = echarts.init(this.chartDiv);
var option = {
title: {
text: title,
textStyle: {
fontSize: 20,
color: "#333",
},
textVerticalAlign: "bottom",
padding: [30, 0, 0, 20],
},
tooltip: {
trigger: "axis",
},
grid: {
left: "5%",
right: "5%",
top: 100,
},
color: color,
legend: {
data: [],
right: "15%",
top: "6%",
icon: "circle",
itemHeight: 8,
},
xAxis: {
show: true,
type: "category",
boundaryGap: false,
data: [],
axisLine: {
//x轴隐藏
show: false,
},
axisTick: {
//x轴刻度线隐藏
show: false,
},
splitLine: {
//网格线隐藏
show: false,
},
},
yAxis: {
show: true,
type: "value",
axisLine: {
//y轴隐藏
show: false,
},
axisTick: {
//y轴刻度线隐藏
show: false,
},
splitLine: {
//网格线隐藏
show: false,
},
},
series: [],
};
var legendData = [];
var servs = [];
Object.keys(data.origin).forEach(function (key) {
if (key.lastIndexOf("_label") == -1 && key != "list") {
legendData.push(data.origin[key + "_label"]);
servs.push({
name: data.origin[key + "_label"],
key: key,
type: "line",
data: data[key],
smooth: true,
});
}
});
option.legend.data = legendData;
option.series = servs;
var newOptions = (0, tslib_1.__assign)({}, option);
newOptions.xAxis.data = data.x;
this.current.setOption(newOptions);
};
LineCharts.prototype.render = function () {
var _this = this;
if (util_1.isDebug) {
console.log("[EchartComponent]");
}
return (react_1.default.createElement(styled_1.LineChartsBox, null,
react_1.default.createElement("div", { id: this.props.id, ref: function (ref) { _this.chartDiv = ref; }, style: { width: "100%", height: "432px" } })));
};
return LineCharts;
}(react_1.default.Component));
exports.default = LineCharts;
//# sourceMappingURL=./components/Echarts/LineCharts.js.map