echarts 甘特图_百度echarts实现项目甘特图ajax+wcf

前端通过ajax访问后台WCF服务，写在getdata函数里方便以后定时调用，采用ajax无刷新更新数据

aspx：

var myChart = echarts.init(document.getElementById('main'));

GetData();

function GetData()

{

var IP = '';//获取Webconfig里的服务器IP

//通过Ajax获取数据

$.ajax({

type: "POST",

async: false,

contentType: 'application/json; charset=utf-8',

url: "http://" + IP + ":6165/AjaxService.svc/Project?Date_S=2019-08-01&Date_E=2019-08-01" + "&jsoncallback=?",//0:生产1：测试

dataType: "json", //返回数据形式为json

success: function (result) {

var obj = JSON.parse(result);

if (result) {

var project = obj.project;

var plan_s = obj.plan_start;

var plan_e = obj.plan_end;

var real_s = obj.real_start;

var real_e = obj.real_end;

console.log(project);

console.log(plan_s);

console.log(plan_e);

console.log(real_s);

console.log(real_e);

option = {

title: {

text: '项目实施进度表',

left: 10

},

legend: {

y: 'bottom',

data: ['计划时间', '实际时间'] //修改的地方1

},

grid: {

containLabel: true,

left: 20

},

xAxis: {

type: 'time'

},

yAxis: {

//data: ['任务一', '任务二', '任务三', '任务四', '任务五', '任务六', '任务七']

data: project

},

tooltip: {

trigger: 'axis',

formatter: function(params) {

var res = params[0].name + ""

var date0 = params[0].data;

var date1 = params[1].data;

var date2 = params[2].data;

var date3 = params[3].data;

//date0 = date0.getFullYear() + "-" + (date0.getMonth() + 1) + "-" + date0.getDate();

//date1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate();

//date2 = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();

//date3 = date3.getFullYear() + "-" + (date3.getMonth() + 1) + "-" + date3.getDate();

//res += params[0].seriesName + "~" + params[1].seriesName + ":" + date0 + "~" + date1 + ""

//res += params[2].seriesName + "~" + params[3].seriesName + ":" + date2 + "~" + date3 + ""

res += "计划：" + date0 + "~" + date1 + ""

res += "实际：" + date2 + "~" + date3 + ""

return res;

}

},

series: [

{

name: '计划开始时间',

type: 'bar',

stack: 'test1',

itemStyle: {

normal: {

color: 'rgba(0,0,0,0)'

}

},

//data: [

// "2015/09/2",

// "2015/09/15",

// "2015/09/15",

// "2015/10/03",

// "2015/10/04",

// "2015/10/05",

// "2015/10/06"

//]

data:plan_s

},

{

name: '计划时间',

type: 'bar',

stack: 'test1',

//修改地方2

itemStyle: {

normal: {

color: '#F98563'

}

},

//data: [

// "2015/09/12",

// "2015/09/20",

// "2015/09/25",

// "2015/10/05",

// "2015/10/07",

// "2015/10/09",

// "2015/10/12"

//]

data: plan_e

},

{

name: '实际开始时间',

type: 'bar',

stack: 'test2',

itemStyle: {

normal: {

color: 'rgba(0,0,0,0)'

}

},

//data: [

// "2015/09/2",

// "2015/09/15",

// "2015/09/15",

// "2015/10/03",

// "2015/10/04",

// "2015/10/05",

// "2015/10/06"

//]

data: real_s

},

{

name: '实际时间',

type: 'bar',

stack: 'test2',

//修改地方3

itemStyle: {

normal: {

color: '#A2E068'

}

},

//data: [

// "2015/09/6",

// "2015/09/20",

// "2015/09/27",

// "2015/10/11",

// "2015/10/16",

// "2015/10/18",

// "2015/10/17"

//]

data: real_e

}

]

};

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

//myChart.on('click', function (param) {

// //alert(param.value);

// var iata = param.value.toString().split(",")[3];

// var icao = param.value.toString().split(",")[4];

// if ("undefined".indexOf(param.value) < 0) {

// window.open("FlightInfo.aspx?IATA=" + iata + "&ICAO=" + icao, 'noname', 'height=300,width=' + (window.screen.availWidth - 20) + ',left=0, top=200,fullscreen=no,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no');

// }

//});

}

},

error: function (XMLHttpRequest, textStatus, errorThrown) {

alert(XMLHttpRequest.responseText);

alert(XMLHttpRequest.status);

alert(XMLHttpRequest.readyState);

alert(textStatus);

}

});

}

WCF服务：

///

/// 项目甘特图

///

///

///

[OperationContract]

[WebInvoke(Method = "GET", BodyStyle = WebMessageBodyStyle.WrappedRequest, ResponseFormat = WebMessageFormat.Json, RequestFormat = WebMessageFormat.Json)]

public string Project(string Date_S,string Date_E)

{

//List legendList = new List();

List projectList = new List();

List plan_startList = new List();

List plan_endList = new List();

List real_startList = new List();

List real_endList = new List();

设置legend数组

//legendList.Add("计划时间");

//legendList.Add("实际时间");

ClassLibrary1.SqlHelper sqlDB = new ClassLibrary1.SqlHelper();

DataTable dt = sqlDB.GetProject(Date_S, Date_E);

//设置数据

for (int i = 0; i < dt.Rows.Count; i++)

{

projectList.Add(dt.Rows[i]["Name"].ToString());

plan_startList.Add(Convert.ToDateTime(dt.Rows[i]["PlanStartDate"]).ToString("yyyy-MM-dd"));

plan_endList.Add(Convert.ToDateTime(dt.Rows[i]["PlanEndDate"]).ToString("yyyy-MM-dd"));

real_startList.Add(Convert.ToDateTime(dt.Rows[i]["RealStartDate"]).ToString("yyyy-MM-dd"));

real_endList.Add(Convert.ToDateTime(dt.Rows[i]["RealEndDate"]).ToString("yyyy-MM-dd"));

}

var newObj = new

{

project = projectList,

plan_start = plan_startList,

plan_end = plan_endList,

real_start = real_startList,

real_end = real_endList

};

return Newtonsoft.Json.JsonConvert.SerializeObject(newObj);

}

效果如下图：