今天在使用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. 1040 Longest Symmetric String

    Given a string, you are supposed to output the length of the longest symmetric sub-string. For examp ...

  2. 用C/C++手撕CPlus语言的集成开发环境(1)—— 语言规范 + 词法分析器

    序言 之所以叫做CPlus语言,是因为原本是想起名为CMinus的,结果发现GitHub和Gitee上一堆的CMinus的编译器(想必都是开过编译原理课程并且写了个玩具级的语言编译器的大佬们吧).但是 ...

  3. phpstorm 方法名类名 作者日期 注释

    phpstorm 设置方法名 函数名注释  新建页面作者日期信息注释 官方提供的文档地址: http://www.jetbrains.com/phpstorm/help/creating-php-do ...

  4. windows CMD实现的信息收集工具

    bat1 @echo off echo ====================================================== echo [*] 所有盘符下的有趣文件 @For ...

  5. OD调试程序常用断点大全

    常用断点  拦截窗口:  bp CreateWindow 创建窗口  bp CreateWindowEx(A) 创建窗口  bp ShowWindow 显示窗口  bp UpdateWindow 更新 ...

  6. hdu3018 一笔画问题

    题意:       给你一幅画,这幅画由点和边构成,问你最少几笔能把这幅画画完. 思路:      这个题目的结论比较巧妙,首先我们考虑下,如果给的图是欧拉图,或者是条欧拉回路,那么我们一笔就搞定了, ...

  7. POJ2155二维线段树

    题意:      给一个n*n的01矩阵,然后有两种操作(m次)C x1 y1 x2 y2是把这个小矩形内所有数字异或一遍,Q x y 是询问当前这个点的值是多少?n<=1000 m<=5 ...

  8. 仁者见仁:缓冲区栈溢出之利用 Exploit 形成完整攻击链完全攻略(含有 PayLoad)

    > 前言 内存缓冲区溢出又名 Buffer OverFlow,是一种非常危险的漏洞,在各种操作系统和应用软件中广泛存在.利用缓冲区溢出进行的攻击,小则导致程序运行失败.系统宕机等后果,大则可以取 ...

  9. 0901-生成对抗网络GAN的原理简介

    0901-生成对抗网络GAN的原理简介 目录 一.GAN 概述 二.GAN 的网络结构 三.通过一个举例具体化 GAN 四.GAN 的设计细节 pytorch完整教程目录:https://www.cn ...

  10. SpringBoot 项目 部署 jar方式

    SpringBoot部署-jar方式 步骤1部署方式 Springboot 和我们之前学习的web 应用程序不一样,其本质上是一个 Java 应用程序,那么又如何部署呢?  通常来说,Springbo ...