mvc5 +ef 用百度echar实现图表教程2

因一篇的内容过长，接着上面mvc5 +ef 用百度echar实现图表教程1的内容.

 一进行中才发现，应该在EcarOnes表中加一栏为排序，方便以后将谁排在前面的问题。唉，郁闷死了。

再改Model，再first

 

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; }

		public int Sort { 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; }



	}
}

　　然后重新生成。

Enable-Migrations

Enable-Migrations -ContextTypeName jsdhh2.DAL.OaDALContent

update-database 

然后在企业管理器中搞个排序。

 3.下载Echars

下载完整版

 

 

然后引用到JS中。

 

然后在我的index视图中引用。

 <div id="main" class="dhhechardiv"></div>
然后dhhechardiv:{}

.dhhechardiv {
height:300px; width:80%;
}

　　

我们测试是否能完成静态的?
2.先在视图上：

@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="~/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">
	

		<div id="main" style="width: 600px;height:400px;"></div>

		 
		  
			 
				 


	
	</section>

</div>


@section Scripts {
	<script src="~/Scripts/echarts.min.js"></script>
<script type="text/javascript">
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));

	// 指定图表的配置项和数据
	var option = {
		title: {
			text: 'ECharts 入门示例'
		},
		tooltip: {},
		legend: {
			data: ['销量']
		},
		xAxis: {
			data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
		},
		yAxis: {},
		series: [{
			name: '销量',
			type: 'bar',
			data: [5, 20, 36, 10, 10, 20]
		}]
	};

	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
</script>



	
	
	}

　　显示效果