关于Echarts timeline实时更新问题

#关于Echarts timeline实时更新问题

我的个人的思想：利用第一个ajax先取到所需要的时间点和第一个时间点的数据，更新到options的serise中，然后利用charts.on来监听事件，再利用ajax取出你点击的时间点的数据。注意serise中的数据事有顺序的，所以你要先初始化serise,再根据timeLineIndex.currentIndex来判断点击的时间点是第几个。

直接上代码：

function sj_echarts(lineid, span, sdbh, text, cjsj) {
var myChart = echarts.init(document.getElementById(‘cableReal_curve’));
//获取时间轴上的时间点和第一个点的数据
//sj:时间点
//sssj:实时数据
$.ajax({ type: “post”, cache: false, dataType: “json”, url: ‘realdata/ashx/RealData.ashx?type=Real_CableCurve’, data: { “lineid”: lineid, “span”: span, “sdbh”: sdbh, “cjsj”: cjsj }, beforeSend: function () { load(); }, complete: function () { disLoad(); }, success: function (datas) { debugger; var xdata_time = [];$.each(datas[0].sj, function (index, data) {
xdata_time.push(data.datatime);//时间点
})
maxstr.push(datas[0].sssj.ms);//副标题
var xdata_ms = [];//X轴
var ydata_wd = [];//y轴
var FHCS = [];//存储options
$.each(datas[0].sssj.table, function (index, data) { var color; var name = data.name; var xw = data.xw; var color = ‘#000’; if (xw == “1”) { color = “#FFFF00” } else if (xw == “2”) { color = “#00FF00” } else if (xw == “3”) { color = “#FF0000” } else if (xw == “4”) { color = “#FF0099” } else { color = “#3333CC” } var xdata_len = []; var ydata = [];$.each(data.rows, function (index, item) {
xdata_len.push(item.len);
/*这是自己项目的需要
var yval = item.wd;
var xval = item.len;
if (yval == “”) {
yval = null;
xval = parseInt(xval);
ydata.push([xval, yval]);
} else {
yval = parseFloat(yval);
xval = parseInt(xval);
ydata.push(yval);
}
*/
});
FHCS.push({ name: name, itemStyle: { normal: { color: color } }, type: “line”, data: ydata })
xdata_ms = xdata_len;
});
option = {
//timeline基本配置都写在baseoption 中
baseOption: {
timeline: {
//loop: false,
axisType: ‘category’,
show: true,
autoPlay: false,
playInterval: 5000,
x:’0%’,
width:’100%’,
data: xdata_time,
lineStyle: {
color: ‘#333’,
width: 1
},
},
grid: {
containLabel: true,
x: 25,
y: 100,
x2: 80,
y2: 65,
},
title: {
text: ‘‘,
x: “center”,
subtext: maxstr[0],
subtextStyle: {
color: “red”,
fontsize: 10
}
},
xAxis: [{
show:true,
type: ‘category’,
//axisLabel: {
// interval: 0
//formatter: function (value) {
// return value.split(“”).join(“\n”);
//}
//},
name: ”,
data: xdata_ms
}, ],
yAxis: { type: ‘value’, name: ” },
series: [
{
type: ‘line’,
},
],
tooltip: {}
},
options: []//use js push
}
for (var len = 0; len < xdata_time.length; len++) {
option.options.push({
series: {}
});
}
for (var len = 1; len < xdata_time.length; len++) {
maxstr.push();
}
var data_serise = [];
for (var len = 0; len < FHCS.length; len++)
{
data_serise.push(FHCS[len]);
}
option.options[0].series = data_serise;
myChart.setOption(option, true);
myChart.off(‘timelinechanged’);
myChart.on(‘timelinechanged’, function (timeLineIndex) {
var sj = ($(“#cableLine_cjsj”).combobox(‘getText’) + xdata_time[timeLineIndex.currentIndex]).replace(‘-‘, ”).replace(‘-‘, ”).replace(’ ‘, ”).replace(‘:’, ”).replace(‘:’, ”); var data_option = option.options[timeLineIndex.currentIndex].series if (data_option.length == null) {$.ajax({
type: “post”,
cache: false,
dataType: “json”,
url: ‘realdata/ashx/RealData.ashx?type=Real_CableCurve_re’,
data: { “lineid”: lineid, “span”: span, “sdbh”: sdbh, “sj”: sj },
beforeSend: function () {
load();
},
complete: function () {
disLoad();
},
success: function (datas) {
maxstr[timeLineIndex.currentIndex] = datas.ms;
var ydata_wd = [];
var FHCS_re = [];
$.each(datas.table, function (index, data) { var color; var name = data.name; var xw = data.xw; var color = ‘#000’; if (xw == “1”) { color = “#FFFF00” } else if (xw == “2”) { color = “#00FF00” } else if (xw == “3”) { color = “#FF0000” } else if (xw == “4”) { color = “#FF0099” } else { color = “#3333CC” } var xdata_len = []; var ydata = [];$.each(data.rows, function (index, item) {
xdata_len.push(item.len);

                                var yval = item.wd;
                                var xval = item.len;
                                if (yval == "") {
                                    yval = null;
                                    xval = parseInt(xval);
                                    ydata.push([xval, yval]);
                                } else {
                                    yval = parseFloat(yval);
                                    xval = parseInt(xval);
                                    ydata.push(yval);
                                }
                            });
                            FHCS_re.push({ name: name, itemStyle: { normal: { color: color } }, type: "line", data: ydata })
                        });
                        var data_serise2 = [];
                        for (var len = 0; len < FHCS_re.length; len++) {
                            data_serise2.push(FHCS_re[len]);
                        }
                        option.options[timeLineIndex.currentIndex].series = data_serise2;
                        option.baseOption.title.subtext = maxstr[timeLineIndex.currentIndex];
                        myChart.setOption(option);
                    }
                })
            }
            else {
                option.baseOption.title.subtext = maxstr[timeLineIndex.currentIndex];
                myChart.setOption(option);
            }
        });
    }
});

}

第一次写博客，不知道说没说清楚，如果有需要的话可以联系QQ：841020238