一、背景：
1 namespace EChartsDemo.Controllers
2 {
3 public class HomeController : Controller
4 {
5 ///
6 /// 首页--柱状图（使用静态数据）
7 ///
8 ///
9 public ActionResult Index()
10 {
11 return View();
12 }
13 }
14 }
1 DOCTYPE html>
2 <head>
3 <meta charset="utf-8">
4 <title>EChartstitle>
5 head>
6 <body>
7
8 <div id="main" style="height: 400px">div>
9
10
11 <script src="http://echarts.baidu.com/build/dist/echarts.js">script>
12
13 <script>
14 // 路径配置
15 require.config({
16 paths: {
17 echarts: ‘http://echarts.baidu.com/build/dist‘
18 }
19 });
20
21 // 使用
22 require(
23 [
24 ‘echarts‘,
25 ‘echarts/chart/bar‘ // 使用柱状图就加载bar模块，按需加载
26 ],
27 function (ec) {
28 // 基于准备好的dom，初始化echarts图表
29 var myChart = ec.init(document.getElementById(‘main‘));
30
31 var option = {
32 tooltip: {
33 show: true
34 },
35 legend: {
36 data: [‘销量‘]
37 },
38 xAxis: [
39 {
40 type: ‘category‘,
41 data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] //--①--
42 }
43 ],
44 yAxis: [
45 {
46 type: ‘value‘
47 }
48 ],
49 series: [
50 {
51 "name": "销量",
52 "type": "bar",
53 "data": [5, 20, 40, 10, 10, 20] //--②--
54 }
55 ]
56 };
57
58 // 为echarts对象加载数据
59 myChart.setOption(option);
60 }
61 );
62 script>
63 body>
运行后的效果图：
我们可以在Index.cshtml代码中的--①②--处自己学习加下数据。
对于它的使用，我们可以简单的总结为：
a.准备一个Dom --> b.引入js --> c.配置路径 --> d.动态加载图表
2.这次我们弄个饼图（MVC+jQuery），上次我们引入的是网上中的js，现在我们换成本地的js。文件需要自己到官方下载。
步骤：
（1）在Models文件夹添加两个类
1 namespace EChartsDemo.Models
2 {
3 public class PieMapViewModel
4 {
5 ///
6 /// 图例数据
7 ///
8 public List<string> LegendData { get; set; }
9
10 ///
11 /// 图表数据
12 ///
13 public List
14 }
15 }
1 namespace EChartsDemo.Models
2 {
3 public class VisitSource
4 {
5 public string value { get; set; }
6
7 public string name { get; set; }
8 }
9 }
（2）在HomeController中添加两个名为PieMap的方法
1 namespace EChartsDemo.Controllers
2 {
3 public class HomeController : Controller
4 {
5 ///
6 /// 首页--柱状图（使用静态数据）
7 ///
8 ///
9 public ActionResult Index()
10 {
11 return View();
12 }
13
14
15 ///
16 /// 饼图（jq获取动态数据）
17 ///
18 ///
19 public ActionResult PieMap()
20 {
21 return View();
22 }
23
24
25 ///
26 /// 饼图（jq获取动态数据）
27 ///
28 ///
29 [HttpPost]
30 public ActionResult PieMap(string id)
31 {
32 var pie = new PieMapViewModel()
33 {
34 LegendData = new List<string>()
35 {
36 "直接访问",
37 "邮件营销",
38 "联盟广告",
39 "视频广告",
40 "搜索引擎"
41 },
42 SeriesData = new List
43 {
44 new VisitSource() {name = "直接访问", value = "335"},
45 new VisitSource() {name = "邮件营销", value = "310"},
46 new VisitSource() {name = "联盟广告", value = "234"},
47 new VisitSource() {name = "视频广告", value = "135"},
48 new VisitSource() {name = "搜索引擎", value = "1548"}
49 }
50 };
51
52 return Json(new { status = 1, result = pie });
53 }
54 }
55 }
（3）前端代码
1
2
3 "utf-8">
4
5
6
7
8
运行后的效果图：
3.依然是这个饼图，只不过这次我们将前端换成Angularjs+jQuery的形式
（1）在HomeController内添加方法PieMapS【因为手机升级版常常在尾端加上S】
1 namespace EChartsDemo.Controllers
2 {
3 public class HomeController : Controller
4 {
5 ///
6 /// 首页--柱状图（使用静态数据）
7 ///
8 ///
9 public ActionResult Index()
10 {
11 return View();
12 }
13
14
15 ///
16 /// 饼图（jq获取动态数据）
17 ///
18 ///
19 public ActionResult PieMap()
20 {
21 return View();
22 }
23
24
25 ///
26 /// 饼图（jq获取动态数据）
27 ///
28 ///
29 [HttpPost]
30 public ActionResult PieMap(string id)
31 {
32 var pie = new PieMapViewModel()
33 {
34 LegendData = new List<string>()
35 {
36 "直接访问",
37 "邮件营销",
38 "联盟广告",
39 "视频广告",
40 "搜索引擎"
41 },
42 SeriesData = new List
43 {
44 new VisitSource() {name = "直接访问", value = "335"},
45 new VisitSource() {name = "邮件营销", value = "310"},
46 new VisitSource() {name = "联盟广告", value = "234"},
47 new VisitSource() {name = "视频广告", value = "135"},
48 new VisitSource() {name = "搜索引擎", value = "1548"}
49 }
50 };
51
52 return Json(new { status = 1, result = pie });
53 }
54
55 ///
56 /// 饼图（angularjs）
57 ///
58 ///
59 public ActionResult PieMapS()
60 {
61 return View();
62 }
63
64 }
65 }
（2）准备好视图和js文件（pieMapS.js为自定义的脚本）
DOCTYPE html>
<head>
<meta charset="utf-8">
<title>EChartstitle>
head>
<body>
<div id="main" ng-app="myApp" ng-controller="myCtrl" style="height: 400px">
div>
<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>
1 var legendData;
2 var seriesData;
3
4 var app = angular.module("myApp", []);
5
6 app.controller("myCtrl", function ($scope, $http) {
7 $http
8 .post("/Home/PieMap")
9 .success(function (response) {
10 legendData = response.result.LegendData;
11 seriesData = response.result.SeriesData;
12 })
13 .error(function () {
14 alert("系统发生异常");
15 });
16
17 // 路径配置
18 require.config({
19 paths: {
20 echarts: ‘http://echarts.baidu.com/build/dist‘
21 }
22 });
23
24 // 使用
25 require(
26 [
27 "echarts",
28 "echarts/chart/pie" // 使用饼状图就加载pie模块，按需加载
29 ],
30 function (ec) {
31 // 基于准备好的dom，初始化echarts图表
32 var myChart = ec.init($("#main")[0]);
33
34 var option = getOption();
35
36 // 为echarts对象加载数据
37 myChart.setOption(option);
38 }
39 );
40
41 });
42
43 function getOption() {
44 return {
45 title: {
46 text: ‘某站点用户访问来源‘,
47 subtext: ‘纯属虚构‘,
48 x: ‘center‘
49 },
50 tooltip: {
51 trigger: ‘item‘,
52 formatter: "{a}
{b} : {c} ({d}%)"
53 },
54 legend: {
55 orient: ‘vertical‘,
56 x: ‘left‘,
57 data: legendData
58 },
59 toolbox: {
60 show: true,
61 feature: {
62 mark: { show: true },
63 dataView: { show: true, readOnly: false },
64 magicType: {
65 show: true,
66 type: [‘pie‘, ‘funnel‘],
67 option: {
68 funnel: {
69 x: ‘25%‘,
70 width: ‘50%‘,
71 funnelAlign: ‘left‘,
72 max: 1548
73 }
74 }
75 },
76 restore: { show: true },
77 saveAsImage: { show: true }
78 }
79 },
80 calculable: true,
81 series: [
82 {
83 name: ‘访问来源‘,
84 type: ‘pie‘,
85 radius: ‘55%‘,
86 center: [‘50%‘, ‘60%‘],
87 data: seriesData
88 }
89 ]
90 };
91 }
运行后的效果图：参考上图
【注意】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
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有 
