Echarts的柱状统计图出现x轴统计时间出现间隔显示的问题
今天在使用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轴统计时间出现间隔显示的问题的更多相关文章
- 用canvas 绘制的饼状统计图、柱状统计图、折线统计图
canvas 绘制的饼状统计图 canvas 绘制的柱状统计图 canvas 绘制的折线统计图
- echarts之简单的入门——【一】做个带时间轴的柱状统计图
百度Echarts 官网首页 http://echarts.baidu.com/ 配置项手册 http://echarts.baidu.com/option.html#title GL配置项手册 h ...
- Devexpress中WebChartControl控件柱状统计图的做法(数据为调用存储过程)
//前台控件代码:WebChartControl控件: <%-- 月采购量统计--%> <dxchartsui:WebChartControl ID="WebChartCo ...
- java项目使用Echarts 做柱状堆叠图,包含点击事件
基础知识请自行百度查看,以下直接贴出实现代码: <%@ page pageEncoding="UTF-8"%><!DOCTYPE html><html ...
- ECharts图表之柱状折线混合图
Echarts 官网主页 http://echarts.baidu.com/index.html Echarts 更多项目案例 http://echarts.baidu.com/echarts2/ ...
- 用echartsjs 实现动态绘制折线、柱状等图形,并实现多图联动效果
echarts对于大数据处理后绘制折线图,柱形图等等的效果和速度都很好.下面我们介绍 怎么把封装的数据列表解析出来,动态绘图,并且实现鼠标联动效果引入js文件: <script type=&qu ...
- echart使用自定义单个柱状颜色实现
项目实践中遇到一个根据需要,当X轴等于某个值是,柱状变成特殊颜色的需求,大致有两个方案实现: 1.在前台遍历数据对象,判断设置: 2.在后台拼装数据是,按照格式要求拼装好: 手拉手,用Vue开发动态刷 ...
- 使用WinForm Chart控件 制作饼装,柱状,折线图
http://blog.csdn.net/dream2050csdn/article/details/53510340 chart控件的属性很多,主要用到Chart控件图表区域的属性有五个属性 1.A ...
- iOS 使用Charts框架 折线,柱状,K线,饼状,雷达全攻略
我是前言: 大约几个月前我在某平台写了一篇文章, 文中简单地介绍了Charts两种图表的样式的使用, 不过有种意犹未尽的感觉, 利用周末的空闲时间再次看了看, 有了新的收获, 今天发出来,分享给大家, ...
随机推荐
- CS与MSF之间的会话传递
0x01 MSF会话传递到CS 1. CS上的操作 点击Cobalt Strike然后选择监听器,创建一个HTTPS Beacon的监听器即可 创建成功后如下 2. MSF上的操作 前提是已经获取到了 ...
- SpringCloud(六)Bus消息总线
Bus 消息总线 概述 分布式自动刷新配置功能 Spring Cloud Bus 配合 Spring Cloud Config使用可以实现配置的动态刷新 Bus支持两种消息代理:RabbitMQ和Ka ...
- 3. Linux基本结构与终端打开方法,关闭方法。
Linux基本机构: 应用程序 标准库 Linux操作系统内核 硬件 (上层依赖于下层) 终端工具: 打开方法: 1.点击图标 2.搜索命令:终端 退出终端: 1.exit<回车> 2.C ...
- sublime text 快捷键的使用大全
多行选择后按下ctrl+/ 选择类 Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本. Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑.举个栗子:快速选中 ...
- UVA11020 优势人群(multiset)
题意: 给你N个人,每个人有两个权值,x,y对于某一个人,如果不存在某一个人x' y', x' < x && y' <= y 或者x' <= x & ...
- C#-播放器相关
axWindowsMediaPlayer1.URL= 设置路径 axWindowsMediaPlayer1.Ctlcontrols.play();开始 axWindowsMediaPlayer1.Ct ...
- Portswigger web security academy:HTTP request smuggling
HTTP request smuggling 目录 HTTP request smuggling HTTP request smuggling, basic CL.TE vulnerability H ...
- 0901-生成对抗网络GAN的原理简介
0901-生成对抗网络GAN的原理简介 目录 一.GAN 概述 二.GAN 的网络结构 三.通过一个举例具体化 GAN 四.GAN 的设计细节 pytorch完整教程目录:https://www.cn ...
- 分布式事务与Seate框架(1)——分布式事务理论
前言 虽然在实际工作中,由于公司与项目规模限制,实际上所谓的微服务分布式事务都不会涉及,更别提单独部署构建Seata集群.但是作为需要不断向前看的我,还是有必要记录下相关的分布式事务理论与Seate框 ...
- win10 下安卓源码同步小技巧
win10下,通过 清华镜像源 AOSP 可以快速拿到 100G 的 .repo 备份 然后 用 repo sync 就可以得到 安卓源码,爽不爽! 下载到win10 e盘下,用powershell ...