ECharts 初识（基于MVC+jQuery+Angularjs实现的Demo）

一、背景：

我们这行做web开发的，很多时候都需要做数据统计报表，现在我所使用的是来自百度团队的ECharts。官方网址：http://echarts.baidu.com/

我们知道，很多时候我们需要一些吸引眼球的能力。先上一张稍微有一点点炫的图给大家看看。

二、代码栗子

1.在页面直接使用静态数据进行显示

步骤：

（1）先建一个空的MVC项目，并将它命名为EChartsDemo

（2）再建一个空的控制器HomeController，并创建一个Index视图

 1 namespace EChartsDemo.Controllers
 2 {
 3     public class HomeController : Controller
 4     {
 5         /// <summary>
 6         /// 首页--柱状图（使用静态数据）
 7         /// </summary>
 8         /// <returns></returns>
 9         public ActionResult Index()
10         {
11             return View();
12         }
13     }
14 }

HomeController.cs

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset="utf-8">
 4     <title>ECharts</title>
 5 </head>
 6 <body>
 7     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
 8     <div id="main" style="height: 400px"></div>
 9 
10     <!-- ECharts单文件引入 -->
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