前言
最近在用Echarts做数据统计,挺不错的一个组件,挺赞的,觉得挺好玩的!!!做了一个简单的小例子。
一、官网下载
地址:http://echarts.baidu.com/echarts2/doc/doc.html
将下载好的源码放到项目中:
二、ECharts单文件引入
<script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Content/echarts-2.2.7/build/dist/echarts.js"></script>
三、为ECharts准备一个具备大小(宽高)的Dom
<div id="Item" style="height: 400px"></div>
四、JS代码
require.config({ paths: { //配置图表请求路径 注意路径与JS引入的路径的关系为JS所在的文件夹地址 echarts: '/Content/echarts-2.2.7/build/dist' } }); // 使用 require( [ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载 ], // function (ec) { var myChart = ec.init(document.getElementById('Item')); $.ajax({ type: "get", url: "/Home/GetList", data: {}, //dome没加条件 datatype: "json", success: function (data) { var Name = []; var value = []; for (var i = 0; i < data.length; i++) { Name.push(data[i].Name); value.push(data[i].value); } myChart.setOption({ title: { text: '异步数据加载示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: Name }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: value }] }); }, error: function (errorMsg) { //请求失败时执行该函数 alert("图表请求数据失败!"); } }) })
五、控制器Cotroller部分
public ActionResult GetList() { var xy = infoBLL.GetAllList(); return Json(xy, JsonRequestBehavior.AllowGet); }
六、BLL部分
[Dependency] public InfoDAL infoDAL { get; set; } public List<Info> GetAllList() { var mql = InfoSet.SelectAll(); List<Info> list = infoDAL.GetEntities(mql); return list; }
效果