废话不多说直接讲讲今天要做的事。

利用微软爸爸的MVC框架结合百度的良心产品ECharts图表进行动态图表的生成,本文以柱状图为例。

ECharts下载以及相关文档:http://echarts.baidu.com/index.html

本文下载了源代码版本进行操作

首先在控制器里写好获取数据库中需要在图表中显示的数据,我这里返回的是Json 的数据格式

然后在前台Chars.cshtml中首先创建一个div,用于存放图表,然后在js中通过获取后台返回的数据将其转换为数组,然后给echarts调用即可

这样一个简单的柱状图表就出来了,如果想要花哨的样式可以参考官网api和样例

本文版权归作者及博客园所有,转载请注明作者及原文出处

http://www.cnblogs.com/clayzhang

ASP.NET MVC + ECharts图表案例的更多相关文章

  1. 基于ITextSharp插件在ASP.NET MVC中将图表导出为PDF

    样本: 在这个示例中,我们使用的是微软给我们提供的数据库,也就是家喻户晓的Northwind数据库.要下载Microsoft的免费样本Northwind数据库,您需要访问以下URL.下载Northwi ...

  2. asp.net MVC 过滤器使用案例:统一处理异常顺道精简代码

    重构的乐趣在于精简代码,模块化设计,解耦功能……而对异常处理的重构则刚好满足上述三个方面,下面是我的一点小心得. 一.相关的学习 在文章<精简自己20%的代码>中,讨论了异常的统一处理,并 ...

  3. ASP.NET MVC案例教程(一) 准备

    ASP.NET MVC案例教程(一) 前言 ASP.NET MVC作为微软官方的MVC解决方案,推出有一段时间了.可以说自动推出以来,一直广受关注.在经历了漫长的Preview之后,前几天终于推出了其 ...

  4. 【精品分享二】ASP.NET MVC系列精品图书高清PDF下载

    更多图书请关注:第一教育云电子书平台  http://book.1eduyun.com/ 注:本专题提供的所有的电子书下载资源均系收集于百度云,本网站(http://book.1eduyun.com/ ...

  5. C# ASP.NET MVC 之 SignalR 学习 实时数据推送显示 配合 Echarts 推送实时图表

    本文主要是我在刚开始学习 SignalR 的技术总结,网上找的学习方法和例子大多只是翻译了官方给的一个例子,并没有给出其他一些经典情况的示例,所以才有了本文总结,我在实现推送简单的数据后,就想到了如何 ...

  6. ASP.NET MVC案例教程(四)

    ASP.NET MVC案例教程(四) 前言 通过前几篇文章,我们已经能比较自如的使用ASP.NET MVC来呈现页面和数据了.但是,有一个大问题没有解决:如何处理表单数据.例如,我们将要实现的公告发布 ...

  7. ASP.NET MVC案例教程(五)

    ASP.NET MVC案例教程(四) 前言 通过前几篇文章,我们已经能比较自如的使用ASP.NET MVC来呈现页面和数据了.但是,有一个大问题没有解决:如何处理表单数据.例如,我们将要实现的公告发布 ...

  8. ASP.NET MVC案例教程(二)

    ASP.NET MVC案例教程(二) 让第一个页面跑起来 现在,我们来实现公告系统中的第一个页面——首页.它非常简单,只包括所有公告分类的列表,并且每个列表项是一个超链接.其中分类数据是用我们的Moc ...

  9. ASP.NET MVC案例教程(三)

    ASP.NET MVC案例教程(二) 让第一个页面跑起来 现在,我们来实现公告系统中的第一个页面——首页.它非常简单,只包括所有公告分类的列表,并且每个列表项是一个超链接.其中分类数据是用我们的Moc ...

随机推荐

  1. bzoj4828 [Hnoi2017]大佬

    Description 人们总是难免会碰到大佬.他们趾高气昂地谈论凡人不能理解的算法和数据结构,走到任何一个地方,大佬的气场就能让周围的人吓得瑟瑟发抖,不敢言语.你作为一个OIER,面对这样的事情非常 ...

  2. spring cloud 集成 swagger2 构建Restful APIS 说明文档

    在Pom.xml文件中引用依赖 <dependencies> <dependency> <groupId>org.springframework.cloud< ...

  3. .bind.apply() 解决 new 操作符不能用与 apply 或 call 同时使用

    背景: 小明想要用数组的形式为 Cls.func 传入多个参数,他想到了以下的写法: var a = new Cls.func.apply(null, [1, 2, 3]); 然而浏览器却报错Cls. ...

  4. C#中 Equals和= =的区别

    C#中 Equals和= =的区别 前言:最近感觉技术进步实在是太慢,一直被游戏缠身不能自拔哈哈,但是游戏打多了真的是感觉整个人浮躁的不行,所以我现在要去游戏多写代码多看书,今天在博客园中看到一个前辈 ...

  5. Kafka学习-复制

    复制 Kafka可以通过可配置的服务器数量复制每个主题分区的日志(可以为每个主题设置复制因子).这允许在集群中的服务器发生故障时自动故障转移到其他副本,因此在存在故障的情况下,消息仍然可用. 其他消息 ...

  6. 关于WannaCry病毒的见解与预防,我有话说!

    好久没写博客了,自从定性专做技术扩展服务后,已经有两年半没有正式写过博客,要不是这次WannaCry病毒的厉害程度,我也懒得去写博客,为什么呢?写技术文章吗?两年多没有研究新的技术,没有什么好写的!所 ...

  7. Ubuntu 完全卸载MySQL 重装步骤

    sudo rm /var/lib/mysql/ -R 删除mysql的数据文件   sudo rm /etc/mysql/ -R 删除mqsql的配置文件   sudo apt-get autorem ...

  8. CPU Affinity

    Reference: [1] http://www.linuxjournal.com/article/6799 Soft vs. Hard CPU Affinity There are two typ ...

  9. 用SIM900上传云端数据(原创KEKE)

    依次发送如下几个命令到SIM900A模块:   AT+CGCLASS="B" AT+CGDCONT=1,"IP","CMNET" AT+CG ...

  10. 使用Spring MVC构建REST风格WEB应用

    转自:http://fancy888.iteye.com/blog/1629120 对于运行在网络上的MIS系统而言,处理数据的是整个系统的主要任务,翻开程序我们可以看到,80%以上的代码都在处理数据 ...