116 lines
2.3 KiB
JavaScript
116 lines
2.3 KiB
JavaScript
import ReactECharts from "echarts-for-react";
|
|
|
|
const years = [];
|
|
|
|
for (let year = 2011; year <= 2020; year++) {
|
|
years.push(year);
|
|
}
|
|
|
|
const observedData = [
|
|
-0.90765893, 0.14846958, 1.6577014, -0.32029018, -1.2422978, 0.44113398,
|
|
-0.45218363, 1.897564, -0.6926195, -0.529819,
|
|
];
|
|
|
|
const predictedData = [
|
|
-0.20760797, 0.206235, 0.85673275, 0.13969683, -0.39370838, 0.23775028,
|
|
-0.34866039, 0.93110625, 0.19143088, 0.5760311,
|
|
];
|
|
|
|
function ChartPanel() {
|
|
const option = {
|
|
title: {
|
|
// text: "Stacked Line",
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
},
|
|
legend: {
|
|
data: ["观测结果", "预测结果"],
|
|
textStyle: { color: "#04fbfd", cursor: "point" },
|
|
},
|
|
animationDuration: years.length * 1000,
|
|
animationEasing: "cubicInOut",
|
|
grid: {
|
|
left: "3%",
|
|
right: "4%",
|
|
bottom: "3%",
|
|
containLabel: true,
|
|
},
|
|
// toolbox: {
|
|
// feature: {
|
|
// // 下载
|
|
// saveAsImage: {},
|
|
// },
|
|
// },
|
|
xAxis: {
|
|
type: "category",
|
|
boundaryGap: false,
|
|
data: years,
|
|
axisLine: {
|
|
onZero: false,
|
|
symbol: ["none", "arrow"],
|
|
symbolOffser: [0, 10],
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
min: -2.0,
|
|
max: 2.0,
|
|
interval: 0.5,
|
|
splitNumber: 5,
|
|
splitLine: { show: false },
|
|
axisLine: {
|
|
onZero: false,
|
|
show: true,
|
|
symbol: ["none", "arrow"],
|
|
symbolOffset: [0, 10],
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
},
|
|
axisTick: { show: true },
|
|
scale: true,
|
|
},
|
|
dataZoom: { type: "inside", start: 0, end: 100 },
|
|
series: [
|
|
{
|
|
name: "观测结果",
|
|
type: "line",
|
|
stack: "Total",
|
|
data: observedData,
|
|
color: "black",
|
|
symbol: "none",
|
|
itemStyle: {
|
|
color: "black",
|
|
},
|
|
},
|
|
{
|
|
name: "预测结果",
|
|
type: "line",
|
|
// stack: "Total",
|
|
data: predictedData,
|
|
color: "red",
|
|
symbol: "none",
|
|
itemStyle: {
|
|
color: "red",
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
return (
|
|
<div className="chart-info-panel">
|
|
<ReactECharts
|
|
option={option}
|
|
lazyUpdate={true}
|
|
style={{
|
|
height: "100%",
|
|
width: "100%",
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ChartPanel;
|