asp .net MVC Echart 實現圖表實戰

1. 什麼是Echart
2. 導入Echart
3. Echart生成餅圖實戰
4. Echart生成柱狀圖實戰

什麼是Echart

Echarts–商業級數據圖表

商業級數據圖表，它是一個純JavaScript的圖標庫，兼容絕大部分的瀏覽器，底層依賴輕量級的canvas類庫ZRender，提供直觀，生動，可交互，可高度個性化定製的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫遊等特性大大增強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。

Echarts支持的圖表？

折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）

雷達圖（填充雷達圖）、和絃圖、力導向佈局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表

echarts和chart對比

echarts的優點：

1.國人開發，文檔全，便於開發和閱讀文檔。
2.圖表豐富，可以適用各種各樣的功能。

echarts的缺點：

移動端使用略卡，畢竟是PC端的東西，移植到移動端肯定多多少少有些問題吧，或許跟自己水平也有一定的關係，哎怎麼說呢。
echarts不失爲一款比較適合我們這種碼農使用的框架。
echarts就不貼代碼了。畢竟文檔很全。
chart.js優點：
1.輕量級，min版總大小50多k。
2.移動端使用比較流暢，畢竟小。
chart.js缺點：
1.功能欠缺比較多。
2.中文文檔奇缺。

導入Echart

以下兩種方式皆可

  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
  <script type="text/javascript" src="js/echarts.js"></script>

Echart生成餅圖實戰

後臺

      EnRoleEntities db = new EnRoleEntities();
      //index方法是必須的 用來呈現頁面 在index方法的頁面中通過Ajax請求Echart方法
      //如果沒有index是沒有頁面的而是會直接返回JSon數據 因爲Echart方法返回類型是json
      //不會返回視圖，只返回json數據
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult Echart()
        {
            var book = db.Books.Select(p => new { p.ID, p.Name, p.Price }).ToList();
            //注意這裏要返回JSON數據而不是view視圖 
            return Json(book, JsonRequestBehavior.AllowGet);V
        }
    }
}

前臺

 <div id="main" style="width: 600px;height:400px;"></div><!-- 爲ECharts準備一個具備大小（寬高）的Dom -->
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

@section Scripts{

    <script>
       
        $.ajax({
            url: "/books/Echart",
            type: "get",
            data: {},
            success: function (res) {
                 var arr = [];
                $.each(res, function (i, v) {
                //因爲餅圖data需要的是數組對象所有我們這裏把數據封裝成數組對象
                    var obj = {}
                    obj.name = v.Name;
                    obj.value = v.Price;
                    arr.push(obj)
                    
                })

                console.log("對象數組:" +arr)

                var myChart = echarts.init(document.getElementById('main'));
                myChart.setOption({
                  
                    series: [
                        {
                            name: '訪問來源',
                            type: 'pie',
                            radius: '55%',
                            data:  arr, 
                            //data 數據類型
                            //[{name:'數據源'}，value:{'數據源'}]
                      
                    }
                ]
                })
            }       
                    });

    </script>
}

實現效果

Echart生成柱狀圖實戰

後臺

與餅圖一樣這裏不再贅述

前臺

 $.ajax({
            url: "/books/Echart",
            type: "get",
            data: {},
            success: function (res) {
                var objs = []//用於存放名稱
                var obj1 = []//用於存放價格
                 //var arr = [];
                $.each(res, function (i, v) {
                    objs[i] = v.Name;
                    obj1[i] = v.Price;
                    
                })
                console.log("名稱:"+objs)
                    console.log("價格:"+obj1)
                 // 基於準備好的dom，初始化echarts實例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定圖表的配置項和數據
        var option = {
            title: {
                text: '第一個 ECharts 實例'
            },
            tooltip: {},
            legend: {
                data:['銷量']
            },
            xAxis: {
                data: objs
            },
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'bar',
                data: obj1
            }]
        };
 
        // 使用剛指定的配置項和數據顯示圖表。
        myChart.setOption(option);
                
            }       
                    });