ECharts图表中XY轴数据过多导致重叠显示不全问题如何解决 图文教程

ECharts，缩写来自Enterprise Charts，商业级数据图表，它最初是为了满足百度公司商业体系里各种业务系统（如凤巢、广告管家等等）的报表需求。 现在这个项目也由百度在开发维护。

之前我们介绍了【PHP Mysql 动态数据结合 highcharts 图表统计】，最近我们在日常的开发中使用到ECharts插件来制表，但是如果遇到XY轴内容过长显示不全怎么办？下面我们记录一下解决办法。

PHP代码部分

     $res = db_select('online_action_log','1=1 group by url order by nums desc','url,count(url) as nums','','10');       $res = array_reverse($res);      $tmp = array();     foreach($res as $key => $val ){         $tmp['x'][] = $val['nums'];          $tmp['y'][] = $val['url'];      }     $yday_url_top10['xAxis'] = json_encode(array_values($tmp['x']));     $yday_url_top10['yAxis'] = json_encode(array_values($tmp['y']));   

HTML代码

<div id="yday_url_top10"></div>

JAVASCRIPT代码

<script type="text/javascript"> /* URL TOP 10 开始*/                yday_url_top10_option = {     title : {         text: '昨日URL访问前十', //        subtext: '数据来自网络'     },     tooltip : {         trigger: 'axis'     },     legend: {         data:['昨日URL访问前十', '']     },     toolbox: {         show : true,         feature : {             mark : {show: true},             dataView : {show: true, readOnly: false},             magicType: {show: true, type: ['line', 'bar']},             restore : {show: true},             saveAsImage : {show: true}         }     },     calculable : true,     xAxis : [         {             type : 'value',             boundaryGap : [0, 0.01]         }     ],     yAxis : [         {             type : 'category',             data : <?php echo $yday_url_top10['yAxis']?>,             axisLabel:{ interval:0,//0：全部显示，1：间隔为1显示对应类目，2：依次类推，（简单试一下就明白了，这样说是不是有点抽象）                          rotate:0,//倾斜显示，-：顺时针旋转，+或不写：逆时针旋转              }         }      ],     grid: [{          left: '30%',//因旋转导致名字太长的类目造成遮蔽，可以配合这两个属性          bottom:'10%'// 分别表示：距离左边距和底部的距离，具体数值按实际情况调整     }],     series : [         {             name:'访问次数',             type:'bar',             itemStyle : {                       normal : {                           color:'#ff69b4',  //圈圈的颜色                         lineStyle:{                               color:'#ff69b4'  //线的颜色                         }                   }               },               data:<?php echo $yday_url_top10['xAxis']?>         },     ]  }; var yday_url_top10_Chart = echarts.init(document.getElementById('yday_url_top10')); // 使用刚指定的配置项和数据显示图表。 yday_url_top10_Chart.setOption(yday_url_top10_option); /*  URL TOP 10 IP 结束*/        </script>

整理代码执行后，数据HTML结果如下：

这里是Y轴的内容比较长，所以我们这里将grid的配置中加入了left:30%的属性，这里需要根据自己的需求来写。

整体运行效果：