前段时间 领导要求完成一个项目进度的图形，一个项目下面又分成不同的阶段，各阶段又不是固定死的，都是动态生成的，关键是还必须要显示时间进度，在一个只有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>