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

整体运行效果：