- 百度echartsseries数据更新问题
-
聚码交流
-
0
1

- yhuxAvNbtxUM
0000-00-00 00:00:00
- 回帖
我直接上个演示地址吧,方便查看问题所在,代码也是写在页面中的默认先请求一次,然后定时器,每隔一段时间去请求数据,更新图表,但是发现我请求成功后,想重新Tcharts.setOption(option)的时候,还是存在着上一次的数据,比如我第一次请求是2条数据,然后渲染没有问题,第二次请求返回1条数据的时候,渲染有问题,图表还存在着上一次的数据我截了下ajax请求的图片varmaxpage=1;vardataPage=1;varoption={};vardataArray,xAxisArray,legendArray;varTcharts=echarts.init(document.getElementById('Tcharts'));Tcharts.setOption({title:{//是否显示标题组件show:false},tooltip:{trigger:'axis'},legend:{data:[],left:'auto',right:'0',top:'0',bottom:'auto',padding:5,itemWidth:10,itemGap:20},grid:{show:true,left:'0',right:'3%',bottom:'0',top:'15%',containLabel:true,borderColor:'#ffffff'},toolbox:{show:false,feature:{saveAsImage:{}}},xAxis:{show:true,type:'category',data:[],nameGap:10,boundaryGap:false,nameTextStyle:{color:'#f2f2f2'},axisLabel:{},axisLine:{show:false,onZero:true,lineStyle:{color:'#999999',fontWeight:'bold'}},splitLine:{show:false},axisTick:{lineStyle:{color:'#ff5a2a',width:1},show:false//是否显示坐标轴刻度}},yAxis:{type:'value',axisLine:{show:true,onZero:true,lineStyle:{color:'#999999',fontWeight:'bold'}},axisLabel:{},axisTick:{show:false//是否显示坐标轴刻度}},series:[],textStyle:{fontFamily:'HelveticaNeue,Helvetica,PingFangSC,HiraginoSansGB,MicrosoftYaHei,Arial,sans-serif'},color:['#ff5a2a','#a981f3','#1496ec','#55ea84']//线条颜色列表});Tcharts.showLoading({text:"图表数据正在努力加载..."});//withDatefunctionwithDate(data){dataArray=[];xAxisArray=[];legendArray=[];vargoods=data.goods,months=data.months;if(data.msg===1){for(varg=0;g<goods.length;g++){dataArray.push(goods[g]);legendArray.push({icon:'circle',name:goods[g].name});}for(varm=0;m<months.length;m++){xAxisArray.push(months[m]);}option={legend:{data:legendArray},xAxis:{data:xAxisArray},series:dataArray}//console.log(dataArray+":"+xAxisArray+":"+legendArray);Tcharts.setOption(option);}else{}}//ajaxfunctiongetDate(){$.ajax({type:"post",url:"http://wy.woawin.com/verify/pricemovements",data:{dataPage:dataPage},dataType:"json",async:true,success:function(data){Tcharts.hideLoading();withDate(data);dataPage++;maxpage=data.maxpage;}});}getDate();window.setInterval(function(){if(maxpage>=dataPage){getDate();}else{dataPage=1;getDate();}},10000);在线演示地下演示效果