echarts图形报表缓存问题(option数据缓存)
来源:互联网 发布:淘宝数据包上传 编辑:程序博客网 时间:2024/06/08 05:24
这几天我在工作中用到了echarts开发报表。每次查询出来的数据都是新的,但是echart展现的图形报表却还是之前的数据。网上找了搜索了很多次也没能解决,后面加了技术群才解决的。
我开始已经确定是报表缓存的问题了,并不是数据的问题,但苦于找不到解决的办法,查看相关文档也没找到(可能是没仔细找),其实主要是用到了echarts的clear()方法。请看如下代码:
requirejs.config({
baseUrl : "/js/pub/",
paths : {
"f" : "jquery.form",
"u" : "util"
}
});
var xAixsData = []; //曲折线X轴类目
var npsData = [],qualityData = [],deliverData = [],serviceData = [],
priceData = [],versionTypeData = [],packingData = []; //曲折线数据
define([ "f","u" ], function(f,u) {
var fn = {
init : function() {
biz.init();
biz.bind();
}
};
var biz = {
init : function() {
//biz.event.npsOpChoose();
//$(".npsOptions > span:first").click();
biz.event.npsOpChooseCensus();
},
bind : function() {
$("#search_btn").on("click", biz.event.npsOpChooseCensus);
},
event : {
npsOpChoose : function(){
//修改后
$(".npsOptions > span").toggle(
function(){
$(this).addClass("opChooseSpan");
biz.event.npsOpChooseCensus();
},
function(){
$(this).removeClass("opChooseSpan");
}
);
},
//获取曲折线类目及数据
getChartData : function(){
//初始化坐标轴、数据集
xAixsData = []; //曲折线X轴类目
npsData = [],qualityData = [],deliverData = [],serviceData = [],
priceData = [],versionTypeData = [],packingData = []; //曲折线数据
params = $("input","#querys").serializeArray();
$.ajax({
url:"/bx/getMonthNPSData",
type:"GET",
data:params,
async:false,
dataType:"json",
success:function(data){
if(undefined != data){
for(var i=0;i<data.length;i++){
xAixsData[i] = data[i].nps_time;
npsData[i] = (data[i].nps * 100).toFixed(2);
qualityData[i] = (data[i].quality_nps * 100).toFixed(2);
deliverData[i] = (data[i].deliver_nps * 100).toFixed(2);
serviceData[i] = (data[i].service_nps * 100).toFixed(2);
priceData[i] = (data[i].price_nps * 100).toFixed(2);
versionTypeData[i] = (data[i].version_type_nps * 100).toFixed(2);
packingData[i] = (data[i].packing_nps * 100).toFixed(2);
}
}
},
complete:function(XMLHttpRequest, textStatus){
if(textStatus == "error"){
alert("报表统计数据获取失败!");
return;
}
}
});
},
//趋势图表方法
npsOpChooseCensus : function(){
var month1 = $("#month1").val();
var month2 = $("#month2").val();
if("" == month1 || "" == month2){
alert("请选择完整的月度区间!");
return;
}
if(month1 >= month2){
alert("开始月份必须小于结束月份");
return;
}
biz.event.getChartData();
//报表数据
chartTitle = ['NPS','质量','交期','服务','报价','打版','物流'];
chartData = [
{
name:'NPS',
type:'line',
//stack: '总量',
data:npsData,
smooth : true
},
{
name:'质量',
type:'line',
//stack: '总量',
data:qualityData,
smooth : true
},
{
name:'交期',
type:'line',
//stack: '总量',
data:deliverData,
smooth : true
},
{
name:'服务',
type:'line',
//stack: '总量',
data:serviceData,
smooth : true
},
{
name:'报价',
type:'line',
//stack: '总量',
data:priceData,
smooth : true
},
{
name:'打版',
type:'line',
//stack: '总量',
data:versionTypeData,
smooth : true
},
{
name:'物流',
type:'line',
//stack: '总量',
data:packingData,
smooth : true
}
];
//图表参数数据
option = {};
option = {
tooltip : {
trigger: 'axis',
formatter:function(params){
var res = params[0][1];
for (var i = 0, l = params.length; i < l; i++) {
res += '<br/>' +params[i][0]+" : "+params[i][2]+"%";
}
return res;
}
},
legend: {
data:chartTitle,
x: "left"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
/*axisTick : {
show : true,
interval : 0
},*/
data : xAixsData
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter : function (value){return value + '%';}
}
}
],
series : chartData
};
var monthLineChart = echarts.init(document.getElementById("npsMonthCensus"));
//清空画布,防止缓存
monthLineChart.clear();
monthLineChart.setOption(option);
}
}
};
return fn;
});
- echarts图形报表缓存问题(option数据缓存)
- 解决echarts图形报表缓存问题
- 百度Echarts 全国省市地图 动态数据图形报表
- showModalDialog数据缓存问题
- eCharts制作数据报表
- oracle数据的缓存问题
- thinkPHP的数据缓存问题
- 关于echarts动态显示数据报表相关问题
- js实现图形报表 ECharts插件
- 报表缓存的配置
- 清除Webi报表缓存
- ASP.NET+JQuery+.Ashx实现+百度Echarts 实现动态柱状图数据图形报表的统计
- 报表性能优化专题三—数据集缓存优化
- 报表性能优化方案之数据集缓存与共享
- 数据缓存
- 数据缓存
- 【数据缓存】
- 数据缓存
- Android线程优先级设置方法技巧
- jvm的几个运行时数据区域
- AudioManager黑名单来电自动静音
- 日经社説 20150310 東京大空襲70年が問うもの
- SD/MMC异同
- echarts图形报表缓存问题(option数据缓存)
- UVa 12293 Box Game(博弈,SG函数)
- Python 重要标准库1
- 严蔚敏--快速排序
- IOS单例代码
- js获取Url参数的一般方法
- 日经社説 20150310 日独は国際秩序の安定へ協力強化を
- 《java解惑》--表达式之谜
- 解决asp.net MVC 中局部刷新的问题