百度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: [23, 45, 23, 11, 222, 234, 12, 34, 37, 50, 23, 45, 23, 11, 222]
            }          
        ]
    };
    //第三步 使用剛指定的配置項和數據顯示圖表。
  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(1);
    for (int i = 1; i <=15; i++)
    {
        listData.Add(datetimes.AddDays(-i).ToString("yyyy-MM-dd"));
    }
    listData.Reverse();
    var aa = new int[] { 23, 45, 23, 11, 222, 234, 12, 34, 37, 50, 23, 45, 23, 11, 222 };
    var data = new DateList()
    {
        datetime = listData,
        ordernumber = aa,
    };
    return Json(new{status=1,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 == 1) {
            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: 400, name: '搜索引擎' },
                    { value: 335, name: '直接訪問' },
                    { value: 310, name: '郵件營銷' },
                    { value: 274, name: '聯盟廣告' },
                    { value: 235, name: '視頻廣告' }
                ]
            }
        ]
    });

---

---

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