Skip to content
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 · 11 comments
Closed

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

foryl opened this issue Jan 26, 2018 · 11 comments

Comments

@foryl
Copy link

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
Copy link
Contributor

pissang commented Jan 26, 2018

appendData后不要setOptionsetOption 是全量更新

@foryl
Copy link
Author

foryl commented Jan 26, 2018

去掉setOption是一样的

@Truantboy
Copy link

Truantboy commented Feb 2, 2018

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

@100pah
Copy link
Member

100pah commented Feb 2, 2018

总数据量有多大?

@foryl
Copy link
Author

foryl commented Feb 2, 2018

400K吧

@100pah 100pah closed this as completed in 2b9b7da Feb 25, 2018
@LIHAO520
Copy link

LIHAO520 commented Sep 4, 2018

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

@ding-hai
Copy link

ding-hai commented Oct 21, 2018

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

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

@buhichan
Copy link

buhichan commented Jan 23, 2019

如果新数据超出了现在的轴的话, 貌似还需要调用一次 myChart.resize()
it seems like you need to call myChart.resize() if the new data is out of current x axis range

@JedidiahY
Copy link

JedidiahY commented Sep 17, 2019

目前想画一幅20条折线,每条折线2万个点,使用appendData,我目前调用appendData总是报undefined,无语,还有类似例子吗?

@mzy2240
Copy link

mzy2240 commented Apr 27, 2020

折线图情况下验证可用。可能要注意seriesIndex是个string。

@chaosforfun
Copy link

chaosforfun commented Nov 17, 2021

如果新数据超出了现在的轴的话, 貌似还需要调用一次 myChart.resize() it seems like you need to call myChart.resize() if the new data is out of current x axis range

这个管用哎,厉害了.
这个文档你是从哪里找到的,我怎么没发现

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

10 participants