Add barchrt placeholder

client/package-lock.json

@@ -5158,6 +5158,30 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.8.0.tgz",
+      "integrity": "sha512-YwShpug8fWngj/RlgxDaYrLBoD+LsZUArrusjNPHpAF+is+gGe38xx4W848AwWMGoi745t3OXM52JedNrv+F6g==",
+      "requires": {
+        "zrender": "4.3.1"
+      }
+    },
+    "echarts-for-react": {
+      "version": "2.0.16",
+      "resolved": "https://registry.npmjs.org/echarts-for-react/-/echarts-for-react-2.0.16.tgz",
+      "integrity": "sha512-VmHCktay2qKt/+wpL/C7thbvIa7dYBEey0/U4Zaqo+qeA4wx+uiCd5NeCsPIhD/0Pv+2qqNswqiNiUCtcgccOw==",
+      "requires": {
+        "fast-deep-equal": "^2.0.1",
+        "size-sensor": "^1.0.0"
+      },
+      "dependencies": {
+        "fast-deep-equal": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
+          "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
+        }
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -12194,6 +12218,11 @@
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
       "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="
     },
+    "size-sensor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/size-sensor/-/size-sensor-1.0.1.tgz",
+      "integrity": "sha512-QTy7MnuugCFXIedXRpUSk9gUnyNiaxIdxGfUjr8xxXOqIB3QvBUYP9+b51oCg2C4dnhaeNk/h57TxjbvoJrJUA=="
+    },
     "slash": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
@@ -14557,6 +14586,11 @@
         "camelcase": "^5.0.0",
         "decamelize": "^1.2.0"
       }
+    },
+    "zrender": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.1.tgz",
+      "integrity": "sha512-CeH2TpJeCdG0TAGYoPSAcFX2ogdug1K7LIn9UO/q9HWqQ54gWhrMAlDP9AwWYMUDhrPe4VeazQ4DW3msD96nUQ=="
     }
   }
 }

client/package.json

@@ -13,6 +13,8 @@
     "d3": "^5.16.0",
     "d3-scale": "^3.2.1",
     "d3-selection": "^1.4.2",
+    "echarts": "^4.8.0",
+    "echarts-for-react": "^2.0.16",
     "react": "^16.13.1",
     "react-bootstrap": "^1.3.0",
     "react-dom": "^16.13.1",

client/src/components/Main.js

@@ -4,6 +4,7 @@ import { selectLoading } from './navbar/querySlice';
 import LoadingOverlay from 'react-loading-overlay';
 import Voronoi from './voronoi/Voronoi';
 import Spinner from './spinner/Spinner';
+import YearRange from "./yearrange/YearRange";
 
 export default function Main() {
   const loading = useSelector(selectLoading);
@@ -21,6 +22,7 @@ export default function Main() {
       }}
     >
       <Voronoi className='mt-sm-2' width={800} height={800} padding={5} />
+      <YearRange/>
     </LoadingOverlay>
   );
 }

client/src/components/yearrange/YearRange.js

-import React from 'react';
+import React, { PureComponent } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { setStart, setEnd, setYears } from './yearRangeSlice';
+import ReactEcharts from "echarts-for-react";
 
-export default function YearRange(props) {
-  return <div>YearRange</div>;
+
+
+export default class YearRange extends PureComponent {
+  getOption = () => {
+    return {
+      title: {
+        text: "Yearly results",
+        left: 10
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+        }
+      },
+      grid: {
+        bottom: 90
+      },
+      dataZoom: [{
+        type: 'inside'
+      }, {
+        type: 'slider'
+      }],
+      xAxis: {
+        type: 'category',
+        data: [2010,2011,2012,2013,2014,2015],
+        silent: false,
+        splitLine: {
+          show: false
+        },
+        splitArea: {
+          show: false
+        }
+      },
+      yAxis: {
+        type: 'value',
+        splitArea: {
+          show: false
+        }
+      },
+      series: [{
+        type: 'bar',
+        data: [1,2,3,4,5,6],
+        large: true
+      }]
+    };
+  };
+  render() {
+    return (
+        <div className='container'>
+            <ReactEcharts
+                option={this.getOption()}
+                style={{height: '350px', width: '100%'}}
+                className='bar_chart' />
+        </div>
+    );
+  }
 }