mvc5 +ef +adminlte 用百度echar实现图表教程3 -代码的实现部份
在上一节已实现了数据表的制作，还有显示栏目等功能。现在开始使用。
一、后台。index()方法
// GET: Echarones
//public async Task<ActionResult> Index(string SeachColumnString)
public ActionResult Index(string SeachColumnString)
{ ///读出所有的栏目,便于在前台读出来写在li中。要是没有栏目肯定报错在前台
ViewBag.drolistmenu = db.EcharColumns;
///初始化分页
///分析是否有栏目选择。没有提示返回空的
//if (string.IsNullOrEmpty(SeachColumnString))
//{
// SeachColumnString = "1";
//}
//var listdouble = from w in db.Echarones.Where(m => m.EcharColmnId == SeachColumnString)
// select w;
//return Json(listdouble, JsonRequestBehavior.AllowGet);
return View();
///
}
这个我基本全注掉了，这里的功能就是读出栏目列表，赋值给ViewBag
2.数据读取（重点）
[HttpPost]
public ActionResult GetData(string SeachColumnString)
{
///读出第一列数据，我们作为任务数，同时新List一个double列表。赋值为读出的集合
var xxx =( from a in db.Echarones.Where( m => m.EcharColmnId== SeachColumnString) select a.TaskDondeOne).ToList();
List<double> listdouble = new List<double>();
listdouble = xxx;
///读出第二列数据，我们作为完成数，同时新List一个double列表。赋值为读出的集合
var xxx3 = (from a in db.Echarones.Where(m => m.EcharColmnId == SeachColumnString) select a.TaskDondeTwo).ToList();
List<double> listdouble2 = new List<double>();
listdouble2 = xxx3;
///读出第三列数据，我们作为X轴数据，是string，同时新List一个是string列表。赋值为读出的集合
var xxx2 = (from a in db.Echarones.Where(m => m.EcharColmnId == SeachColumnString) select a.ObjNmae).ToList();
List<string> listname = new List<string>();
listname = xxx2;
///新 opt ,opt就是模型，他针对Echars中的Option中的来建的，这样可以直接SetOption,不用再前台组合Json,属性要对着前台来看
opt p = new opt();
p.text = "这是后台数据";
p.xAxis = new List<xAxis> {
new xAxis{
data=xxx2 }
};
p.series = new List<series> {
new series{
name="任务",
//data=new List<int>{ 12, 23, 32, 34, 43, 45 }
data=listdouble
}
};
p.series.Add(
new series
{
name = "完成数",
data = listdouble2
});
///返回Json
return Json(p, JsonRequestBehavior.AllowGet);
}
}
///index下的图表
public class opt
{
//Text 为表的名称
public string text { get; set; }
//定义X轴
public List<xAxis> xAxis { get; set; }
//完成数和任务数的类集合
public List<series> series { get; set; }
}
public class series
{
//下面两个属性和前台的Echars相对应，名称别错了
public string name { get; set; }
public List<double> data { get; set; }
}
public class xAxis
{
public List<string> data{ get; set; }
}
3.前台。前台注意，数据初始为空，必须点一下左边的栏目，才能SETOPTION
@model IEnumerable<jsdhh2.Models.Echarone>
@{
ViewBag.Title = "Index";
}
<div class="dhhheight1 col-md-12 col-xs-12"></div>
<!--start 左 -->
<div class="col-md-3">
.
<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="#" onclick="GETDATAE(@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">
<div id="main" style="width: 100%;height:450px;"></div>
</section>
</div>
@section Scripts {
<script src="~/Scripts/echarts-all-3.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var dom = document.getElementById("main");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = '堆叠柱状图';
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['任务', '完成数']
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
xAxis: {
data: ["1", "2", "3", "4", "5", "6", "7", "8"]
},
yAxis: {},
series: [{
label: {
normal: {
show: true,
position: 'insideTop'
}
},
name: '任务',
type: 'bar',
data: [0, 0, 0, 0, 0, 0]
},
{
label: {
normal: {
show: true,
position: 'insideTop'
}
},
name: '完成数',
type: 'bar',
data: [0, 0, 0, 0, 0, 0]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
function GETDATAE(str) {
$.post('/Echarones/GetData?SeachColumnString=' + str).then(function (res) {
console.info(res);
myChart.setOption(res);
});
};
//$('#btn').click(function () {
// $.post('/Echarones/GetData').then(function (res) {
// console.info(res);
// myChart.setOption(res);
// })
//});
</script>
}
5，效果
6.说明。
在前台中，左边的栏目中使用onclick传参数
<li> <a href="#" onclick="GETDATAE(@data1.Id)" ><i class="fa fa-circle-o"></i> @data1.EcharColumnName</a></li>
然后JS中使用这个方法SetOption
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
function GETDATAE(str) {
$.post('/Echarones/GetData?SeachColumnString=' + str).then(function (res) {
console.info(res);
myChart.setOption(res);
});
};
7.最后
附上这个过多整的控制器。
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Threading.Tasks;
using System.Net;
using System.Web;
using System.Web.Mvc;
using jsdhh2.DAL;
using jsdhh2.Models;
namespace jsdhh2.Controllers
{
public class EcharonesController : Controller
{
private OaDALContent db = new OaDALContent();
// GET: Echarones
//public async Task<ActionResult> Index(string SeachColumnString)
public ActionResult Index(string SeachColumnString)
{ ///读出所有的栏目,便于在前台读出来写在li中。要是没有栏目肯定报错在前台
ViewBag.drolistmenu = db.EcharColumns;
///初始化分页
///分析是否有栏目选择。没有提示返回空的
//if (string.IsNullOrEmpty(SeachColumnString))
//{
// SeachColumnString = "1";
//}
//var listdouble = from w in db.Echarones.Where(m => m.EcharColmnId == SeachColumnString)
// select w;
//return Json(listdouble, JsonRequestBehavior.AllowGet);
return View();
///
}
// GET: Echarones/Details/5
public async Task<ActionResult> Details(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
Echarone echarone = await db.Echarones.FindAsync(id);
if (echarone == null)
{
return HttpNotFound();
}
return View(echarone);
}
// GET: Echarones/Create
public ActionResult Create()
{
return View();
}
// POST: Echarones/Create
// 为了防止“过多发布”攻击，请启用要绑定到的特定属性，有关
// 详细信息，请参阅 https://go.microsoft.com/fwlink/?LinkId=317598。
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Create([Bind(Include = "Id,EcharColmnId,ObjNmae,TaskOne,TaskDondeOne,TaskTwo,TaskDondeTwo,TaskThree,TaskDondeThree,TaskFour,TaskDondeFour,TaskFive,TaskDondeFive")] Echarone echarone)
{
if (ModelState.IsValid)
{
db.Echarones.Add(echarone);
await db.SaveChangesAsync();
return RedirectToAction("Index");
}
return View(echarone);
}
// GET: Echarones/Edit/5
public async Task<ActionResult> Edit(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
Echarone echarone = await db.Echarones.FindAsync(id);
if (echarone == null)
{
return HttpNotFound();
}
return View(echarone);
}
// POST: Echarones/Edit/5
// 为了防止“过多发布”攻击，请启用要绑定到的特定属性，有关
// 详细信息，请参阅 https://go.microsoft.com/fwlink/?LinkId=317598。
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Edit([Bind(Include = "Id,EcharColmnId,ObjNmae,TaskOne,TaskDondeOne,TaskTwo,TaskDondeTwo,TaskThree,TaskDondeThree,TaskFour,TaskDondeFour,TaskFive,TaskDondeFive")] Echarone echarone)
{
if (ModelState.IsValid)
{
db.Entry(echarone).State = EntityState.Modified;
await db.SaveChangesAsync();
return RedirectToAction("Index");
}
return View(echarone);
}
// GET: Echarones/Delete/5
public async Task<ActionResult> Delete(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
Echarone echarone = await db.Echarones.FindAsync(id);
if (echarone == null)
{
return HttpNotFound();
}
return View(echarone);
}
// POST: Echarones/Delete/5
[HttpPost, ActionName("Delete")]
[ValidateAntiForgeryToken]
public async Task<ActionResult> DeleteConfirmed(int id)
{
Echarone echarone = await db.Echarones.FindAsync(id);
db.Echarones.Remove(echarone);
await db.SaveChangesAsync();
return RedirectToAction("Index");
}
protected override void Dispose(bool disposing)
{
if (disposing)
{
db.Dispose();
}
base.Dispose(disposing);
}
[HttpPost]
public ActionResult GetData(string SeachColumnString)
{
///读出第一列数据，我们作为任务数，同时新List一个double列表。赋值为读出的集合
var xxx =( from a in db.Echarones.Where( m => m.EcharColmnId== SeachColumnString) select a.TaskDondeOne).ToList();
List<double> listdouble = new List<double>();
listdouble = xxx;
///读出第二列数据，我们作为完成数，同时新List一个double列表。赋值为读出的集合
var xxx3 = (from a in db.Echarones.Where(m => m.EcharColmnId == SeachColumnString) select a.TaskDondeTwo).ToList();
List<double> listdouble2 = new List<double>();
listdouble2 = xxx3;
///读出第三列数据，我们作为X轴数据，是string，同时新List一个是string列表。赋值为读出的集合
var xxx2 = (from a in db.Echarones.Where(m => m.EcharColmnId == SeachColumnString) select a.ObjNmae).ToList();
List<string> listname = new List<string>();
listname = xxx2;
///新 opt ,opt就是模型，他针对Echars中的Option中的来建的，这样可以直接SetOption,不用再前台组合Json,属性要对着前台来看
opt p = new opt();
p.text = "这是后台数据";
p.xAxis = new List<xAxis> {
new xAxis{
data=xxx2 }
};
p.series = new List<series> {
new series{
name="任务",
//data=new List<int>{ 12, 23, 32, 34, 43, 45 }
data=listdouble
}
};
p.series.Add(
new series
{
name = "完成数",
data = listdouble2
});
///返回Json
return Json(p, JsonRequestBehavior.AllowGet);
}
}
///index下的图表
public class opt
{
//Text 为表的名称
public string text { get; set; }
//定义X轴
public List<xAxis> xAxis { get; set; }
//完成数和任务数的类集合
public List<series> series { get; set; }
}
public class series
{
//下面两个属性和前台的Echars相对应，名称别错了
public string name { get; set; }
public List<double> data { get; set; }
}
public class xAxis
{
public List<string> data{ get; set; }
}
}
浙公网安备 33010602011771号