我明明是已经在加载第二次数据时使用 clear() 方法
function cycle1() {
setInterval(function() {
chart1.clear();
chart1.setOption(option1, true);
getOption1();
}, 5000);
}
但是加载出来的数据还是第一次加载的数据,请大神们指教,谢谢了。
下面是getOption1方法,就是重复调用接口的。
var sumdata = [], completedata = [];
function getOption1() {
$.ajax({
type : "POST",
url : urls,
dataType : 'json',
success : function(data) {
for(var i = 0; i < data.fakedata1.length; i++) {
completedata.push(data.fakedata1[i]);
sumdata.push(data.fakedata2[i]);
}
console.log("completedata:",completedata);
console.log("sumdata:",sumdata);
sumdata = [];
completedata = [];
}
})
}
option1 = {
backgroundColor: '#0b1d35',
title: {
text: "前五名",
textStyle: {
color:'white',
fontStyle:'normal',
fontWeight:'bold',
fontFamily:'sans-serif',
fontSize:18,
},
left:20,
top:30
},
legend: {
top: 0,
right: 0,
textStyle:{
color:'#fff',
fontSize: 16
},
data: ['完成量', '订单总量']
},
grid: {
top: '30%',
left: '3%',
right: '4%',
bottom: '10%',
containLabel: true
},
tooltip: {
show:"true",
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
xAxis: {
type: 'value',
axisTick : {show: false},
axisLine: {
show: false,
lineStyle:{
color:'#fff',
}
},
splitLine: {
show: false
},
},
yAxis: [
{
type: 'category',
axisTick : {show: false},
axisLine: {
show: true,
lineStyle:{
color:'#fff',
}
},
axisLabel: {
textStyle: {
fontSize: 16
}
},
data: ['康威广场','越时代','盘龙一号','国际中心','翡翠东湾']
},
{
type: 'category',
axisLine: {show:false},
axisTick: {show:false},
axisLabel: {show:false},
splitArea: {show:false},
splitLine: {show:false},
data: ['康威广场','越时代','盘龙一号','国际中心','翡翠东湾']
},
],
series: [
{
name: '订单总量',
type: 'bar',
yAxisIndex:1,
itemStyle:{
normal: {
show: true,
color: '#277ace',
barBorderRadius:50,
borderWidth:0,
borderColor:'#333',
}
},
barGap:'0%',
barCategoryGap:'50%',
// data: [120, 132, 101, 134, 90]
data: sumdata
},
{
name: '完成量',
type: 'bar',
itemStyle:{
normal: {
show: true,
color: '#5de3e1',
barBorderRadius:50,
borderWidth:0,
borderColor:'#333',
}
},
barGap:'0%',
barCategoryGap:'50%',
// data: [32, 52, 41, 64, 15]
data: completedata
}
]
};
先谢谢上面两位 @sosout @Yhspehy ,特别是 @Yhspehy
首先 var sumdata = [], completedata = [];这两个全局变量是需要的。
循环请求的接口数据也没有问题。
问题实际上是出在 option1 的 series 中的 data 所获取的数据并没有真正随着 completedata 和 sumdata 的改变而改变,必须要用下面方法来改变。
然后 series 中的data 要这样子
好了,到这里就没有问题了,我把全部代码发出来吧。
请看下面
HTML
然后写了个js调用
另外引用的是外部的js,实际上我应该都放外面的,但是现在怎么方便怎么来吧,我以后再优化
好了,这样就完成了。