1、ajax导致Echarts不显示饼图数据、柱状图数据只显示气泡的问题。

  ajax的同步。这个同步的意思是当JS代码加载到当前ajax的时候会把页面里所有的代码停止加载,页面出去假死状态,当这个ajax执行完毕后才会继续运行其他代码页面假死状态解除。而异步则这个ajax代码运行中的时候其他代码一样可以运行。
  jQuery的async:false,这个属性。默认是true:异步;false:同步。    
  默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。
  注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。

 var data1={ "result": [
{value: , name: "数量1"},
{value: , name: "数量2"},
{value: , name: "数量3"},
]
}; //柱状图,data1是json格式传进去的
function barChart(data1, chart, name) { /* var dataList = data1.result;
var xlabel = [];
var yvalue = [];
$(dataList).each(function(i, item) {
xlabel.push(dataList[i].name);
yvalue.push(dataList[i].value);
}); */ //console.log(xlabel);
//console.log(yvalue); var xlabel_2 = ["数量1", "数量2", "数量3"];
var yvalue_2 = new Array();
var applies = new Array();
var url = 'dataxxxAction!findDataxxx.action';
$.ajax({
type : 'POST',
url : url,
dataType : 'json',
async : false,//ajax同步
success : function(data) {
applies = data.result;
var length = applies.length;
//......处理操作
}
}
}); console.log(xlabel_2);
console.log(yvalue_2); // 柱状图
var memoryOption = {
tooltip : {
trigger : 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
formatter : function(params) {
var relVal = params[].seriesName + "<br/>";
relVal += params[][] + ' : ' + params[].data + "<br/>";
return relVal;
},
position : [ , ]
},
grid : {
x : '',
y : '',
x2 : '',
y2 : '',
borderWidth : ''
},
legned : {
borderColor : 'rgb(18,60,112)',
},
xAxis : [ {
type : 'category',
data : xlabel_2,
axisTick : {
alignWithLabel : true
},
axisLabel : {
textStyle : {
color : 'rgb(164,176,191)',
fontSize : ''
}
},
splitLine : {
show : false,
}
} ],
yAxis : [ {
type : 'value',
axisLabel : {
textStyle : {
color : 'rgb(164,176,191)',
fontSize : ''
}
},
splitLine : {
show : false,
}
} ],
series : [ {
name : name,
type : 'bar',
data : yvalue_2,
barWidth : '',
itemStyle : {
normal : {
color : (function() {
var zrColor = require('zrender/tool/color');
return zrColor.getLinearGradient(, , , , [
[ , 'rgb(96,188,227)' ],
[ , 'rgb(96,188,227)' ] ])
})(),
label : {
show : true,
formatter : function(params) {
if (params.data == '80.01') {
params.data = '';
}
var relVal = params.data;
return relVal;
},
textStyle : {
fontSize : ''
},
position : 'top'
}
}
},
} ]
};
chart.setOption(memoryOption, true);
}

我是这样搞的报表,但是呢,一开始使用的异步,这就出现这个问题了,首先它是代码一起运行,导致运行了初始值0,报表只显示了气泡,不显示报表数据,搞了一天才发现,使用chrome的f12分析,开始都没有意识到,先执行了一遍是空的,但是又执行了一遍数据的,最后还是没有数据填充报表。最后才发现问题,使用了ajax同步才搞定。使用json预定义的数据是有的,报表正常分析了好久,记录一下。方便以后查询原因。

待续.....

