up

src/App.js

@@ -60,10 +60,10 @@ class App extends Component {
                             yAxis: '0',
                             label: {
                                 show: true,
-                                lineHeight:25,
+                                lineHeight:10,
                                 // position: 'start', // 改变label位置
                                 position: 'insideMiddleTop',
-                                formatter:item.Value , // 格式化标签文本
+                                formatter:item.Value, // 格式化标签文本
                             },
                             lineStyle: { color: 'green', type: 'solid',with:30},
                         },
@@ -171,7 +171,7 @@ class App extends Component {
                 markLine:{
                         symbol:'circle',
                         data:markline,
-                      }
+                }
             });
             
         });
@@ -205,7 +205,6 @@ class App extends Component {
                     min: data.result.AxisX.AxisXBegin,
                     max:data.result.AxisX.AxisXEnd,
                     interval:(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin)/5,
-                    // offset:-75,
                     axisLine:{
                         show:true,
                         symbol: ['none', 'arrow']
@@ -334,10 +333,34 @@ class App extends Component {
                             var yy = event.pageY + 15
                             elementDiv.style.top = yy + 'px'
                             elementDiv.style.left = xx + 'px'
-                          }
+                        }
                     }
                 }
             })
+            myChart.on('mousemove', function (params) {
+                if(params.componentType == "markLine"){
+                    var elementDiv = document.querySelector('#extension')
+                        var elementStyle =
+                            `position: absolute;
+                            margin-left:35px;
+                            z-index: 99999;
+                            color: #fff;
+                            font-size: 12px;
+                            padding: 5px;
+                            display: inline;
+                            border-radius: 4px;background-color: #303133;
+                            box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px`
+                        elementDiv.style.cssText = elementStyle
+                        elementDiv.innerHTML = moment(parseInt(params.data.xAxis/1000000)).format('YYYY-MM-DD HH:mm:ss.SSS')
+                        document.querySelector('html').onmousemove = function (event) {
+                            var elementDiv = document.querySelector('#extension')
+                            var xx = event.pageX - 10
+                            var yy = event.pageY + 15
+                            elementDiv.style.top = yy + 'px'
+                            elementDiv.style.left = xx + 'px'
+                        }
+                }
+            })
             myChart.on('mouseout', function (params) {
                 if (params.componentType == 'yAxis') {
                   var elementDiv = document.querySelector('#extension')
@@ -349,6 +372,10 @@ class App extends Component {
                         elementDiv.style.cssText = 'display:none'
                     }
                 }
+                if(params.componentType == "markLine"){
+                    var elementDiv = document.querySelector('#extension')
+                    elementDiv.style.cssText = 'display:none'
+                }
             })
         }
     })