65 lines
1.2 KiB
JavaScript
65 lines
1.2 KiB
JavaScript
import styles from "./index.module.less";
|
|
|
|
// 4.5 三极联动影响东亚夏季风
|
|
const colorBar45 = [
|
|
"#7272ff",
|
|
"#8585ff",
|
|
"#fff",
|
|
"#ffafaf",
|
|
"#ff9c9c",
|
|
"#ff8787",
|
|
"#ff7474",
|
|
"#ff6060",
|
|
"#ff4b4b",
|
|
"#ff3838",
|
|
"#ff2323",
|
|
];
|
|
|
|
const legendText45 = [
|
|
-0.02,
|
|
-0.01,
|
|
0.01,
|
|
0.02,
|
|
0.03,
|
|
0.05,
|
|
0.1,
|
|
0.15,
|
|
0.2,
|
|
0.25,
|
|
"",
|
|
];
|
|
|
|
function Legend45() {
|
|
return (
|
|
<div className={styles.legend}>
|
|
<div className="legend-title">三极联动影响东亚夏季风</div>
|
|
<div className="colorbar">
|
|
{colorBar45.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">
|
|
{legendText45.map((item, index) => {
|
|
return (
|
|
<div key={`legend-text-item-${index}`} className="legend-text-item">
|
|
{item}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Legend45;
|