我明明是已經(jīng)在加載第二次數(shù)據(jù)時使用 clear() 方法
function cycle1() {
setInterval(function() {
chart1.clear();
chart1.setOption(option1, true);
getOption1();
}, 5000);
}
但是加載出來的數(shù)據(jù)還是第一次加載的數(shù)據(jù),請大神們指教,謝謝了。
下面是getOption1方法,就是重復(fù)調(diào)用接口的。
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: { // 坐標(biāo)軸指示器,坐標(biāo)軸觸發(fā)有效
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 = [];這兩個全局變量是需要的。
循環(huán)請求的接口數(shù)據(jù)也沒有問題。
for(var i = 0; i < data.fakedata1.length; i++) {
completedata.push(data.fakedata1[i]);
sumdata.push(data.fakedata2[i]);
}
問題實際上是出在 option1 的 series 中的 data 所獲取的數(shù)據(jù)并沒有真正隨著 completedata 和 sumdata 的改變而改變,必須要用下面方法來改變。
option1.series[0].data = sumdata;
option1.series[1].data = completedata;
然后 series 中的data 要這樣子
data:[]
好了,到這里就沒有問題了,我把全部代碼發(fā)出來吧。
請看下面
HTML
<div class="box1">
<div style="width: 400px; margin: 10px 0 0 30px; color: white; font-size: 36px;">
訂單完成率排名
</div>
<hr style="width: 400px; height: 3px; margin-left: 30px;" color="purple">
<div id="chart1" style="width: 580px; height: 220px;"></div>
</div>
然后寫了個js調(diào)用
<script type="text/javascript">
var chart1 = echarts.init(document.getElementById('chart1'));
function cycle1() {
setInterval(function() {
// chart1.clear();
getOption1();
}, 5000);
}
cycle1();
</script>
另外引用的是外部的js,實際上我應(yīng)該都放外面的,但是現(xiàn)在怎么方便怎么來吧,我以后再優(yōu)化
var sumdata = [], completedata = [];
function getOption1() {
$.ajax({
type : "POST",
url : urls,
dataType : 'json',
// async: false,
success : function(data) {
for(var i = 0; i < data.fakedata1.length; i++) {
completedata.push(data.fakedata1[i]);
sumdata.push(data.fakedata2[i]);
}
option1.series[0].data = sumdata;
option1.series[1].data = completedata;
console.log("completedata:",completedata);
console.log("sumdata:",sumdata);
chart1.setOption(option1, true);
completedata = [];//這里就是把數(shù)組請空,重新放新請求的數(shù)據(jù)
sumdata = [];//這里就是把數(shù)組請空,重新放新請求的數(shù)據(jù)
}
})
}
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: { // 坐標(biāo)軸指示器,坐標(biāo)軸觸發(fā)有效
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: []
},
{
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: []
}
]
};
好了,這樣就完成了。
北大青鳥APTECH成立于1999年。依托北京大學(xué)優(yōu)質(zhì)雄厚的教育資源和背景,秉承“教育改變生活”的發(fā)展理念,致力于培養(yǎng)中國IT技能型緊缺人才,是大數(shù)據(jù)專業(yè)的國家
達內(nèi)教育集團成立于2002年,是一家由留學(xué)海歸創(chuàng)辦的高端職業(yè)教育培訓(xùn)機構(gòu),是中國一站式人才培養(yǎng)平臺、一站式人才輸送平臺。2014年4月3日在美國成功上市,融資1
北大課工場是北京大學(xué)校辦產(chǎn)業(yè)為響應(yīng)國家深化產(chǎn)教融合/校企合作的政策,積極推進“中國制造2025”,實現(xiàn)中華民族偉大復(fù)興的升級產(chǎn)業(yè)鏈。利用北京大學(xué)優(yōu)質(zhì)教育資源及背
博為峰,中國職業(yè)人才培訓(xùn)領(lǐng)域的先行者
曾工作于聯(lián)想擔(dān)任系統(tǒng)開發(fā)工程師,曾在博彥科技股份有限公司擔(dān)任項目經(jīng)理從事移動互聯(lián)網(wǎng)管理及研發(fā)工作,曾創(chuàng)辦藍懿科技有限責(zé)任公司從事總經(jīng)理職務(wù)負責(zé)iOS教學(xué)及管理工作。
浪潮集團項目經(jīng)理。精通Java與.NET 技術(shù), 熟練的跨平臺面向?qū)ο箝_發(fā)經(jīng)驗,技術(shù)功底深厚。 授課風(fēng)格 授課風(fēng)格清新自然、條理清晰、主次分明、重點難點突出、引人入勝。
精通HTML5和CSS3;Javascript及主流js庫,具有快速界面開發(fā)的能力,對瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網(wǎng)頁制作和網(wǎng)頁游戲開發(fā)。
具有10 年的Java 企業(yè)應(yīng)用開發(fā)經(jīng)驗。曾經(jīng)歷任德國Software AG 技術(shù)顧問,美國Dachieve 系統(tǒng)架構(gòu)師,美國AngelEngineers Inc. 系統(tǒng)架構(gòu)師。