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);
 
        }
    })
 
}

　　

转载于:https://www.cnblogs.com/xiaoxiao5ya/p/4764086.html