ECharts 初识（基于MVC+jQuery+Angularjs实现的Demo）
一、背景：
namespace EChartsDemo.Controllers
{
public class HomeController : Controller
{
/// <summary>
/// 首页--柱状图（使用静态数据）
/// </summary>
/// <returns></returns>
public ActionResult Index()
{
return View();
}
}
}
HomeController.cs
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height: 400px"></div> <!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script> <script>
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
}); // 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main')); var option = {
tooltip: {
show: true
},
legend: {
data: ['销量']
},
xAxis: [
{
type: 'category',
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] //--①--
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
"name": "销量",
"type": "bar",
"data": [5, 20, 40, 10, 10, 20] //--②--
}
]
}; // 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>
Index.cshtml
运行后的效果图：
我们可以在Index.cshtml代码中的--①②--处自己学习加下数据。
对于它的使用，我们可以简单的总结为：
a.准备一个Dom --> b.引入js --> c.配置路径 --> d.动态加载图表
2.这次我们弄个饼图（MVC+jQuery），上次我们引入的是网上中的js，现在我们换成本地的js。文件需要自己到官方下载。
步骤：
（1）在Models文件夹添加两个类
namespace EChartsDemo.Models
{
public class PieMapViewModel
{
/// <summary>
/// 图例数据
/// </summary>
public List<string> LegendData { get; set; } /// <summary>
/// 图表数据
/// </summary>
public List<VisitSource> SeriesData { get; set; }
}
}
PieMapViewModel
namespace EChartsDemo.Models
{
public class VisitSource
{
public string value { get; set; } public string name { get; set; }
}
}
VisitSource
（2）在HomeController中添加两个名为PieMap的方法
namespace EChartsDemo.Controllers
{
public class HomeController : Controller
{
/// <summary>
/// 首页--柱状图（使用静态数据）
/// </summary>
/// <returns></returns>
public ActionResult Index()
{
return View();
} /// <summary>
/// 饼图（jq获取动态数据）
/// </summary>
/// <returns></returns>
public ActionResult PieMap()
{
return View();
} /// <summary>
/// 饼图（jq获取动态数据）
/// </summary>
/// <returns></returns>
[HttpPost]
public ActionResult PieMap(string id)
{
var pie = new PieMapViewModel()
{
LegendData = new List<string>()
{
"直接访问",
"邮件营销",
"联盟广告",
"视频广告",
"搜索引擎"
},
SeriesData = new List<VisitSource>()
{
new VisitSource() {name = "直接访问", value = ""},
new VisitSource() {name = "邮件营销", value = ""},
new VisitSource() {name = "联盟广告", value = ""},
new VisitSource() {name = "视频广告", value = ""},
new VisitSource() {name = "搜索引擎", value = ""}
}
}; return Json(new { status = , result = pie });
}
}
}
HomeController.cs
（3）前端代码
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height: 800px"></div> <!-- ECharts单文件引入 -->
@*<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>*@
<script src="~/assets/echarts/build/source/echarts.js"></script> <script src="~/assets/jquery-2.1.4.js"></script> <script>
$.post("/Home/PieMap", { id: '' }, function (response, status) {
// 路径配置
require.config({
paths: {
echarts: '/assets/echarts/build/source'
}
}); // 使用
require(
[
'echarts',
'echarts/chart/pie' // 使用饼状图就加载pie模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init($("#main")[]); var option = {
title: {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
//data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
data: response.result.LegendData
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max:
}
}
},
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: response.result.SeriesData
//data: [
// { value: 335, name: '直接访问' },
// { value: 310, name: '邮件营销' },
// { value: 234, name: '联盟广告' },
// { value: 135, name: '视频广告' },
// { value: 1548, name: '搜索引擎' }
//]
}
]
}; // 为echarts对象加载数据
myChart.setOption(option);
}
);
}); </script>
</body>
PieMap.cshtml
运行后的效果图：
3.依然是这个饼图，只不过这次我们将前端换成Angularjs+jQuery的形式
（1）在HomeController内添加方法PieMapS【因为手机升级版常常在尾端加上S】
namespace EChartsDemo.Controllers
{
public class HomeController : Controller
{
/// <summary>
/// 首页--柱状图（使用静态数据）
/// </summary>
/// <returns></returns>
public ActionResult Index()
{
return View();
} /// <summary>
/// 饼图（jq获取动态数据）
/// </summary>
/// <returns></returns>
public ActionResult PieMap()
{
return View();
} /// <summary>
/// 饼图（jq获取动态数据）
/// </summary>
/// <returns></returns>
[HttpPost]
public ActionResult PieMap(string id)
{
var pie = new PieMapViewModel()
{
LegendData = new List<string>()
{
"直接访问",
"邮件营销",
"联盟广告",
"视频广告",
"搜索引擎"
},
SeriesData = new List<VisitSource>()
{
new VisitSource() {name = "直接访问", value = ""},
new VisitSource() {name = "邮件营销", value = ""},
new VisitSource() {name = "联盟广告", value = ""},
new VisitSource() {name = "视频广告", value = ""},
new VisitSource() {name = "搜索引擎", value = ""}
}
}; return Json(new { status = , result = pie });
} /// <summary>
/// 饼图（angularjs）
/// </summary>
/// <returns></returns>
public ActionResult PieMapS()
{
return View();
} }
}
HomeController.cs
（2）准备好视图和js文件（pieMapS.js为自定义的脚本）
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" ng-app="myApp" ng-controller="myCtrl" style="height: 400px"> </div> <!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/assets/scripts/pieMapS.js"></script> </body>
PieMapS.cshtml
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope, $http) {
$http
.post("/Home/PieMap")
.success(function (response) {
// 路径配置
require.config({
paths: {
echarts: "/assets/echarts/build/source"
}
});
// 使用
require(
[
"echarts",
"echarts/chart/pie" // 使用饼状图就加载pie模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init($("#main")[0]);
var option = getOption(response);
// 为echarts对象加载数据
myChart.setOption(option);
}
);
})
.error(function () {
alert("系统发生异常");
});
});
function getOption(response) {
return {
title: {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data: response.result.LegendData
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: response.result.SeriesData
}
]
};
}
pieMapS.js
运行后的效果图：参考上图
【注意】js 的路径配置；
如果没有显示出对应图形，可能是漏加载对应模块（"echarts/chart/pie"：表示饼图；'echarts/chart/bar'：表示柱状图；具体参考官方文档）；
获取Dom时不要写成 $("#main")，$("#main")[0] 才等同于 document.getElementById('main')；
一切以官方文档为基准：http://echarts.baidu.com/doc/doc.html
Demo下载：http://files.cnblogs.com/files/liqingwen/EChartsDemo.7z
ECharts 初识（基于MVC+jQuery+Angularjs实现的Demo）的更多相关文章
- AngularJS基于MVC的复杂操作案例
AngularJS基于MVC的复杂操作案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
- 【JAVA】基于MVC架构Java技术荟萃案例演练
基于JAVA-MVC技术的顾客管理项目案例总结 作者 白宁超 2016年6月9日22:47:08 阅读前瞻:本文源于对javaweb相关技术和资料汇总,涉及大量javaweb基础技术诸如:Servle ...
- [转]Spring3 MVC + jQuery easyUI 做的ajax版本用户管理
原文地址:http://www.iteye.com/topic/1081739 上周写了篇基于spring3.0.5 mvc 简单用户管理实例 ( http://www.iteye.com/topic ...
- ASP.NET MVC掉过的坑_MVC初识及MVC应用程序结构
APS.Net MVC 浅谈[转] 来自MSDN 点击访问 MVC 理论结构 模型-视图-控制器 (MVC) 体系结构模式将应用程序分成三个主要组件:模型.视图和控制器. ASP.NET MVC 框架 ...
- 试读《基于MVC的JavaScript Web富应用开发》— 不一样的JavaScript
前言 <基于MVC的JavaScript Web富应用开发>是ItEye在7月份发起试读的书.下载了试读的章节,发现只有全本的开始到第二章,第一章很简洁明了地讲述了JavaScript的历 ...
- 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法（转载） IEnumerable,ICollection,IList接口问题 不吹不擂，你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理
服务器文档下载zip格式 刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...
- Spring MVC -- MVC设计模式(演示4个基于MVC框架的案例)
对于简单的Java Web项目,我们的项目仅仅包含几个jsp页面,由于项目比较小,我们通常可以通过链接方式进行jsp页面间的跳转. 但是如果是一个中型或者大型的项目,上面那种方式就会带来许多维护困难, ...
- iOS基于MVC的项目重构总结
关于MVC的争论 关于MVC的争论已经有很多,对此我的观点是:对于iOS开发中的绝大部分场景来说,MVC本身是没有问题的,你认为的MVC的问题,一定是你自己理解的问题(资深架构师请自动忽略本文). 行 ...
- Arctext.js - 基于 CSS3 & jQuery 的文本弯曲效果
Arctext.js 是基于 Lettering.js 的文本旋转插件,根据设置的旋转半径准确计算每个字母的旋转弧度并均匀分布.虽然 CSS3 也能够实现字符旋转效果,但是要让安排每个字母都沿着弯曲路 ...
随机推荐
- 【小程序分享篇 二 】web在线踢人小程序，维持用户只能在一个台电脑持登录状态
最近离职了, 突然记起来还一个小功能没做, 想想也挺简单,留下代码和思路给同事做个参考. 换工作心里挺忐忑, 对未来也充满了憧憬与担忧.(虽然已是老人, 换了N次工作了,但每次心里都和忐忑). 写写代 ...
- C#异步编程(一)
异步编程简介 前言 本人学习.Net两年有余,是第一次写博客,虽然写的很认真,当毕竟是第一次,肯定会有很多不足之处, 希望大家照顾照顾新人,有错误之处可以指出来,我会虚心接受的. 何谓异步 与同步相对 ...
- TODO：即将开发的第一个小程序
TODO:即将开发的第一个小程序 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验.个人理解小程序是寄宿在微信平台上的一个前端框架,具有跨平台功能, ...
- Android ViewPager打造3D画廊
本文已授权微信公众号:鸿洋(hongyangAndroid)在微信公众号平台原创首发. 网上有很多关于使用Gallery来打造3D画廊的博客,但是在关于Gallery的官方说法中表明: This cl ...
- C#+HtmlAgilityPack+XPath带你采集数据(以采集天气数据为例子)
第一次接触HtmlAgilityPack是在5年前,一些意外,让我从技术部门临时调到销售部门,负责建立一些流程和寻找潜在客户,最后在阿里巴巴找到了很多客户信息,非常全面,刚开始是手动复制到Excel, ...
- EntityFramework Core 1.1是如何创建DbContext实例的呢？
前言 上一篇我们简单讲述了在EF Core1.1中如何进行迁移,本文我们来讲讲EF Core1.1中那些不为人知的事,细抠细节,从我做起. 显式创建DbContext实例 通过带OnConfiguri ...
- 简记用ArcGIS处理某项目需求中数据的步骤
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1. 背景 项目需求涉及如下几个步骤: a.矢量化 b.获取范围内要素 ...
- [转]Patch文件结构详解
N久不来 于是不知道扔在哪儿于是放这里先 如果你觉得碍事的话 帮我扔到合适的版块去.. 导读这是一篇说明文 它介绍了标准冒险岛更新文件(*.patch;*.exe)的格式文章的最后附了一段C#的参考代 ...
- Flyweight(享元模式)
import java.util.Hashtable; /** * 享元模式 * @author TMAC-J * 享元模式一般和工厂模式一起使用,但此处为了更好说明,只用享元模式 * 定义:享元模式 ...
- jQuery 的选择器常用的元素查找方法
jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...