mvc5 +ef 用百度echar实现图表教程1
呵，这个比较麻烦，网上教程很少，主要都说是后台生成Json，前台用AJAX获取数据。
即然搜不到完整的MVC5+ECHAR，那我就自己摸索吧。
.先如何实现MVC5+EF，实现Json数据。
1.先写二个表吧。用于实现图标等。
第一表是类型表，你可以取名，第一季度，第二季，来对比，很多角色的完成情况，
比如,人员1，任务？ 完成？
人员2，任务？完成？
也可以取为：2017年销售排名，
人员1：任务，完成
人员2，任务，完成，
有一个类型表，可以无限的拓展吧，我感觉。
第二个表就是角色，然后不停的是标杆，完成，标杆，完成。
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
namespace jsdhh2.Models
{
public class EcharColumn
{
public string Id { get; set; }
[Display(Name = "栏目名称")]
public string EcharColumnName { get; set; }
public string bei { get; set; }
}
}
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
namespace jsdhh2.Models
{
public class Echarone
{
[Display(Name = "图标ID")]
public int Id { get; set; }
[Display(Name = "栏目Id")]
public string EcharColmnId { get; set; }
[Display(Name = "对象名称")]
public string ObjNmae { get; set; }
[Display(Name = "任务1")]
public string TaskOne { get; set; }
[Display(Name = "完成1")]
public double TaskDondeOne { get; set; }
[Display(Name = "任务2")]
public string TaskTwo {get; set; }
public double TaskDondeTwo {get; set; }
[Display(Name = "任务3")]
public string TaskThree { get; set; }
public double TaskDondeThree { get; set; }
[Display(Name = "任务4")]
public string TaskFour{ get; set; }
public double TaskDondeFour { get; set; }
[Display(Name = "任务5")]
public string TaskFive { get; set; }
public double TaskDondeFive { get; set; }
}
}
2.然后更改上下文DAL 下面OaDALContent
using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;
using jsdhh2.Models;
namespace jsdhh2.DAL
{
public class OaDALContent : DbContext
{
public OaDALContent() : base("MyOaContent") { }
public DbSet<Menu> Menus { get; set; }
public DbSet<MenuRole> MenuRoles { get; set; }
public DbSet<CmsColumn> CmsColumns { get; set; }
public DbSet<ClubContent> ClubContents { get; set; }
public DbSet<CmsContent> CmsContents { get; set; }
public DbSet<ListCMSUser> ListCMSUsers { get; set; }
public DbSet<InfoManageUser> InfoManageUsers{ get; set; }
public DbSet<Email> Emails { get; set; }
public DbSet<Department> Departments { get; set; }
public DbSet<EcharColumn> EcharColumns { get; set; }
public DbSet<Echarone> Echarones { get; set; }
}
}
3.然后code first
生成方案
Enable-Migrations
Enable-Migrations -ContextTypeName jsdhh2.DAL.OaDALContent
update-database
搞定
看见二个code first了，真爽。下一步就将开始。
4.用基本生成控制器EcharColumn，并新增加几个栏目。
5.关于总表中的数据，我不准备用后台一个一个加了，这个不现实，也不方便，后期我想用导入导出的方式。
所以用MSSQL企业管理器，进入数据的录入。
但EcharColumnID的字段，得复制栏目表了。我刚才新建的ID为20170606125925当月营销
注意看，我二个ID哟，就是二个栏目，名字用张三2来区分。
6.新建一个带基架 的控制器Echar，虽然不使用，可他大部份生成了，我改起方便呀。
11.我们先进行简单的布局。
在改后台index方法，左边读出所有的栏目，便于点击时，右边出相应的图表。
然后先以读出数据为主测试
// GET: Echarones
public async Task<ActionResult> Index()
{ ///读出所有的栏目,便于在前台读出来写在li中。要是没有栏目肯定报错在前台
ViewBag.drolistmenu = db.EcharColumns;
///初始化分页
//赋值回传
return View(await db.Echarones.ToListAsync());
}
前台
@model IEnumerable<jsdhh2.Models.Echarone>
@{
ViewBag.Title = "Index";
}
<div class="dhhheight1 col-md-12 col-xs-12"></div>
<!--start 左 -->
<div class="col-md-3">
@using (Html.BeginForm("indexList", "CmsContents", new { @class = "form-inline" }, FormMethod.Post))
{ <div class="dhhheight1 col-md-12 col-xs-12">.</div>
<div class="form-inline dhhbootom">
<div class="form-group">
<div class="input-group col-md-12">
@Html.TextBox("SearchString", "", new { @class = "form-control", @Style = "display:inline" })
<span class="input-group-btn ">
<input id="btnSearch" class="btn btn btn-primary" type="submit" value="搜索">
</span>
</div>
</div>
</div>
}
.
<div class="box box-solid">
<div class="box-header with-border">
<h3 class="box-title">文章中心</h3>
<div class="box-tools">
<button type="button" class="btn btn-box-tool" data-widget="collapse">
<i class="fa fa-minus"></i>
</button>
</div>
</div>
<div class="box-body no-padding" style="display: block;">
<ul class="nav nav-pills nav-stacked">
@foreach (jsdhh2.Models.EcharColumn data1 in (ViewBag.drolistmenu as IEnumerable<jsdhh2.Models.EcharColumn>
))
{
<li> <a href="~/Echarones/Index?SeachColumnString=@data1.Id"><i class="fa fa-circle-o"></i> @data1.EcharColumnName</a></li>
}
</ul>
</div>
<!-- /.box-body -->
</div>
</div>
<!--start 右 -->
<div class="col-md-9 col-xs-12 pull-right">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
文章列表
<small>文章千万篇，我只取三千~</small>
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
<li class="active">Here</li>
</ol>
</section>
<!--end Content Header (Page header) -->
<!-- Main content -->
<section class="content">
<h2>Index</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.EcharColmnId)
</th>
<th>
@Html.DisplayNameFor(model => model.ObjNmae)
</th>
<th>
@Html.DisplayNameFor(model => model.TaskOne)
</th>
<th>
@Html.DisplayNameFor(model => model.TaskDondeOne)
</th>
<th>
@Html.DisplayNameFor(model => model.TaskTwo)
</th>
<th>
@Html.DisplayNameFor(model => model.TaskDondeTwo)
</th>
<th>
@Html.DisplayNameFor(model => model.TaskThree)
</th>
<th>
@Html.DisplayNameFor(model => model.TaskDondeThree)
</th>
<th>
@Html.DisplayNameFor(model => model.TaskFour)
</th>
<th>
@Html.DisplayNameFor(model => model.TaskDondeFour)
</th>
<th>
@Html.DisplayNameFor(model => model.TaskFive)
</th>
<th>
@Html.DisplayNameFor(model => model.TaskDondeFive)
</th>
<th></th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.EcharColmnId)
</td>
<td>
@Html.DisplayFor(modelItem => item.ObjNmae)
</td>
<td>
@Html.DisplayFor(modelItem => item.TaskOne)
</td>
<td>
@Html.DisplayFor(modelItem => item.TaskDondeOne)
</td>
<td>
@Html.DisplayFor(modelItem => item.TaskTwo)
</td>
<td>
@Html.DisplayFor(modelItem => item.TaskDondeTwo)
</td>
<td>
@Html.DisplayFor(modelItem => item.TaskThree)
</td>
<td>
@Html.DisplayFor(modelItem => item.TaskDondeThree)
</td>
<td>
@Html.DisplayFor(modelItem => item.TaskFour)
</td>
<td>
@Html.DisplayFor(modelItem => item.TaskDondeFour)
</td>
<td>
@Html.DisplayFor(modelItem => item.TaskFive)
</td>
<td>
@Html.DisplayFor(modelItem => item.TaskDondeFive)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
@Html.ActionLink("Details", "Details", new { id = item.Id }) |
@Html.ActionLink("Delete", "Delete", new { id = item.Id })
</td>
</tr>
}
</table>
</section>
</div>
12,效果
