enoad-component-web
Version:
针对web端的控件
102 lines (101 loc) • 3.53 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 PieCharts = /** @class */ (function (_super) {
(0, tslib_1.__extends)(PieCharts, _super);
function PieCharts(props) {
return _super.call(this, props) || this;
}
PieCharts.prototype.componentDidMount = function () {
var data = this.props.data;
this.setLineChart(data);
};
PieCharts.prototype.componentWillUnmount = function () { };
PieCharts.prototype.componentWillReceiveProps = function (nextProps) {
var data = nextProps.data;
if (data != this.props.data) {
this.setLineChart(data);
}
};
PieCharts.prototype.setLineChart = function (data) {
var _a = this.props, title = _a.title, color = _a.color;
if (!this.pieCharts) {
return;
}
this.current = echarts.init(this.pieCharts);
var option = {
title: [
{
text: title,
textStyle: {
fontSize: 20,
color: "#333",
},
textVerticalAlign: "bottom",
padding: [30, 0, 0, 20],
},
],
color: color,
legend: {
left: "center",
bottom: "8%",
decal: "circle",
icon: "circle",
itemHeight: 6,
formatter: function (name) {
var arr = name.split(":");
if (arr.length === 2) {
return arr[0];
}
return name;
},
textStyle: {
lineHeight: 14,
fontSize: 14,
fontWeight: 600,
},
},
series: [
{
name: title,
type: "pie",
center: ["50%", "50%"],
radius: ["35%", "50%"],
avoidLabelOverlap: true,
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: true,
fontSize: "20",
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: data,
},
],
};
this.current.setOption(option);
};
PieCharts.prototype.render = function () {
var _this = this;
if (util_1.isDebug) {
console.log("[EchartComponent]");
}
var data = this.props.data;
return (react_1.default.createElement(styled_1.PieChartsBox, null,
react_1.default.createElement("div", { id: this.props.id, ref: function (ref) { _this.pieCharts = ref; }, style: { width: "100%", height: "432px" } })));
};
return PieCharts;
}(react_1.default.Component));
exports.default = PieCharts;
//# sourceMappingURL=./components/Echarts/PieCharts.js.map