chart = ((data, alarm, sentiment, alter) => {
const chart = new G2.Chart({
width: 960,
height: 720,
container: "container"
});
const layer = chart.spaceLayer();
const facetRect = layer
.facetRect()
.data(data)
.attr("paddingRight", 20)
.attr("paddingTop", 40)
.encode("y", "metricId")
.axis(false);
facetRect
.line()
.encode("x", (d) => new Date(d.date))
.encode("y", "value")
.encode("color", "metricId")
.encode("series", "type")
.attr("frame", false)
.scale("x", { ...xScale })
.scale("y", { facet: false })
.axis("x", ({ rowIndex }) => {
return rowIndex === 0
? {
position: "top",
labelAutoRotate: false,
line: true,
grid: false
}
: {
grid: false,
line: false,
tick: false,
label: false
};
})
.axis("y", {
labelAutoRotate: false,
title: false,
labelFormatter: "~s",
tick: false,
grid: false
})
.style("stroke opacity", (data) => {
return data[0]?.type === "yesterday" ? 0.25 : 1;
});
// 绘制报警
layer
.point()
.attr("key", "alarm")
.attr("clip", true)
.attr("paddingRight", INNER_PADDING_RIGHT)
.attr("paddingTop", PADDING_TOP)
.data(alarm)
.encode("x", (d) => new Date(d.date))
.encode("y", 0)
.encode("shape", "hyphen")
.axis(false)
.scale("x", { ...xScale })
.scale("y", { type: "identity", independent: true })
.style({
height: 6,
lineWidth: 6,
// 向下偏移高度的一半
transform: "translate(0,3)",
stroke: "red",
fillOpacity: 0.45
})
.animate({
enterType: "scaleInX"
});
// 绘制舆情
layer
.lineX()
.attr("key", "sentiment")
.attr("clip", true)
.attr("paddingRight", INNER_PADDING_RIGHT)
.attr("paddingTop", PADDING_TOP)
.data(sentiment)
.encode("x", (d) => new Date(d.date))
.axis(false)
.scale("x", { ...xScale })
.style({
stroke: "#FA8C16",
lineDash: [4, 4]
});
// 绘制变更
layer
.range()
.attr("key", "alter")
.attr("clip", true)
.attr("paddingRight", INNER_PADDING_RIGHT)
.attr("paddingTop", PADDING_TOP)
.data(alter)
.encode("x", (d) => [new Date(d.x1), new Date(d.x2)])
.encode("y", [0, 0])
.axis(false)
.scale("x", { ...xScale })
.scale("y", { type: "identity", independent: true })
.label({
text: (d) => d.msg,
fontSize: 10,
fill: "#6236FF",
fillOpacity: 1,
position: "left",
dy: -44,
dx: 4, // 让 connector 可以对齐 background 的边
textBaseline: "middle",
connector: true,
connectorStroke: "#6236FF",
connectorLineDash: [4, 2],
background: true,
// @todo fix paddingTop, paddingBottom 有偏差
backgroundPadding: [2, 4, 0],
backgroundFill: "#6236FF",
backgroundFillOpacity: 0.1,
// 下面设置文本省略
textOverflow: "ellipsis",
wordWrap: true,
wordWrapWidth: 120,
maxLines: 1
})
.style({
fill: "#653AFF",
fillOpacity: 0.1,
height: 24
})
.animate({ enterType: "scaleInX" });
chart.render();
return chart;
})(data, alarmData, sentimentData, alterData)