Incubator-echarts: श्रृंखला डेटा अद्यतन समस्या

बग को पुन: उत्पन्न करने और ठीक करने में सक्षम होने के लिए, कृपया अपनी समस्या का वर्णन करने के लिए नीचे दिए गए विनिर्देशों का पालन करें।

एक-पंक्ति सारांश [समस्या संक्षिप्त]

श्रृंखला में डेटा पृष्ठभूमि से प्राप्त किया जाना चाहिए। अजाक्स अनुरोध सफल होने के बाद, चार्ट डेटा को कैसे अपडेट किया जाए? मैं सीधे एक डेमो पता दूंगा, ताकि समस्या की जांच करना सुविधाजनक हो। कोड भी लिखा गया है पृष्ठ। मैंने पृष्ठ पर एक टाइमर जोड़ा। मैं हर बार एक समय में डेटा का अनुरोध करता हूं, और फिर चार्ट को अपडेट करता हूं, लेकिन जब मुझे लगता है कि मैं फिर से Tcharts.setOption (विकल्प) करना चाहता हूं; अनुरोध सफल होने के बाद, वहां अभी भी अंतिम डेटा में वर्णित एक गलत पता है। कृपया सलाह दें!

संस्करण और पर्यावरण [संस्करण और पर्यावरण]

• ECharts संस्करण [ECharts संस्करण]: 3.6.2
• ब्राउज़र संस्करण [ब्राउज़र प्रकार और संस्करण]: क्रोम 52.0.2743.116
• ओएस संस्करण [ओएस प्रकार और संस्करण]:

अपेक्षित व्यवहार [अपेक्षित परिणाम]

ECharts विकल्प [ECharts कॉन्फ़िगरेशन आइटम]

    var maxpage = 1;
    var dataPage = 1;
    var option = {};
    var dataArray ,xAxisArray,legendArray;
    var Tcharts = 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 : 'Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif'
        },
        color : ['#ff5a2a','#a981f3','#1496ec','#55ea84'] //线条颜色列表
    });
    Tcharts.showLoading({
        text: "图表数据正在努力加载..."
    });
    //withDate
    function withDate(data){
        dataArray = [];
        xAxisArray = [];
        legendArray = [];
        var goods = data.goods,months = data.months;
        if (data.msg === 1) {
            for (var g = 0;g < goods.length;g++) {
                dataArray.push(goods[g]);
                legendArray.push({icon : 'circle',name : goods[g].name});
            }
            for (var m = 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 {

        }
    }

    //ajax
    function getDate(){
        $.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;
            }
        });
    }


    function fechDate(){
        $.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){
            fechDate();
        }else{
            dataPage = 1;
            fechDate();
        }
    },10000);

अन्य टिप्पणियाँ [अतिरिक्त जानकारी]

ऑनलाइन डेमो एड्रेस डेमो एड्रेस है