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;
});

0 0
原创粉丝点击