今天在使用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);
    
}

----------------------------------------------------------------

在此记录下这次解决问题的方案。

Echarts的柱状统计图出现x轴统计时间出现间隔显示的问题的更多相关文章

  1. 用canvas 绘制的饼状统计图、柱状统计图、折线统计图

    canvas 绘制的饼状统计图 canvas 绘制的柱状统计图 canvas 绘制的折线统计图

  2. echarts之简单的入门——【一】做个带时间轴的柱状统计图

    百度Echarts 官网首页  http://echarts.baidu.com/ 配置项手册 http://echarts.baidu.com/option.html#title GL配置项手册 h ...

  3. Devexpress中WebChartControl控件柱状统计图的做法(数据为调用存储过程)

    //前台控件代码:WebChartControl控件: <%-- 月采购量统计--%> <dxchartsui:WebChartControl ID="WebChartCo ...

  4. java项目使用Echarts 做柱状堆叠图,包含点击事件

    基础知识请自行百度查看,以下直接贴出实现代码: <%@ page pageEncoding="UTF-8"%><!DOCTYPE html><html ...

  5. ECharts图表之柱状折线混合图

    Echarts 官网主页  http://echarts.baidu.com/index.html Echarts 更多项目案例  http://echarts.baidu.com/echarts2/ ...

  6. 用echartsjs 实现动态绘制折线、柱状等图形,并实现多图联动效果

    echarts对于大数据处理后绘制折线图,柱形图等等的效果和速度都很好.下面我们介绍 怎么把封装的数据列表解析出来,动态绘图,并且实现鼠标联动效果引入js文件: <script type=&qu ...

  7. echart使用自定义单个柱状颜色实现

    项目实践中遇到一个根据需要,当X轴等于某个值是,柱状变成特殊颜色的需求,大致有两个方案实现: 1.在前台遍历数据对象,判断设置: 2.在后台拼装数据是,按照格式要求拼装好: 手拉手,用Vue开发动态刷 ...

  8. 使用WinForm Chart控件 制作饼装,柱状,折线图

    http://blog.csdn.net/dream2050csdn/article/details/53510340 chart控件的属性很多,主要用到Chart控件图表区域的属性有五个属性 1.A ...

  9. iOS 使用Charts框架 折线,柱状,K线,饼状,雷达全攻略

    我是前言: 大约几个月前我在某平台写了一篇文章, 文中简单地介绍了Charts两种图表的样式的使用, 不过有种意犹未尽的感觉, 利用周末的空闲时间再次看了看, 有了新的收获, 今天发出来,分享给大家, ...

随机推荐

  1. HUAWEI防火墙双出口据链路带宽负载分担

    组网图形 组网需求 通过配置根据链路带宽负载分担,使流量按照带宽的比例分担到各链路上,保证带宽资源得到充分利用. 如图1所示,企业分别从ISP1和ISP2租用了一条链路,ISP1链路的带宽为100M, ...

  2. Kafka2.8安装

    1.概述 最近Kafka官网发布了2.8版本,在该版本中引入了KRaft模式.鉴于新版本和新特性的引入,相关使用资料较少,那边本篇博客笔者将为大家介绍Kafka2.8的安装和使用. 2.内容 2.1  ...

  3. 案例分析——Who is the king of handwriting notes?

    案例分析--Who is the king of handwriting notes? 项目 内容 这个作业属于那个课程 2021春季学期软件工程(罗杰.任健) 这个作业的要求在哪里 案例分析 我在这 ...

  4. OAuth 2.0、OIDC 原理

    OAuth 目录 OAuth 什么是 OAuth? 为什么是 OAuth? SAML OAuth 和 API OAuth 主要组件 OAuth 作用域 OAuth 参与者 OAuth 令牌 OAuth ...

  5. 书评第001篇:《C++黑客编程揭秘与防范》

    本书基本信息 作者:冀云(编著) 出版社:人民邮电出版社 出版时间:2012-6-1 ISBN:9787115280640 版次:1 页数:265 字数:406000 印刷时间:2012-6-1 开本 ...

  6. Windowsw核心编程 第13章 Windows内存结构

    第1 3章 Wi n d o w s的内存结构 13.1 进程的虚拟地址空间 每个进程都被赋予它自己的虚拟地址空间.对于 3 2位进程来说,这个地址空间是4 G B,因为3 2位指针可以拥有从0 x  ...

  7. 2020腾讯Android岗初级到高级面试真题收录解析

    前言 马上就要到金九银十面试季了,需要找工作的小伙伴可以开始刷题复习了. 今天给大家分享的是博主腾讯面试的面经以及对腾讯2020上半年Android开发岗面经真题收录,希望可以帮助到大家,喜欢的朋友可 ...

  8. Linux安装Redis报错`cc:命令未找到`

    缺少gcc和gcc-c++的编译环境,安装即可. 可以联网情况下使用命令 yum install gcc yum install gcc-c++ 然后清理原来的残余文件 make distclean ...

  9. VS里的 代码片段(Code snippet)很有用,制作也很简单

    工欲善其事必先利其器,而 Visual Studio 就是我们的开发利器. 上一篇文章,介绍了一个很棒的快捷键,如果你还没用过这个快捷键,看完之后应该会豁然开朗.如果你已经熟练的应用它,也会温故而知新 ...

  10. babylin使用思路