Incubator-echarts: シリーズデータ更新の問題

作成日 2017年06月18日  ·  3コメント  ·  ソース: apache/incubator-echarts

バグを再現して修正できるようにするには、以下の仕様に従って問題を説明してください。

1行の要約[問題の概要]

シリーズのデータ​​はバックグラウンドから取得する必要があります。ajaxリクエストが成功した後、チャートデータを更新する方法は?問題を確認するのに便利なように、デモアドレスを直接提供します。コードも記述されています。ページ。ページにタイマーを追加しました。時々データをリクエストしてからグラフを更新しますが、リクエストが成功した後、re-Tcharts.setOption(option);を再実行したい場合は、はまだ最後のデータに記載されている間違ったアドレスです。アドバイスしてください!

バージョンと環境[バージョンと環境]

  • EChartsバージョン[EChartsバージョン]:3.6.2
  • ブラウザのバージョン[ブラウザの種類とバージョン]:Chrome 52.0.2743.116
  • OSバージョン[OSの種類とバージョン]:

期待される動作[期待される結果]

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);

その他のコメント[追加情報]



オンラインデモアドレスはデモアドレスです

最も参考になるコメント

setOption(option, true)

全てのコメント3件

setOption(option, true)

https://github.com/ecomfe/echarts/issues/3976の回答の1つが私の問題を解決しました。最初に、chartInstance.clear()、次にsetOption、直接setOption(option、true)は、更新します。私自身のテストの結果は、上記の2つの方法のどちらもマージの効果がないということです。 echartsの更新プロセスには問題があるようです。グラフの表示を適宜変更したいのですが、chartInstance.resizeがエッジにマークを残すたびに。信頼できる解決策があるかどうかも知りたいです

setOption(option, true)

この完全な更新では、dispatchActionを介して行った変更はなくなりました。 getOptionをアップデートにマージすることはお勧めしません。より良い解決策はありますか?

このページは役に立ちましたか?
0 / 5 - 0 評価