echart Y轴显示不正常

时间:2022-08-23 21:54:22
Y轴刻度被吃了一部分,因为数值太大,显示不正常如图:
echart Y轴显示不正常
实际数据是这样的
echart Y轴显示不正常
怎么把被隐藏的显示出来,代码如下
function load(url,domName,title,legend,xAxis,yValue,name) { 
// 路径配置
        require.config({
            paths: {
                echarts: '/xParPlus/echarts/build/dist/'
            }
        });
        var curTheme;
        require(['/xParPlus/echarts/doc/example/theme/green'], function(tarTheme){
            curTheme = tarTheme;
        });
        require(
            [
                'echarts',
                'echarts/chart/bar',
                'echarts/chart/line'
            ],
            function (ec) {
                var myChart = ec.init(document.getElementById(domName),curTheme); 
                var option = {
                   title : {
                         text: title,
                         textStyle:{
                          fontSize:10
                         }
                     },
                     tooltip : {
                         trigger: 'axis'
                     },
                     legend: {
                      x:'left',
                         data:legend
                     },
                     grid:{
                      x:30,
                      y:50,
                      x2:0,
                      y2:30
                     },
                     toolbox: {
                         show : true,
                         feature : {
                             mark : {show: false},
                             dataView : {show: true, readOnly: false},
                             magicType : {show: true, type: ['line', 'bar','pie']},
                             restore : {show: true},
                             saveAsImage : {show: true}
                         }
                     },
                     calculable : true,
                     xAxis : [
                         {
                             type : 'category',
                             data : xAxis
                         }
                     ],
                     yAxis : [
                         {
                             type : 'value'
                         }
                     ],
                     series : [
                               {
                                 name:name,
                                 type:'bar',
                                 data:yValue
                             },
                     ]
                };
                myChart.setOption(option); 
            }
        );
        }



html为:
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>EffectiveDuration</title>
     <script type="text/javascript"> 
     function getQueryStr(sArgName)

     }
   </script>  
</head>
<body>
    <div id="main" style="width:100%;height:220px"></div>
    <script src="/xParPlus/echarts/build/dist/echarts.js"></script>
    <script src="/xParPlus/RISKJS/sensitivity/sensitivityAnalysis/Bar.js"></script>
    <script type="text/javascript">
     var title="";
     var name = "规模";
     var legend=['规模'];
     var xAxis = decodeURI(getQueryStr("xValue")).split(",");
var yValue  = getQueryStr("yValue").split(",");
     load("","main",title,legend,xAxis,yValue,name)
</script>
</body>

5 个解决方案

#1


那么高的分怎么没人出头呢!!!!!

#2


其中有一个grid属性,可以控制图形四周边距

#3


把Y轴换成X轴

#4


div  高度设置的高一点

#5


亲,看你一直,没有结贴,我把我解决的方案告诉你吧;
grid:{
   left:'5%',//组件距离容器左边的距离
   right:'4%',
   bottom:'7%',
  },
这三个数值随你自己设置,就是组件距离div的距离了,距离适中就不会出现刻度被吃掉的现象了ps:该配置写在option里面,也可以去echart的配置文档看看

#1


那么高的分怎么没人出头呢!!!!!

#2


其中有一个grid属性,可以控制图形四周边距

#3


把Y轴换成X轴

#4


div  高度设置的高一点

#5


亲,看你一直,没有结贴,我把我解决的方案告诉你吧;
grid:{
   left:'5%',//组件距离容器左边的距离
   right:'4%',
   bottom:'7%',
  },
这三个数值随你自己设置,就是组件距离div的距离了,距离适中就不会出现刻度被吃掉的现象了ps:该配置写在option里面,也可以去echart的配置文档看看