New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

appendData()调用方式有限制么 #7625

Closed
foryl opened this Issue Jan 26, 2018 · 7 comments

Comments

Projects
None yet
6 participants
@foryl

foryl commented Jan 26, 2018

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
                }]
            }

Other comments [其他信息]

@pissang

This comment has been minimized.

Contributor

pissang commented Jan 26, 2018

appendData后不要setOptionsetOption 是全量更新

@foryl

This comment has been minimized.

foryl commented Jan 26, 2018

去掉setOption是一样的

@Truantboy

This comment has been minimized.

Truantboy commented Feb 2, 2018

遇到同样的问题,appendData之后,数据更改但是图像没有渲染
myChart.setOption(myChart.getOption())
这么执行之后新的数据才在图中出现,但这肯定不是解决方法。

@100pah

This comment has been minimized.

Member

100pah commented Feb 2, 2018

总数据量有多大?

@foryl

This comment has been minimized.

foryl commented Feb 2, 2018

400K吧

@100pah 100pah closed this in 2b9b7da Feb 25, 2018

@LIHAO520

This comment has been minimized.

LIHAO520 commented Sep 4, 2018

你好,你现在的这个问题解决了吗?我想请教一个问题,seriesIndex这个序列号指的是每一个轨迹的序列号吗?比如我有100辆车,我需要给这100辆车添加数据轨迹,要写100个序列号吗?这个data是你获取到的数据,在哪里限制了data的分批动态加载,除了这个定时请求,希望回复一下

@ding-hai

This comment has been minimized.

ding-hai commented Oct 21, 2018

遇到同样的问题,appendData之后,数据更改但是图像没有渲染
myChart.setOption(myChart.getOption())
这么执行之后新的数据才在图中出现,但这肯定不是解决方法。

同样的问题,官方的文档写的垃圾死了

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment