EChart 制作类似微软的 甘特图

前段时间  领导要求完成一个项目进度的图形，一个项目下面又分成不同的阶段，各阶段又不是固定死的，都是动态生成的，关键是还必须要显示时间进度，在一个只有x,y轴的坐标系中要显示，阶段类型，时间，还有各阶段完成量，还有计划和实际的进度，这个在一个二维的平面上很难完成的，最开始打算使用线图来完成，x轴为时间，y轴为计划量和实际量，各线的颜色代表各个阶段的类型，但是如果个阶段的量的单位不能统一，比如：第一类的单位是“户”，第二类的单位是“村”，那么这个在y轴的量上面根本无法进行统一的，除非对不同的量进行放大或缩小倍数。

 


正题：

这里我们使用柱状图，先上代码。

.net代码

namespace TCOA.WebSite.Page.ProjProcess
{
public partial class StatisticProjectRate : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = SJGZQKAccess.Select();
for (int j = 1; j <= dt.Rows.Count; j++)
{
string id = dt.Rows[j-1]["ID"].ToString();
DataTable dt_xxjh = SJGZQKAccess.GetXmjh(id);
DataTable dt_xmqk = ProjectInfoLogic.Get(id);

//获取title
string title = dt_xmqk.Rows[0]["XMMC"].ToString() + "  各阶段进度统计图";

//获取xAxis的其实时间点
DateTime date = DateTime.Parse(dt_xxjh.Rows[0]["QSSJ"].ToString());
for (int i = 1; i < dt_xxjh.Rows.Count; i++)
{
DateTime date1 = Convert.ToDateTime(dt_xxjh.Rows[i]["QSSJ"].ToString());
if (date >= date1)
{
date = date1;
}
}
string startDate = string.Format("{0:yyyy/MM/dd}", date);

//获取yAxis_data 、 seriesPlan_IsSee 和 seriesPlan_NotSee
List<string> yAxis_data = new List<string>();
List<int> seriesPlan_IsSee = new List<int>();
List<int> seriesPlan_NotSee = new List<int>();
for (int i = 0; i < dt_xxjh.Rows.Count; i++)
{
dt_xxjh.DefaultView.Sort = "DLID asc";
dt_xxjh = dt_xxjh.DefaultView.ToTable();
//yAxis_data
yAxis_data.Add(dt_xxjh.Rows[i]["XMZMC"].ToString());
//seriesPlan_IsSee
int days_IsSee = GetDatePan(dt_xxjh.Rows[i]["QSSJ"].ToString(), dt_xxjh.Rows[i]["ZZSJ"].ToString()) + 1;
if (days_IsSee == -1)
{
WebWindow.WriteAlert(this, title + "结束时间小于初试时间");
return;
}
seriesPlan_IsSee.Add(days_IsSee);
//seriesPlan_NotSee
int days_NotSee = GetDatePan(startDate, dt_xxjh.Rows[i]["QSSJ"].ToString());
seriesPlan_NotSee.Add(days_NotSee);
}
LineData chartData = new LineData();
chartData.title = title;
chartData.startDate = startDate;
chartData.yAxis_data = yAxis_data;
chartData.seriesPlan_IsSee = seriesPlan_IsSee;
chartData.seriesPlan_NotSee = seriesPlan_NotSee;
string s = JsonHelper.SerializeJson(chartData);

Literal1.Text = "<script type=\"text/javascript\">var chartData" + j + "=" + s + "</script>";
}
}

private int GetDatePan(string date01, string date02)
{
DateTime date1 = Convert.ToDateTime(date01);
DateTime date2 = Convert.ToDateTime(date02);
if (date1 > date2)
{
return -2;
}
TimeSpan date = date2 - date1;
int days = date.Days;
return days;
}

class LineData
{
public string startDate { get; set; }
public string title { get; set; }
public List<string> yAxis_data { get; set; }
public List<int> seriesPlan_IsSee { get; set; }
public List<int> seriesPlan_NotSee { get; set; }
public List<int> seriesFact_IsSee { get; set; }
public List<int> seriesFact_NotSee { get; set; }
}
}
}

js文件



 

引入js

<script src="../../JScript/EChart/esl.js" type="text/javascript"></script>

服务器控件

<asp:Literal ID="Literal1" runat="server"></asp:Literal>

js代码

<script type="text/javascript">
var myChart1;
var date = Date.parse(chartData1.startDate);
require.config({
paths: { 'echarts': '../../JScript/EChart/echarts', 'echarts/chart/bar': '../../JScript/EChart/echarts' }
});
require(['echarts', 'echarts/chart/bar'],
function (ec) {
if (myChart1 && myChart1.dispose) {
myChart1.dispose();
}
myChart1 = ec.init(document.getElementById('main1'));
var option = {
title: {
text: chartData1.title,
x: 'center'
},
legend: {
data: ['计划', '实际'],
x: 30
},
toolbox: {
show: true,
feature: {
mark: true,
dataView: { readOnly: false },
restore: true,
saveAsImage: true
}
},
tooltip: {
trigger: 'axis',
axisPointer: {            // 坐标轴指示器，坐标轴触发有效
type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params) {
var name;
var unit;
if (params[0][1] == '准备阶段') {
name = '户籍录入 ';
unit = ' 行';
}
else if (params[0][1] == '权属调查') {
name = '外业调查 ';
unit = ' 亩';
}
else if (params[0][1] == '一轮公示') {
name = '编制一轮图表 ';
unit = ' 组';
}
else if (params[0][1] == '二轮公示') {
name = '编制二轮图表 ';
unit = ' 组';
}
else if (params[0][1] == '资料归档') {
name = '打印证书 ';
unit = ' 本';
}
else {
name = '成果移交 ';
unit = ' ';
}
return params[2][1] + ' 总量' + params[4][0] + ' : ' + params[4][2] + unit + '<br/>'
+ params[2][1] + ' 已完成 ' + params[5][0] + ' : ' + params[5][2] + unit + '<br/>'
+ params[2][1] + ' 完成比例 ' + (Math.round((params[5][2] / params[4][2]) * 100)) + '%' + '<br/>'
+ '截至当前已用时: ' + (Math.round((params[2][2] / params[3][2]) * 100)) + '%' + '<br/>'
}
},
xAxis: [
{
type: 'value',
boundaryGap: [0, 0.01],
axisLabel: { show: true,
formatter: function (value) {
return new Date(date + (86400000) * value).Format("yyyy-MM-dd");
}
}
}
],
yAxis: [
{
type: 'category',
data: chartData1.yAxis_data
}
],
series: [
{
type: 'bar',
stack: 'fact',
barCategoryGap: '10%',
itemStyle: {
normal: {
borderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
},
emphasis: {
borderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
}
},
data: [0, 160, 67, 112, 148, 179]
},
{
type: 'bar',
stack: 'plan',
itemStyle: {
normal: {
borderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
},
emphasis: {
borderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
}
},
data: chartData1.seriesPlan_NotSee
},
{
name: '实际',
type: 'bar',
stack: 'fact',
itemStyle: {
normal: {
label: {
show: true,
position: 'right',
textStyle: {
fontSize: 16
},
formatter: function (a, b, c) {
return c;
}
}
}
},
data: [30, 5, 0, 20, 0, 0]
},
{
name: '计划',
type: 'bar',
stack: 'plan',
itemStyle: {
normal: {
label: {
show: true,
position: 'right',
textStyle: {
fontSize: 18
}
}
}
},
data: chartData1.seriesPlan_IsSee
}, {
type: 'bar',
stack: 'rew',
barWidth: '2',
itemStyle: {
normal: {
borderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
},
emphasis: {
borderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
}
},
data: [50, 70, 90, 110, 130, 200]
}, {
type: 'bar',
stack: 'rew',
barWidth: '2',
itemStyle: {
normal: {
borderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
},
emphasis: {
borderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
}
},
data: [10, 20, 0, 40, 0, 0]
}
]
};
myChart1.setOption(option);
window.onresize = myChart1.resize;
}
);
</script>