一个echarts折线图动态加载数据的例子

前端部分：　　

var myChart = echarts.init(document.getElementById('main'));
$.get('/home/GetEchartData', function (result) {
console.log(result);
console.log(result.names);
console.log(result.xdata);
console.log(result.ydata);
console.log(result.datas);
myChart.setOption({
title: {
text: '折线图'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
axis: 'auto',
},
//formatter: '{b0}: {c0}<br />{b1}: {c1}'//模版格式
},
legend: {
data: result.names
},
grid: {
left: '0%',
right: '0%',
bottom: '0%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'value',
//boundaryGap: true,
data: result.xdata
},
yAxis: {
type: 'value',
scale: false,
// max: 200,
// min: 0, //y轴最小值
splitNumber: 60,//y轴总共格数
boundaryGap: [0.2, 0.2], //上下留出空闲位置,百分比
data: result.ydata
},
series:result.datas
});
});

-------------------------------------------

后端实体部分：

public class JsonData
{
public List<string> names { get; set; }
/// <summary>
/// series
/// </summary>
public List< Data> datas { get; set; }
/// <summary>
/// x轴数据
/// </summary>
public List<double> xdata { get; set; }
/// <summary>
/// y轴数据
/// </summary>
public List<double> ydata { get; set; }
}

public class Data {

public string name { get; set; }
public string type { get; set; }
public string stack { get; set; }//堆叠模式, 不使用此参数使用自然折线,将此变量设置成相同,将相同的折线进行堆叠,以便区分相似数据的折线
public bool smooth { get; set; }

/// <summary>
/// series下的data
/// </summary>
public List< List<double>> data { get; set; }

}