百度EChart3初体验

由于项目需要在首页搞一个订单数量的走势图，经过多方查找，体验，感觉ECharts不错，封装的很细，我们只需要看自己需要那种类型的图表，搞定好自己的json数据就OK。至于说如何体现出来，官网的教程很详细。大家可以去看下。大概了解下用法就OK。

百度ECharts 3：http://echarts.baidu.com/index.html

其实还有很多，可以到官网中找。

下面是我进行操作的步奏，大家可以看下，做个参考。

ECharts初体验—01...

需要到官网下载最新的版本的js文件(完整版)，其实只有一个，但是你要想出来一些好看的效果就应该把主题也下载好。

地址：http://echarts.baidu.com/download.html

其实只需要4步就OK。

1：划分一块区域用来显示图形；

2：初始化echart插件；

3：填充option中的数据data;

4：加载，装配数据到echart。

这样就OK了。其实最难的不是使用，而是如何将这个插件和自己的后台联系起来，比如数据应该展示那些，如何将数据json化之后传递过来。如何实现异步等……

ECharts初体验—02...

下面是MVC中一个简单的页面,只是为了将图表先展示出来。

---

 /// <summary>
 /// 折线图
 /// </summary>
 /// <returns></returns>
 public ActionResult Index()
 {
     return View();
 }

---

 <h2>Index</h2>

 <div id="main" style="width: 600px;height:400px;"></div>
 @*引人外部JS文件，下面的vintage,dark是主题。*@
 <script src="~/Scripts/echarts/echarts.js"></script>
 <script src="~/Scripts/echarts/vintage.js"></script>
 <script src="~/Scripts/echarts/dark.js"></script>
 <script>
     //第一步；
     var myChart = echarts.init(document.getElementById('main'), 'dark');  //这就样
     //第二步；
   var  option = {
         title: {
             text: '堆叠区域图'
         },
       //气泡提示框，呈现更详细的数据。
         tooltip: {
             trigger: 'axis'
         },
       //图例，表述数据和图表的关联
         legend: {
             data: ['邮件营销']
         },
       //辅助工具箱，如添加标线，框选缩放.
         toolbox: {
             feature: {
                 saveAsImage: {}
             }
         },
       //用于定义直角系的布局。
         grid: {
             left: '3%',
             right: '4%',
             bottom: '3%',
             containLabel: true
         },
       //坐标系中的X轴--类目录
         xAxis: [
             {
                 type: 'category',
                 boundaryGap: false,
                 data: ["2016-10-12", "2016-10-13", "2016-10-14", "2016-10-15", "2016-10-16", "2016-10-17", "2016-10-18", "2016-10-19", "2016-10-20", "2016-10-21", "2016-10-22", "2016-10-23", "2016-10-24", "2016-10-25", "2016-10-26"]
             }
         ],
       //坐标系中的Y轴--数据值
         yAxis: [
             {
                 type: 'value'
             }
         ],
       //数据列表，一个图表可能包含多个系列，每一个系列可能包含多个数据。格式为json的形式。
         series: [
             {
                 name: '邮件营销',
                 type: 'line',
                 stack: '总量',
                 areaStyle: { normal: {} },
                 label: {
                     normal: {
                         show: true,
                         position: 'top'
                     }
                 },
                 data: [, , , , , , , , , , , , , , ]
             }
         ]
     };
     //第三步 使用刚指定的配置项和数据显示图表。
   myChart.setOption(option);
 </script>

---

其中的每一步都有解释，每一个名词都有各自的意义，大家可以了解下。至于每一个data，都是使用静态的json，后面会从后台传递数据。下面是这个的效果。

ECharts初体验—03...

其实上面的数据都是静态的，很好的实现。但是对于我们实际的项目中都是从数据库中取到的数据，不可能是静态的，此时我们就需要将其json化，进行一定的转换。把数据从后面传递到前台，在进行操作。

dataList类

---

 public class DateList
 {

     public IList<string> datetime { get; set; }

     public IList<int> ordernumber { get; set; }
 }

---

控制器Controller

---

 [HttpGet]
 public ActionResult ZhiXian()
 {
     return View();
 }
 [HttpPost, ActionName("ZhiXian")]
 public ActionResult ZhiXianPost()
 {
     var listData = new List<string>();
     var datetimes = DateTime.Now.AddDays();
     for (int i = ; i <=; i++)
     {
         listData.Add(datetimes.AddDays(-i).ToString("yyyy-MM-dd"));
     }
     listData.Reverse();
     var aa = new int[] { , , , , , , , , , , , , , ,  };
     var data = new DateList()
     {
         datetime = listData,
         ordernumber = aa,
     };
     return Json(new{status=,result=data});
 } 

---

视图View

---

 <h2>ZhiXian</h2>
 <div id="main" style="width: 800px;height:400px;"></div>
 @*引人外部JS文件*@
 <script src="~/Scripts/echarts/echarts.js"></script>
 <script src="~/Scripts/jquery-2.1.4.js"></script>
 <script src="~/Scripts/echarts/vintage.js"></script>
 <script src="~/Scripts/echarts/roma.js"></script>
 <script>
     // 基于准备好的dom，初始化echarts实例
     var myChart = echarts.init(document.getElementById('main'), 'roma');  //这就
     $.post("/Home/ZhiXian", function (response) {
         if (response.status == ) {
             console.log(response.result.datetime);
             console.log(response.result.ordernumber);
             var option = {
                 title: {
                     text: '近10天订单数量分析图'
                 },
                 //气泡提示框，呈现更详细的数据。
                 tooltip: {
                     trigger: 'axis'
                 },
                 //图例，表述数据和图表的关联
                 legend: {
                     data: ['订单总量']
                 },
                 //辅助工具箱，如添加标线，框选缩放.
                 toolbox: {
                     feature: {
                         saveAsImage: {}
                     }
                 },
                 //用于定义直角系的布局。
                 grid: {
                     left: '3%',
                     right: '4%',
                     bottom: '3%',
                     containLabel: true
                 },
                 //坐标系中的X轴--类目录
                 xAxis: [
                     {
                         type: 'category',
                         boundaryGap: false,
                         data: response.result.datetime
                     }
                 ],
                 //坐标系中的Y轴--数据值
                 yAxis: [
                     {
                         type: 'value'
                     }
                 ],
                 //数据列表，一个图表可能包含多个系列，每一个系列可能包含多个数据。格式为json的形式。
                 series: [
                     {
                         name: '订单总量',
                         type: 'line',
                         stack: '总量',
                         label: {
                             normal: {
                                 show: true,
                                 position: 'top'
                             }
                         },
                         areaStyle: { normal: {} },
                         data: response.result.ordernumber
                     }
                 ]
             };
             myChart.clear();
             myChart.hideLoading();
             //// 使用刚指定的配置项和数据显示图表。
             myChart.setOption(option);
         } else {
             alert("图表请求不成功，请重新请求。");
         }
     });
 </script>

---

效果如下：

我们可以发现颜色和第二个的不一样，这个就是我们使用了主题，这个在获取dom元素的时候标记的。如下所示。

下面是一个饼状图的主要option,其余的不变；

---

 myChart.setOption({
         series: [
             {
                 name: '访问来源',
                 type: 'pie',
                 radius: '55%',
                 data: [
                     { value: , name: '搜索引擎' },
                     { value: , name: '直接访问' },
                     { value: , name: '邮件营销' },
                     { value: , name: '联盟广告' },
                     { value: , name: '视频广告' }
                 ]
             }
         ]
     });

---

---

我一直相信，只要我一直走，就一定可以到达。虽然我不知道要到那里去...