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%的属性,这里需要根据自己的需求来写。

整体运行效果:

腾讯云限时秒杀【点击购买】

搬瓦工,CN2高速线路,1GB带宽,电信联通优化KVM,延迟低,速度快,建站稳定,搬瓦工BandwagonHost VPS优惠码BWH26FXH3HIQ,支持<支付宝> 【点击购买】!

Vultr$3.5日本节点,512M内存/500G流量/1G带宽,电信联通优化,延迟低,速度快【点击购买】!

阿里云香港、新加坡VPS/1核/1G/25G SSD/1T流量/30M带宽/年付¥288【点击购买】