Add markLine to chart

web/src/VideoDataChart.js

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import ReactEcharts from 'echarts-for-react';
 
 class VideoDataChart extends Component {
-  drawPic(data, nowTime) {
+  drawPic(data, currentTime) {
     const xAxisData = data.map(item => Number(item.time));
     const seriesData = data.map(item => ({
       value: Number(item.data),
@@ -43,33 +43,38 @@ class VideoDataChart extends Component {
         {
           name: 'Data',
           type: 'line',
-          data: seriesData
+          data: seriesData,
-        }
+          markLine: {
-      ],
+            data: [
-      markLine: {
+              [
-        symbol: 'none',
+                {
-        lineStyle: {
+                  symbol: 'none',
-          color: 'red'
+                  x: `${currentTime / 0.65 + 40}`,
-        },
+                  y: '80%',
-        data: [
+                  lineStyle: {
-          {
+                    color: 'red'
-            xAxis: nowTime,
+                  },
-            yAxis: dataMin,
+                  // label: {
-            symbol: 'none',
+                  //   position: 'start',
-            lineStyle: {
+                  //   formatter: 'Max'
-              color: 'red'
+                  // },
-            }
+                },
-          },
+                {
-          {
+                  symbol: 'none',
-            xAxis: nowTime,
+                  x: `${currentTime / 0.65 + 40}`,
-            yAxis: dataMax,
+                  y: '0%',
-            symbol: 'none',
+                  // label: {
-            lineStyle: {
+                  //   position: 'start',
-              color: 'red'
+                  //   formatter: 'Max'
-            }
+                  // },
+                  // type: 'max',
+                  // name: 'Max Point',
+                }
+              ],
+            ]
           }
-        ]
+        }
-      }
+      ]
     };
 
     return (
@@ -81,11 +86,11 @@ class VideoDataChart extends Component {
   }
 
   render() {
-    const nowTime = 285;
+    const currentTime = this.props.currentTime;
 
     return (
       <div>
-        {this.drawPic(this.props.data, nowTime)}
+        {this.drawPic(this.props.data.filter(item => item.time !== ""), currentTime)}
       </div>
     );
   }

web/src/VideoEditPage.js

@@ -224,7 +224,7 @@ class VideoEditPage extends React.Component {
                 </Row>
                 {
                   this.state.videoData === null ? null : (
-                    <VideoDataChart data={this.state.videoData} />
+                    <VideoDataChart data={this.state.videoData} currentTime={this.state.currentTime} />
                   )
                 }
               </Affix>