echarts 动态线图addData 数据问题

saintzag 发布于 2014/04/10 13:56
阅读 18K+
收藏 1

@Kener-林峰 你好,想跟你请教个问题:我现在想利用echarts实现类似股票走势图效果。

准备:给定x轴坐标值,代表一天的 24小时

xAxis: [
            {
                  type: 'category',
                  boundaryGap: false,
                  data : ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11'
                        , '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
            }
       ]

目标:从坐标[0,0]开始每3秒钟增加一个点,从队列尾部加点,不删除头部数据。

        // 动态数据接口 addData
        myChart.addData([[0, // 系列索引
        Math.round(Math.random() * 1000), // 新增数据
        false, // 新增数据是否从队列头部插入
        true // 是否增加队列长度,false则自定删除原有数据,队头插入删队尾,队尾插入删队头
        ]]
        );

问题:这里的 Math.round(Math.random() * 1000), // 新增数据 代表y轴的值,当addData的时候,x轴不知道如何指定,默认的是和xAxis:data 一一对应的,所以3秒钟add一次的话,24个点72秒图形就绘制完了。

我现在想要自己指定x轴坐标和y轴坐标,令xAxis:data中的值每个点代表一个小时,所以每3秒钟add一次的话,x轴的一个间隔应该add 1200个点。请问这个在echarts中如何实现呢?

或者有更好的方法实现 股票实时走势图,能给一个思路或者例子吗?


加载中
0
Kener-林峰
Kener-林峰

{self} addData 单组数据: 
{number} seriesIdx 
{number | Object} data 
{boolean=} isHead 
{boolean=} dataGrow 
{string=} additionData 
多组数据添加: 
{Array} params
动态数据接口,try this (Line & Bar) » try this (Scatter & K) » try this (Pie & Radar) » 
seriesIdx 系列索引 
data 增加数据 
isHead 是否队头加入,默认,不指定或false时为队尾插入 
dataGrow 是否增长数据队列长度,默认,不指定或false时移出目标数组对位数据 
additionData 是否增加类目轴(饼图为图例)数据,附加操作同isHead和dataGrow 
多组数据添加时参数为: 
params == [[seriesIdx, data, isHead, dataGrow, additionData], [...]]

saintzag
saintzag
hi,Kener-林峰,这个问题我还有点疑问,谢谢帮忙解答。
0
saintzag
saintzag

引用来自“Kener-林峰”的评论

{self} addData 单组数据: 
{number} seriesIdx 
{number | Object} data 
{boolean=} isHead 
{boolean=} dataGrow 
{string=} additionData 
多组数据添加: 
{Array} params
动态数据接口,try this (Line & Bar) » try this (Scatter & K) » try this (Pie & Radar) » 
seriesIdx 系列索引 
data 增加数据 
isHead 是否队头加入,默认,不指定或false时为队尾插入 
dataGrow 是否增长数据队列长度,默认,不指定或false时移出目标数组对位数据 
additionData 是否增加类目轴(饼图为图例)数据,附加操作同isHead和dataGrow 
多组数据添加时参数为: 
params == [[seriesIdx, data, isHead, dataGrow, additionData], [...]]

hi,Kener-林峰,我试着使用additionData这个参数。该参数作用是增加类目轴。而我现在的目的是要固定类目轴,0-23 24小时这样。同时我需要在addData的时候指定二维坐标[x,y]这样。现在使用这个动态接口发现只能动态指定y轴值,而x轴的值无法同时指定,而是默认和xAxis:data中定义的值自动对应了。
想知道一下echarts中在addData的时候能否给定二维坐标[x,y],x轴的值通过计算给定,而不是默认和xAxis:data的数据一一对应。
刘前台
大神我想问下,addData的动画效果,如果我一次添加多条数据进去,感觉会卡。有办法解决吗?
c
chenwen666
我也遇到这个问题,不知道楼主解决没有,很希望提供解决方案
Kener-林峰
Kener-林峰
那就不用addData了,直接重新setOption就好,性能一样的,注意setOption有第二个参数,可以灵活运用
返回顶部
顶部