ajax导致Echarts不显示饼图数据、柱状图数据只显示气泡的问题。的更多相关文章

  1. 解决 git branch -a 无法全部显示远程的分支,只显示master分支

    新建分支 若遇到 git branch -a 无法全部显示远程的分支,只显示master分支 可以通过 git fetch 将本地远程跟踪分支进行更新,与远程分支保持一致

  2. ECharts折线图多个折线每次只显示一条

    echart 两条折线图如何默认只显示一条,另一条隐藏呢 只需要在legend后加上, selectedMode: 'single', selectedMode [ default: true ] 图 ...

  3. MySQL Workbench无法显示左侧的navigator,只显示Object info和Session

    问题描述:Mac版MySQL Workbench出现异常强制退出后,再次进入后左侧的navigator消失,左侧整个导航条消失了,只显示Object info和Session. 问题根源:MySQL ...

  4. Oracle的学习二:表管理(数据类型、创建/修改表、添加/修改/删除数据、数据查询)

    1.Oracle表的管理 表名和列名的命名规则: 必须以字母开头: 长度不能超过30个字符: 不能使用oracle的保留字: 只能使用如下字符:A-Z, a-z, 0-9, $, # 等. Oracl ...

  5. 常见数据库SELECT结果只显示前几条记录方法汇总

    常见数据库SELECT结果只显示前几条记录方法汇总 为了查看数据表中的数据情况.经常会遇到想让查询结果只显示N行,比如只显示10行的情况.不同的数据库有不同的关键字和SELECT实现语法. 1.SQL ...

  6. wordpress如何添加自增变量(第一篇文章显示摘要后面的只显示标题)

    有时我们在调用文章列表的时候需要在前面添加序号看起来比较整齐,如何实现呢?要想精确的控制每篇文章,我们先在循环前定义一个变量 $ashu_i=1 来计数,变量名随便,然后每循环一次,$ashu_i加1 ...

  7. linux下显示完整路径,linux下显示绝对路径

    linux下,命令行显示路径仅最后一个文件名,非常不方便,想显示完整路径.环境背景:linux,无root权限,可sudo(为了服务器安全,一般只给管理员root账号和密码,普通账号仅sudo权限)方 ...

  8. 利用AJAX JAVA 通过Echarts实现豆瓣电影TOP250的数据可视化

    mysql表的结构   数据(数据是通过爬虫得来的,本篇文章不介绍怎么爬取数据,只介绍将数据库中的数据可视化):   下面就是写代码了: 首先看一下项目目录:   数据库层   业务逻辑层   pac ...

  9. echarts彩虹柱状图 每个bar显示不同颜色, 标题在不同位置 ,工具中有可以直接保存为图片下载,平均线的添加

    可以参考: https://echarts.baidu.com/echarts2/doc/example.html https://echarts.baidu.com/echarts2/doc/doc ...

随机推荐

  1. [leetcode] 5.Longest Palindromic Substring-1

    开始觉得挺简单的 写完发现这个时间超限了: class Solution: def longestPalindrome(self, s: str) -> str: # longest palin ...

  2. Linux-网络管理

    网络管理 一 基本网络配置 linux操作系统,以太网卡用“eth”表示网卡:序号从零开始eth0代表到系统能够识别的第一个网卡eth1....第2个网卡 查看网卡信息 查看网卡信息 查看当前系统所连 ...

  3. Filebeat 日志收集器 安装和配置

    Filebeat的配置文件是/etc/filebeat/filebeat.yml,遵循YAML语法.具体可以配置如下几个项目: Filebeat Output Shipper Logging(可选) ...

  4. posgreSQL安装失败解决方案

    选择适合自己电脑版本的postgreSQL进行安装,显示安装失败,错误信息:problem running post-install step.installation may not complet ...

  5. linux系统中日常运维常用命令汇总一

    一.查看日志和机器相关信息常用命令 1.cat cat 命令连接文件并打印到标准输出设备上,cat经常用来显示文件的内容,类似于下的type命令注意:当文件较大时,文本在屏幕上迅速闪过(滚屏),用户往 ...

  6. finalize()与PhantomReference学习笔记

    众所周知,Java语言提供了自动垃圾回收机制,使得程序员不用考虑自己释放不再使用的内存.既然回收内存的活都让Java自己干了,程序员在这方面能干的事情就不多了.尽管如此,Java也提供了一些让程序员对 ...

  7. SQL数字型注入代码审计

    数字型注入 SQL注入攻击,简称注入攻击,是发生于应用程序与数据库层的安全漏洞. 简而言之,是在输入的字符串之中注入sql指定,在设计不良的程序当中忽略了检查,那么这些注入进去的指令就会被数据库服务器 ...

  8. AIC与BIC

    首先看几个问题 1.实现参数的稀疏有什么好处? 一个好处是可以简化模型.避免过拟合.因为一个模型中真正重要的参数可能并不多,如果考虑所有的参数作用,会引发过拟合.并且参数少了模型的解释能力会变强. 2 ...

  9. mysql并发控制之快照读和当前读

    上一篇简单的介绍了下MVCC(多版本并发控制)的原理,MVCC会对事物内操作的数据做多版本控制,从而实现并发环境下事物对数据写操作的阻塞不影响读操作的性能.而这个多版本控制的实现是由undo log来 ...

  10. 题解-HAOI2018全套

    去冬令营转了一圈发现自己比别人差根源在于刷题少,见过的套路少(>ω<) 于是闲来无事把历年省选题做了一些 链接放的都是洛谷的,bz偷懒放的也是链接 AM.T1 奇怪的背包 Problem ...