echarts timeline點擊之後 藍色的checkpoint位置不跟當前點擊的節點重合

轉載：http://www.oschina.net/question/2311467_224093


//按鈕點擊第一次加載的事件(type:類型 unit:單位 url:數據請求的action div:圖表顯示的位置)
function LoadOne(type, unit, url, div, url2) {
    var myChart = echarts.init(document.getElementById(div));
    
    var ecConfig = require('echarts/config');
    myChart.on(ecConfig.EVENT.TIMELINE_CHANGED, function (param) {
         
        TimeLineChange(param.data, myChart, type, url2);
         
    })
 
    GetData(myChart, type, unit, url);
 
}
 
//第一次加載數據的方法  接收的數據爲兩串用&符號來拼接起來的json類型的text文本 第一段爲時間軸 第二段爲xy軸的數據(key爲x軸 value爲y軸)
function GetData(myChart, type, unit, url) {
    $.ajax({
        type: "POST",
        data: { time: "", type: type },
        url: url,
        dataType: "text",
        success: function (data) {
            //定義時間軸接收數據的變量
            var value = "";
            //x和y軸接收數據變量
            var x = "";
            var y = "";
 
            var line = data.split('&')[0];
            line = $.parseJSON(line);
            var strs = data.split('&')[1];
            strs = $.parseJSON(strs);
            //時間軸數據
            $.each(line, function (i, p) {
 
                value += p + ",";
            })
            value = value.substring(0, value.length - 1);
            //x,y軸數據
            $.each(strs, function (i, p) {
 
                x += p.key + ',';
                y += p.value + ',';
            })
            x = x.substring(0, x.length - 1);
            y = y.substring(0, y.length - 1);
            //以上x y的數據都是用逗號隔開的字符串
            var option = {
                //時間軸
                timeline: {
                    type: 'number',
                    x: 80,
                    y: '5%',
                    controlPosition: 'none',
                    data: value.split(',')
 
                },
                //折線圖選項
                options: [
                    {
                        title: {
                            text: type,
                            subtext: ''
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
 
                        calculable: true,
                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: false,
                                data: x.split(',')
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value} ' + unit
                                }
                            }
                        ],
                        series: [
                            {
                                name: type,
                                type: 'line',
                                data: y.split(',')
 
                            }
                        ]
                    }]
            };
 
            // 爲echarts對象加載數據
            myChart.setOption(option, true);
        },
        error: function () {
            alert("加載出現錯誤");
        }
    });
 
}
 
//加載事後點擊時間軸的事件
function TimeLineChange(time, myChart, type, url2) {
    //alert(time);
    $.ajax({
        type: "POST",
        data: { time: time, type: type },
        url: url2,
        dataType: "text",
        success: function (data) {
            //x和y軸接收數據變量
            var x = "";
            var y = "";
            var strs = $.parseJSON(data);
 
            //x,y軸
            $.each(strs, function (i, p) {
 
                x += p.key + ',';
                y += p.value + ',';
            })
            x = x.substring(0, x.length - 1);
            y = y.substring(0, y.length - 1);
            //以上x y的數據都是用逗號隔開的字符串
            var option = myChart.getOption();
            option.xAxis[0].data = x.split(',');
            option.series[0].data = y.split(',');
            myChart.setOption(option, true);
 
        }
    })
 
}