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

来源: 老季博客
日期: 2019-5-23
作者: 腾讯云/服务器VPS推荐评测/Vultr
阅读数: 68

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结果如下:

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

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

整体运行效果:

ECharts图表中XY轴数据过多导致重叠显示不全问题如何解决 图文教程
链接到文章: https://jiloc.com/45714.html

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注