Incubator-echarts: appendData()调用方式有限制么

Created on 26 Jan 2018 · 10Comments · Source: apache/incubator-echarts

One-line summary [问题简述]

appendData 执行之后在页面上并没有点显示出来，但又没有报错。
代码如下：

        $.getJSON(uploadedDataUrl, function (list) {
            option = {
                progressive:200,
                backgroundColor: '#404a59',
                title: {
                    text: '工程人员足迹图',
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    },
                    subtext: '',
                    subtextStyle: {
                        fontSize: 24,
                        fontFamily: 'Microsoft YaHei',
                        color: '#FFFF00',
                        rich: {
                            a: {
                                color: '#fff',
                                fontWeight: 'normal',
                                fontSize: '25',
                                textBorderColor: '#ffff66',
                                textBorderWidth: '0.2'
                            },
                            b: {
                                color: '#FFFF00',
                                fontWeight: 'bold',
                                fontSize: '52',
                                textBorderColor: '#ffff66',
                                textBorderWidth: '0.2'
                            }
                        }
                    }
                },
                geo: {
                    map: 'china',
                    roam: true,
                    zoom: 1,
                    slient: true,
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                color: '#1c262f',
                                fontSize: 8,
                            }
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                color: "#1c262f",
                                fontSize: 16,
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#2d4455',
                            borderColor: '#1c262f'
                        },
                        emphasis: {
                            color: "#2d4455"
                        }

                    }
                },
                series: [{
                    name: '地点',
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    zlevel: 2,
                    zoom: 1,
                    rippleEffect: {
                        period: 5,
                        scale: 4,
                        brushType: 'fill'
                    },
                    dimensions: ['value'],
                    large:true,
                    label: {
                        emphasis: {
                            show: true,
                            position: 'right',
                            formatter: '{b}'
                        }
                    },
                    blendMode:'lighter',
                    symbolSize: 1,
                    itemStyle: {
                        normal: {
                            color: 'orange',
                            opacity:0.3

                        }
                    },
                    data: alldatas.location
                }]
            };
            var chart = echarts.init(document.getElementById('container'));
            chart.setOption(option);
            var clk = 0;
            setInterval(function () {
                var option = chart.getOption();
                var data0 = [];
                var myChart = echarts.init(document.getElementById('container'));
                if (clk < list.length) {
                    var date = list[clk].workDate;
                   //这里是获取数据库数据的函数，数据获取正常。
                    var data = getPunchCardLogInfo(list[clk].workDate);
                    for (var i = 0; i < data.length; i++) {
                        var item = data[i];
                        data0.push(
                            {
                                name: item.username,
                                value: [item.userLongitude, item.userLatitude]
                            }
                        );
                    }
                    option.title[0].subtext = '{a|日期}{b|' + date + '}';
                    clk += 1;
                }
                    myChart.appendData({
                        seriesIndex: 0,
                        data: data0
                    });

               chart.setOption(option);

            }, 100);
        });

Version & Environment [版本及环境]

ECharts version [ECharts 版本]: 4.0.2
Browser version [浏览器类型和版本]: 版本 63.0.3239.132（正式版本）（64 位）
OS Version [操作系统类型和版本]: Win10 专业版

Expected behaviour [期望结果]

类似这个效果，但是我要控制时间，逐渐加载
http://echarts.baidu.com/examples/editor.html?c=lines-ny

ECharts option [ECharts配置项]

            option = {
                progressive:200,
                backgroundColor: '#404a59',
                title: {
                    text: '工程人员足迹图',
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    },
                    subtext: '',
                    subtextStyle: {
                        fontSize: 24,
                        fontFamily: 'Microsoft YaHei',
                        color: '#FFFF00',
                        rich: {
                            a: {
                                color: '#fff',
                                fontWeight: 'normal',
                                fontSize: '25',
                                textBorderColor: '#ffff66',
                                textBorderWidth: '0.2'
                            },
                            b: {
                                color: '#FFFF00',
                                fontWeight: 'bold',
                                fontSize: '52',
                                textBorderColor: '#ffff66',
                                textBorderWidth: '0.2'
                            }
                        }
                    }
                },
                geo: {
                    map: 'china',
                    roam: true,
                    zoom: 1,
                    slient: true,
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                color: '#1c262f',
                                fontSize: 8,
                            }
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                color: "#1c262f",
                                fontSize: 16,
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#2d4455',
                            borderColor: '#1c262f'
                        },
                        emphasis: {
                            color: "#2d4455"
                        }

                    }
                },
                series: [{
                    name: '地点',
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    zlevel: 2,
                    zoom: 1,
                    rippleEffect: {
                        period: 5,
                        scale: 4,
                        brushType: 'fill'
                    },
                    dimensions: ['value'],
                    large:true,
                    label: {
                        emphasis: {
                            show: true,
                            position: 'right',
                            formatter: '{b}'
                        }
                    },
                    blendMode:'lighter',
                    symbolSize: 1,
                    itemStyle: {
                        normal: {
                            color: 'orange',
                            opacity:0.3

                        }
                    },
                    data: alldatas.location
                }]
            }