ASP.NET MVC5+EF6+EasyUI 后台管理系統（67）-MVC與ECharts

系列目錄

ECharts 特性介紹

ECharts，一個純 Javascript 的圖表庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的 Canvas 類庫 ZRender，提供直觀，生動，可交互，可高度個性化定制的數據可視化圖表。

ECharts 3 中更是加入了更多豐富的交互功能以及更多的可視化效果，並且對移動端做了深度的優化。

豐富的圖表類型

ECharts 提供了常規的折線圖，柱狀圖，散點圖，餅圖，K線圖，用於統計的盒形圖，用於地理數據可視化的地圖，熱力圖，線圖，用於關系數據可視化的關系圖，treemap，多維數據可視化的平行坐標，還有用於 BI 的漏斗圖，儀表盤，並且支持圖與圖之間的混搭。

你可以在下載界面下載包含所有圖表的構建文件，如果只是需要其中一兩個圖表，又嫌包含所有圖表的構建文件太大，也可以在在線構建中選擇需要的圖表類型后自定義構建。

前言：

居然在大百度搜索不到ASP.NET MVC與ECharts的結合使用！好吧....

ECharts提供健全的幫助文檔，本節只演示其JSON的格式，MVC返回符合EChart適合的格式來動態顯示報表的展現。

ECharts的Json格式對於初學者來說是比較復雜的。其中包括多種形式，我們可以從下面Json格式看出，這只是一個簡單的柱狀圖

但是復雜的圖形，其中幾個變化都離不開這種格式

