yAxis溢出隐藏

src/App.js

@@ -121,7 +121,7 @@ class App extends Component {
                 },
                 label: {
                     color: '#333',
-                    position: 'right'
+                    position: 'center'
                 },
 
                 symbolSize: 15,
@@ -159,11 +159,22 @@ class App extends Component {
             {
                 type: 'value',
             }],
-
             yAxis: {
                 type: 'category',
                 data: this.state.AxisY,
-                boundaryGap: true,
+                triggerEvent: true,
+                axisLabel:{
+                    margin:8,
+                    formatter:function(data){          
+                        var val=''
+                        if(data.length>4){
+                            val = data.substr(0,4)+'...';
+                            return val ;
+                        }else {
+                            return data;
+                        }
+                    }
+                },
                 // min: 0,
                 // max: 5,
                 // scale: true,
@@ -182,7 +193,43 @@ class App extends Component {
             series: series,
         }; 
         myChart.setOption(option);
+
+        extension(myChart);
+        function extension(myChart){
+            var elementDiv = document.getElementById('extension');
+            if(!elementDiv){
+                var div = document.createElement('div')
+                div.setAttribute('id', 'extension')
+                div.style.display = 'block'
+                document.querySelector('html').appendChild(div)
+            }
+            myChart.on('mouseover',function(params){
+                if (params.componentType == 'yAxis') {
+                    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 = params.value
+                    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')
+      
+                  elementDiv.style.cssText = 'display:none'
+                }
               })
+        }
+
+    })
+