Echart动态显示K线图-bug版

k.js
$(function(){
        var myChart=echarts.init(document.getElementById('main'));
        var oData='';
        //三十天起始值
        var start=0;
        var end=30;
        var newData='';

        //时间戳日期转换
        function getTime(time){
            console.log(time);
            var times ='';
            var date = new Date(time);
            Y = date.getFullYear() + '-';
            M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
            D = date.getDate() + ' ';
            h = date.getHours() + ':';
            m = date.getMinutes() + ':';
            s = date.getSeconds();
            console.log(Y+M+D+h+m+s);
            times=Y+M+D+h+m+s;
            return times;
        }


        //获取数组一定的值
        function getArr(arr,first,last){
                console.log(last);
                if(last >= arr.length){start = 0;end = 30;console.log(11111111);};
                var oArr=[];
                for(var i = first;i < last;i++){
                        oArr.push(arr[i]);
                    };
                return oArr;
            }
        
        //数据分割函数；
        function splitData(rawData) {

            var categoryData = [];
            var values = [];
            var volumns = [];
            for (var i = 0; i < rawData.length; i++) {
                var orgtime= rawData[i][0];
                dataTime = getTime(orgtime);
                console.log("orgtime"+rawData[i])
                categoryData.push(dataTime);
                var value=[];
                value.push(rawData[i][1],rawData[i][2],rawData[i][3],rawData[i][4]);
                values.push(value);
                volumns.push(rawData[i][5])

                
            }
            return {
                categoryData: categoryData,
                values: values,
                volumns:volumns
            };
        };
        //计算ma5 ma10 ....
        function calculateMA(dayCount, data) {
            oValues=getArr(data.values,start,end);
            
            //console.log(data.values.length);
            var result = [];
            //console.log(data);
            for (var i = start, len = oValues.length; i < (len + start); i++) {
                if (i < dayCount) {
                    result.push('-');
                    continue;
                }
                var sum = 0;
                for (var j = 0; j < dayCount; j++) {
                    
                    var count = i - j;
                    //console.log(count);
                    count = data.values[count][1];
                    sum += parseFloat(count);
                }
                result.push(+(sum / dayCount).toFixed(3));
            }
            return result;
        };
        //返回函数
        function dataBack(obj){
                var obj = getArr(obj,start,end)//obj.slice(start,end);  
                //console.log(obj.length);
                return obj;         
            }
            
        $.ajax({
            type:"GET",
            url:"http://api.bitkk.com/data/v1/kline?market=btc_qc",
            cacke:false,
            async:false,
            dataType:"json",
            success:function (datas,textStatus,jqXHR) {
                var datajson = datas['data'];
                var market = datas['symbol'];
                //console.log(datajson);
               // console.log(typeof (datajson));
                //获取前三十天数据;
                data=splitData(datajson);

                myChart.setOption(option = {
                    backgroundColor: '#eee',
                    animation: false,
                    legend: {
                        bottom: 10,
                        left: 'center',
                        data: [market, 'MA5', 'MA10', 'MA20', 'MA30']
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'line'
                        }
                    },
                    toolbox: {
                        feature: {
                            dataZoom: {
                                yAxisIndex: false
                            },
                            brush: {
                                type: ['lineX', 'clear']
                            }
                        }
                    },

                    grid: [
                        {
                            left: '10%',
                            right: '8%',
                            height: '50%'
                        },
                        {
                            left: '10%',
                            right: '8%',
                            top: '63%',
                            height: '16%'
                        }
                    ],
                    xAxis: [
                        {
                            type: 'category',
                            data: dataBack(data.categoryData),
                            scale: true,
                            boundaryGap : false,
                            axisLine: {onZero: false},
                            splitLine: {show: false},
                            splitNumber: 20,
                            min: 'dataMin',
                            max: 'dataMax'
                        },
                        {
                            type: 'category',
                            gridIndex: 1,
                            data: dataBack(data.categoryData),
                            scale: true,
                            boundaryGap : false,
                            axisLine: {onZero: false},
                            axisTick: {show: false},
                            splitLine: {show: false},
                            axisLabel: {show: false},
                            splitNumber: 20,
                            min: 'dataMin',
                            max: 'dataMax'
                        }
                    ],
                    yAxis: [
                        {
                            scale: true,
                            splitArea: {
                                show: true
                            }
                        },
                        {
                            scale: true,
                            gridIndex: 1,
                            splitNumber: 2,
                            axisLabel: {show: false},
                            axisLine: {show: false},
                            axisTick: {show: false},
                            splitLine: {show: false}
                        }
                    ],

                    series: [
                        {
                            name: market,
                            type: 'candlestick',
                            data: dataBack(data.values),
                            itemStyle: {
                                normal: {
                                    borderColor: null,
                                    borderColor0: null
                                }
                            },
                            tooltip: {
                                formatter: function (param) {
                                    var param = param[0];
                                    return [
                                        'Date: ' + param.name + '<hr size=1 style="margin: 3px 0">',
                                        '开: ' + param.data[0] + '<br/>',
                                        '高: ' + param.data[1] + '<br/>',
                                        '低: ' + param.data[2] + '<br/>',
                                        '收: ' + param.data[3] + '<br/>'
                                    ].join('');
                                }
                            }
                        },
                        {
                            name: 'MA5',
                            type: 'line',
                            data: calculateMA(5, data),
                            smooth: true,
                            lineStyle: {
                                normal: {opacity: 0.5}
                            }
                        },
                        {
                            name: 'MA10',
                            type: 'line',
                            data: calculateMA(10, data),
                            smooth: true,
                            lineStyle: {
                                normal: {opacity: 0.5}
                            }
                        },
                        {
                            name: 'MA20',
                            type: 'line',
                            data: calculateMA(20, data),
                            smooth: true,
                            lineStyle: {
                                normal: {opacity: 0.5}
                            }
                        },
                        {
                            name: 'MA30',
                            type: 'line',
                            data: calculateMA(30, data),
                            smooth: true,
                            lineStyle: {
                                normal: {opacity: 0.5}
                            }
                        },
                        {
                            name: '交易量',
                            type: 'bar',
                            xAxisIndex: 1,
                            yAxisIndex: 1,
                            data: dataBack(data.volumns)//volumns
                        }
                    ]
                }, true);

                setInterval(function(){

                    start++;
                    end++;
                    myChart.setOption({
                        xAxis: [
                            {
                                type: 'category',
                                data: dataBack(data.categoryData)//data.categoryData[start,end],
                            }

                        ],
                        series: [
                            {
                                name: market,
                                data: dataBack(data.values)
                            },
                            {
                                name: 'MA5',
                                data: calculateMA(5, data)
                            },
                            {
                                name: 'MA10',
                                data: calculateMA(10, data)
                            },
                            {
                                name: 'MA20',
                                data: calculateMA(20, data)
                            },
                            {
                                name: 'MA30',
                                data: calculateMA(30, data)
                            },
                            {
                                name: '交易量',
                                data: dataBack(data.volumns)//data.volumns[start,end]
                            }
                        ]

                    });
                },5000)
                //使用 option
                //myChart.setOption(option);
            }
        });

    })

k.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>BTCK线图</title>
<script src="js/jQuery v3.1.1.js"></script>
<script src="js/echarts.js"></script>
<script src="js/k.js"></script>
</head>

<body>
<div id="main" style="width:1000px;height:800px;"></div>
</body>
</html>