var option = {
            title: {
                text: 'ECharts 入門示例'
            },
            tooltip: {},
            legend: {
                data:['銷量']
            },
            xAxis: {
                data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
            },
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

 

開始

1.下載插件

我這里下載的是完整的組件JS，下載成功並復制到項目下

或者你需要更多的主題，那么需要下載CSS

 

2.入門

使用必須引入下載的JS與主題樣式（除非你不想要主題）

<script src="@Url.Content("~/Scripts/echarts.min.js")"></script>

  <!-- 為ECharts准備一個具備大小（寬高）的Dom -->
<div id="main"></div>

報表將展現在ID為main的DIV內

優先初始化報表的對象，寫在$(function(){ });內

 var myChart = echarts.init(document.getElementById('main'));

3.柱狀圖

我這里演示商品的售價和成本價的對比！代碼可以下載58節代碼來一起制作58節（包含了一張商品價格表），或者到文章結尾直接下載本節代碼！

利用EasyUI分頁動態顯示。當用戶點擊下一頁時候刷新ECharts數據

所以我們必須在Datagrid加載成功時進行刷新

添加EasyUI加載成功的方法

 onLoadSuccess: function (data) {
                var grid = $('#List');
                var options = grid.datagrid('options');
                var m_page = options.pageNumber;
                var m_rows = options.pageSize;
                var m_sort = options.sortName;
                var m_order = options.sortOrder
                $.post("@Url.Action("GetOptionByBarChart")", { page: m_page, rows: m_rows, order: m_order, sort: m_sort }, function (option) {
                    // 使用剛指定的配置項和數據顯示圖表。
                    myChart.setOption(option);
                });
            },

獲得當前頁碼，頁數，排序等屬性到后台數據庫查詢數據

hmyChart.setOption(option); 加載報表從后台獲得的Json數據

根據ECahrts的Json格式獲得對應的Json數據

包含的data其實是個List,所以們必須在返回的數據中序列化其數據格式，當然你返回的數據必須都包含以上屬性

后台方法：

 public JsonResult GetOptionByBarChart(GridPager pager, string queryStr)
        {
            List<Spl_ProductModel> list = m_BLL.GetList(ref pager, queryStr); List<decimal?> costPrice = new List<decimal?>(); list.ForEach(a => costPrice.Add(a.CostPrice)); List<decimal?> price = new List<decimal?>(); list.ForEach(a => price.Add(a.Price)); List<string> names= new List<string>(); list.ForEach(a=> names.Add(a. Name)); List<ChartSeriesModel> seriesList = new List<ChartSeriesModel>(); ChartSeriesModel series1 = new ChartSeriesModel() { name = "成本價", type = "bar", data = costPrice }; ChartSeriesModel series2 = new ChartSeriesModel() { name = "零售價", type = "bar", data = price }; seriesList.Add(series1); seriesList.Add(series2); var option= new { title= new{text= "成本價零售價對照表" }, tooltip= new{}, legend = new { data = "成本價零售價對照表" }, xAxis= new{ data= names}, yAxis= new{}, series = seriesList }; return Json(option); }

4.運行

數據正確我們直接得出效果

5.總結

本節沒有過多的解析，大家下載源碼一看便知

其實其他報表大同小異（如：hightcharts），我們只要返回了其正確的JSon格式，就能展示報表

同理我們可以看到餅圖的數據

參考資料：http://echarts.baidu.com/demo.html

官方網站：http://echarts.baidu.com/index.html

API文檔：http://echarts.baidu.com/api.html#echarts

本節示例代碼下載   訪問密碼 69fd

代碼中修改Index.cshtml代碼：

 

@{
    ViewBag.Title = "主頁";
    Layout = "~/Views/Shared/_Index_Layout.cshtml";

}
<script src="~/Scripts/echarts.min.js"></script>
  <!-- 為ECharts准備一個具備大小（寬高）的Dom -->
<div id="main"></div>


<table id="List"></table>
<div id="modalwindow" class="easyui-window" data-options="modal:true,closed:true,minimizable:false,shadow:false"></div>
<script type="text/javascript">
    $(function () {
        $('#List').datagrid({
            url: '@Url.Action("GetList")',
            width: SetGridWidthSub(10),
            methord: 'post',
            height: $(window).height()/2-30,
            fitColumns: true,
            sortName: 'CreateTime',
            sortOrder: 'desc',
            idField: 'Id',
            pageSize: 15,
            pageList: [15, 20, 30, 40, 50],
            pagination: true,
            striped: true, //奇偶行是否區分
            singleSelect: true,//單選模式
            remoteFilter:true,
            //rownumbers: true,//行號
            onLoadSuccess: function (data) {
                var grid = $('#List');
                var options = grid.datagrid('options');
                var m_page = options.pageNumber;
                var m_rows = options.pageSize;
                var m_sort = options.sortName;
                var m_order = options.sortOrder
                $.post("@Url.Action("GetOptionByBarChart")", { page: m_page, rows: m_rows, order: m_order, sort: m_sort }, function (option) {
                    // 使用剛指定的配置項和數據顯示圖表。
                    myChart.setOption(option);
                });
            },
            columns: [[
                { field: 'Id', title: 'Id', width: 80,hidden:true},
                { field: 'Name', title: '產品名稱', width: 80, sortable: true },
                { field: 'Code', title: '產品代碼', width: 80, sortable: true },
                { field: 'Price', title: '產品價格', width: 80, sortable: true },
                { field: 'Color', title: '產品顏色', width: 80, sortable: true },
                { field: 'Number', title: '產品數量', width: 80, sortable: true },
                {
                    field: 'CategoryId', title: '類別', width: 80, sortable: true, formatter: function (value, row, index) {
                        return row.ProductCategory;
                    }
                },
                { field: 'ProductCategory', title: '類別', width: 80, sortable: true,hidden:true },
                { field: 'CreateTime', title: 'CreateTime', width: 80, sortable: true },
                { field: 'CreateBy', title: 'CreateBy', width: 80, sortable: true }
            ]]
        });

        // 基於准備好的dom，初始化echarts實例
        $("#main").width($(window).width()-10).height($(window).height() / 2 - 10);
        var myChart = echarts.init(document.getElementById('main'));

    });
</script>