在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ echarts 使用 ajax 加載數(shù)據(jù),無法清除上一次數(shù)據(jù)

echarts 使用 ajax 加載數(shù)據(jù),無法清除上一次數(shù)據(jù)

我明明是已經(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
    }
   
]

};

回答
編輯回答
夕顏

不需要clean,數(shù)據(jù)改變自動刷新,你不刷新的問題可能是option里的data沒有刷新,你可以在console.log("sumdata:",sumdata)之后打印下option,而且你為什么賦值之后又設(shè)置sumdata 和completedata 為[]

2017年9月4日 08:59
編輯回答
笨小蛋

先謝謝上面兩位 @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: []
        }
    ]
};

好了,這樣就完成了。

2018年2月1日 07:09
編輯回答
柒槿年

直接setOption通過數(shù)據(jù)的變化就能實現(xiàn)你要的效果。setOption時圖表不再是消失再出現(xiàn),而是在原基礎(chǔ)上發(fā)生圖形變化。以下是詳細文檔:
clipboard.png

2018年5月16日 23:05