Echarts进行可视化时坐标信息太长显示不全问题_echarts横坐标数据不全document.getelementbyid('extension')-优快云博客

本文链接：https://blog.youkuaiyun.com/someby/article/details/100866319

最近在做页面可视化的时候使用到了Echarts的条状图，由于信息太长，显示的空间有限，导致显示不全。现在的解决方案是超过一定的字符数后面的字符就省略显示，用“...”代替，当鼠标悬停到相应的条目上时，又全显示出来，现在就记录一下解决过程。

如图

需要的效果

现在上代码

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <!-- <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script> -->
       <!-- <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script> -->
       <!-- <script type="text/javascript"src="https://code.jquery.com/jquery-3.1.1.min.js"></script> -->
       <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 50%"></div>
   </body>

   <script type="text/javascript">
  var dom = document.getElementById("container");
  var myChart = echarts.init(dom);
  var app = {};
  option = null;
  option = {
        xAxis: {
            minInterval: 1,
            type:'value',
            axisLabel: {
                inside: false,
                textStyle: {
                    color: '#000000',
                    fontSize:12
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            splitLine:{
                show:true,
                lineStyle:{
                    type:'dashed',
                    color:'#E9E9E9'
                }
            },
        },
        yAxis: {
            triggerEvent: true,
            data:['MySql数据库脚本数', 'Oracle数据库脚本数', 'HIve数据库脚本数', 'Hbase数据库脚本数'],
            type:"category",
            axisLine: {
                show: true,
                lineStyle:{
                    color:'#E9E9E9'
                }
            },
            axisTick: {
                show: true,
                lineStyle:{
                    color:'#E9E9E9'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#000'
                },
                formatter: function(value) {
                    var res = value;
                    if(res.length > 6) {
                        res = res.substring(0, 5) + "...";
                    }
                    return res;
                }
            },
            splitLine:{
                show:false,
            }
        },

        series: [

            {
                type: 'bar',
                barWidth:"40%",
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 1, 0,
                            [
                                {offset: 0, color: '#0057B5'},
                                {offset: 0.5, color: '#0057B5'},
                                {offset: 1, color: '#0057B5'}
                            ]
                        )
                    },
                    emphasis: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 1, 0,
                            [
                                {offset: 0, color: '#0057B5'},
                                {offset: 0.7, color: '#0057B5'},
                                {offset: 1, color: '#0057B5'}
                            ]
                        )
                    }
                },
                data:  [120, 200, 150, 80],
                type: 'bar'
            }
        ]
    };

  myChart.setOption(option);
        
  extension(myChart);
        
  function extension(mychart) {
　　　//判断是否创建过div框,如果创建过就不再创建了
      var id = document.getElementById("extension");
      if(!id) {
          var div = "<div id = 'extension' sytle=\"display:none\"></div>"
          $('#container').append(div);
      }
      mychart.on('mouseover', function(params) {
          if(params.componentType == "yAxis") {
              $('#extension').css({
                  "position": "absolute",
                  "color": "black",
                  // "border":"solid 1px blue",
                  "font-family": "PingFangSC",
                  "font-size": "14px",
                  "font-weight":"400",
                  "padding": "5px",
                  "color":"rgba(255,255,255,1)",
                  "display": "inline",
                  "background-color":"#30465A",
                  "line-height":"17px"

              }).text(params.value);

              $("html").mousemove(function(event) {
                  var xx = event.pageX - 30;
                  var yy = event.pageY + 20;
                  $('#extension').css('top', yy).css('left', xx);
              });
          }
      });

      mychart.on('mouseout', function(params) {
          if(params.componentType == "yAxis") {
              $('#extension').css('display', 'none');
          }
      });
  };
  </script>
</html>