现在位置首页 / 前端开发 /正文

Echarts的柱状统计图出现x轴统计时间出现间隔显示的问题

作者: IT小兵 | 2016年4月15日| 热度:℃ | 评论: |参与:

今天在使用Echarts的柱状统计图出现x轴统计时间出现间隔显示的问题:

数据都拿到了,放到Json数组都是完整的, 展现是时候

如下图:

------------------------------------------------------jsp页面代码 的div

<div class="f-r w-b45">
                <div id="proMonthCount" style="min-width: 310px; margin: 0 auto;padding-top:50px;"></div>
                <span class="title-ind-bule">项目工程增长</span>
                <div id="pro_tips" style="display: none;" class="index-tips"><span class="icon-bule-tips"></span>目前暂无数据 有数据时将为您统计图表</div>
</div>

js代码

var myChart;
var arrProCount;
var proCountMonth;
var proCount=0;
 
function getProCount(){
    var result = doAjax("POST", WEB_URL + '/views/getProCount', {}, false);
    result = eval("(" + result + ")");
    var results = result.results;
    arrProCount = [];
    proCountMonth = [];
    
    for (var i = 0, j = results.length; i < j; i++) {
        var curr_result = results[i];
        var curr_count = parseInt(curr_result.quantity);
        //var curr_arr = [ curr_result.countMonth, curr_count ];
        
        arrProCount.push(curr_count);
        proCountMonth.push(curr_result.countMonth);
        
        proCount += curr_count;
    }
}
function getProCountChart() {
    if (proCount == 0) {
        $("#pro_tips").show();
        return;
    }
    $("#proMonthCount").css("height", 400);
    
    alert(proCountMonth);
    alert(arrProCount);
    // 基于准备好的dom,初始化echarts图表
    myChart = echarts.init(document.getElementById('proMonthCount')); 
    var option = {
            title : {
                text: '项目工程增长'
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['项目工程数']
            },
            toolbox: {
                show : true,
                feature : {
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : proCountMonth,
                    
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
               
                {
                    name:'项目工程数',
                    type:'bar',
                    data:arrProCount
                }
            ]
        };
    // 为echarts对象加载数据 
    myChart.setOption(option);
    
}

后来经过不断的调整,边看API,不断的找原因,加了几行代码 就好了

修改代码如下,请看标红部分:

var myChart;
var arrProCount;
var proCountMonth;
var proCount=0;
 
function getProCount(){
    var result = doAjax("POST", WEB_URL + '/views/getProCount', {}, false);
    result = eval("(" + result + ")");
    var results = result.results;
    arrProCount = [];
    proCountMonth = [];
    
    for (var i = 0, j = results.length; i < j; i++) {
        var curr_result = results[i];
        var curr_count = parseInt(curr_result.quantity);
        //var curr_arr = [ curr_result.countMonth, curr_count ];
        
        arrProCount.push(curr_count);
        proCountMonth.push(curr_result.countMonth);
        
        proCount += curr_count;
    }
}
function getProCountChart() {
    if (proCount == 0) {
        $("#pro_tips").show();
        return;
    }
    $("#proMonthCount").css("height", 400);
    
    alert(proCountMonth);
    alert(arrProCount);
    // 基于准备好的dom,初始化echarts图表
    myChart = echarts.init(document.getElementById('proMonthCount')); 
    var option = {
            title : {
                text: '项目工程增长'
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['项目工程数']
            },
            toolbox: {
                show : true,
                feature : {
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : proCountMonth,
                     boundaryGap : true,   
                    show : true,  
                    axisLabel:{  
                        interval:0
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
               
                {
                    name:'项目工程数',
                    type:'bar',
                    data:arrProCount
                }
            ]
        };
    // 为echarts对象加载数据 
    myChart.setOption(option);
    
}

主要是修改xAxis的boundaryGap:

 xAxis : [
                {
                    type : 'category',
                    data : proCountMonth,
                     boundaryGap : true,   
                    show : true,  
                    axisLabel:{  
                        interval:0
                    }
                }
            ],


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询