{
const chart = new G2.Chart({
width,
height: 350,
insetTop: 20,
insetLeft: 30,
insetRight: 30,
paddingBottom: 50
});
const colorMap = {
CY24周日均实际值: "#237fff",
CY24月日均实际值: "#237fff",
CY24周日均目标值: "#53729a",
CY24月日均目标值: "#53729a",
CY23周日均实际值: "#afb6bf",
CY23月日均实际值: "#afb6bf"
};
const linearColorMap = {
CY24周日均实际值: {
start: "#237fffb3",
end: "#3285fa00"
},
CY24月日均实际值: {
start: "#237fffb3",
end: "#3285fa00"
},
CY24周日均目标值: { start: "#53729aa1", end: "#ffffff00" },
CY24月日均目标值: { start: "#53729aa1", end: "#ffffff00" },
CY23周日均实际值: { start: "#afb6bfa1", end: "#5072a200" },
CY23月日均实际值: { start: "#afb6bfa1", end: "#5072a200" }
};
chart.options({
type: "view",
data,
scale: {
y: { nice: true },
color: {
domain: Object.keys(colorMap),
range: Object.values(colorMap)
}
},
children: [
{
type: "area",
encode: {
x: "time",
y: "value",
y1: d3.min(data, (d) => d.value),
color: "name"
},
style: {
fill: (d) => {
const { start, end } = linearColorMap[d[0].name];
return `linear-gradient(90deg, ${start} 0%, ${end} 100%)`;
},
fillOpacity: 0.3
}
},
{
type: "line",
encode: {
x: "time",
y: "value",
color: "name"
},
axis: {
y: { labelFormatter: (d) => d / 1e8 + "亿" }
},
labels: [
{
text: (d) => (d.value / 1e8).toFixed(2) + "亿",
stroke: "white",
fill: (d) => colorMap[d.name],
lineWidth: 2,
fontWeight: "bold",
transform: [{ type: "overlapDodgeY" }],
dy: -12,
textAlign: "center"
}
]
},
{
type: "point",
encode: {
x: "time",
y: "value",
color: "name",
shape: "hollow"
},
style: {
fill: "white"
}
}
]
});
chart.interaction("tooltip", false);
chart.render();
invalidation.then(() => chart.destroy());
return chart.getContainer();
}
G2 = require("@antv/g2")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
