转载：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);
}
})
}
