69 lines
1.3 KiB
JavaScript
69 lines
1.3 KiB
JavaScript
const colorBar = [
|
|
"#4160ac",
|
|
"#4363ae",
|
|
"#4867b1",
|
|
"#4d6bb3",
|
|
"#5370b6",
|
|
"#5d79bb",
|
|
"#6c85c1",
|
|
"#778dc7",
|
|
"#8297cd",
|
|
"#8fa3d3",
|
|
"#9baed9",
|
|
"#a6b7de",
|
|
"#b0c0e3",
|
|
"#bcc9e6",
|
|
"#c9d3eb",
|
|
"#d4ddf1",
|
|
"#fbd1d2",
|
|
"#fac4c6",
|
|
"#f9b8ba",
|
|
"#f8abae",
|
|
"#f79fa2",
|
|
"#f59496",
|
|
"#f4878a",
|
|
"#f37a7c",
|
|
"#f36e70",
|
|
"#f26264",
|
|
"#f15759",
|
|
"#f04c4f",
|
|
"#f14145",
|
|
"#ef3637",
|
|
"#ee2e30",
|
|
"#ee2529",
|
|
];
|
|
|
|
function Legend() {
|
|
return (
|
|
<div className="legend">
|
|
<div className="legend-title">夏季温度年代际异常值</div>
|
|
<div className="colorbar">
|
|
{colorBar.map((color, index) => {
|
|
return (
|
|
<div
|
|
key={`colorbar-item-${index}`}
|
|
className="colorbar-item"
|
|
style={{ backgroundColor: color }}
|
|
title={`${(-3.2 + index * 0.2).toFixed(1)}~${(
|
|
-3.2 +
|
|
(index + 1) * 0.2
|
|
).toFixed(1)}`}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
<div className="legend-text">
|
|
{[-2.4, -1.6, -0.8, 0, 0.8, 1.6, 2.4, ""].map((item, index) => {
|
|
return (
|
|
<div key={`legend-text-item-${index}`} className="legend-text-item">
|
|
{item}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Legend;
|