1 首先在頁面引用Echarts 3.0 檔案

2 在控制器寫返回型別為jsonlist的方法
public List GetChildDataReDesign(Guid? pId, string SysName, string begindate, string enddate)
{
List LevelOne = context.Organizations.Where(a => a.ParentId == pId).ToList();
if (LevelOne.Count == 0) return null;
DateTime begin = new DateTime();
DateTime end = new DateTime();
//預設查詢一月之內資料
if (string.IsNullOrEmpty(enddate) && string.IsNullOrEmpty(begindate))
{ end = DateTime.Now.Date; begin = end.Date.AddMonths(-1); }
if (!string.IsNullOrEmpty(enddate) && string.IsNullOrEmpty(begindate))
{ end = DateTime.Parse(enddate); begin = new DateTime(2016, 1, 1); }
if (string.IsNullOrEmpty(enddate) && !string.IsNullOrEmpty(begindate))
{ end = DateTime.Now.Date; begin = DateTime.Parse(begindate); }
if (!string.IsNullOrEmpty(enddate) && !string.IsNullOrEmpty(begindate))
{ end = DateTime.Parse(enddate); begin = DateTime.Parse(begindate); }
end = end.AddDays(1);
var queryP = (from l in context.ResourceAccess
join b in context.Users on l.UserCode equals b.Name
where l.CreateTime >= begin && l.CreateTime < end && l.SystemCode == SysName
select new
{
Id = l.Id,
UserName = b.Id.ToString() != null ? b.Id.ToString() : null,
OrgId = b.OrganizationIds
}).ToList();
List list = new List();
List TempOrg = new List();
foreach (var s in LevelOne)
{
if (children.Count > 0) children.RemoveAll(a => true);
//if (TempOrg.Count>0) TempOrg.RemoveAll(a => true);
TempOrg = (GetChildDataCircle(s.Id));
TempOrg.Add(s);
//Lambda表示式多表查詢
//var Lambda= queryP.Join(TempOrg.Where(m => m.Name == “資料庫”), p => p.CategoryId, q => q.ID,
//(a, b) => new { a.Title, a.UnitPrice, a.CategoryId, b.ID, b.Name });
// 說明：
// Join()方法的呼叫物件類似於在SQL語句中第一張表的表名
// 而Join()方法的第一個形參是第二張表表名的Where條件
// Join()方法的第二和第三個引數分別表示第一張表與第二張表的關聯欄位
// Join()方法的第四個引數表示從兩表中需要獲取的欄位，(a, b)分別表示第一張表和第二張表
int count = queryP.AsEnumerable().Where(o => o.OrgId.Length > 40).Join(TempOrg.AsEnumerable(), a => a.OrgId.ToUpper().Substring(37, 36), b => b.Id.ToString().ToUpper(), (aa, bb) => new { aa }).Count();

            //var Result1 = (from o in queryP
            //               from d in TempOrg
            //               where o.OrgId.Length > 40 && d.Id.ToString().ToUpper() == o.OrgId.ToUpper().Substring(37, 36)
            //               select o).ToList();
            list.Add(new PieModel(count, s.Name, s.Id.ToString()));
        }
        list.RemoveAll(a => a.value == 0);
        return list;
    }
 

2 在CSHTML頁面處理資料，並繪圖
頁面首先要有一個id 為main的 div盒子，才能初始化。
zTreeOnClick 是樹狀選單點選事件，點選節點 右邊顯示Echarts餅圖。
這個餅圖可以實現二級資料鑽取功能
var myChart = echarts.init(document.getElementById(‘main’));
function zTreeOnClick(event, treeId, treeNode) {
var id = treeNode.id
//alert(id)
var str = (“#d11”).val();  
            var str1 =

(“#d22”).val();
var ss1 = (“#sel”).val();  
            var Name = new Array();  
            var myChart = echarts.init(document.getElementById(‘main’));.ajax({
url: “/Report/GetOrgMoudleByGuid”, //請求的url地址
dataType: “json”, //返回格式為json
async: true, //請求是否非同步，預設為非同步，這也是ajax重要特性
data: {
“pId”: id, //引數值
“SysName”:ss1,
“begindate”:str,
“enddate”:str1,
type: “GET”, //請求方式
},
success: function (data) {
//data = JSON.parse(data);
var obj1 = eval(data)
for (var i = 0; i < obj1.length; i++) {
Name.push(obj1[i].name);
}
//alert(Name);
myChart.setOption({
title: {
text: treeNode.name + ’ 訪問情況統計’,
subtext: ‘資料由ZK提供’,
x: ‘center’
},
tooltip: {
trigger: ‘item’,
formatter: “{a}
{b} : {c} ({d}%)”
},
legend: {
orient: ‘vertical’,
left: ‘left’,
data: Name
},
series: [
{
name: ‘訪問來源’,
type: ‘pie’,
radius: ‘55%’,
center: [‘50%’, ‘60%’],
data: obj1,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: ‘rgba(0, 0, 0, 0.5)’
}
}
}
]
})

                var Name1 = new Array();
                var obj2
                myChart.on('click', function (parmas) {
                    //alert(obj1[parmas.dataIndex].Id)
                    var str2 = $("#d11").val();
                    var str11 = $("#d22").val();
                    var ss11 = $("#sel").val();
                    $.ajax({
                        url: "/Report/GetOrgMoudleByGuid",    //請求的url地址
                        dataType: "json",   //返回格式為json
                        async: true, //請求是否非同步，預設為非同步，這也是ajax重要特性
                        data: {
                            "pId": obj1[parmas.dataIndex].Id,    //引數值
                            "SysName": ss11,
                            "begindate": str2,
                            "enddate": str11,
                            type: "GET",   //請求方式
                        },
                        success: function (detail) {
                            if (detail == null) return;


                            obj2 = eval(detail)
                            for (var i = 0; i < obj2.length; i++) {
                                Name1.push(obj2[i].name);
                            }
                            if (Name1.length <= 0) return;
                            myChart.setOption({
                                title: {
                                    text: parmas.name + ' 訪問情況統計',
                                    subtext: '資料由ZK提供',
                                    x: 'center'
                                },
                                tooltip: {
                                    trigger: 'item',
                                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                                },
                                legend: {
                                    orient: 'vertical',
                                    left: 'left',
                                    data: Name1
                                },
                                series: [
                                    {
                                        name: '訪問來源',
                                        type: 'pie',
                                        radius: '55%',
                                        center: ['50%', '60%'],
                                        data: obj2,
                                        itemStyle: {
                                            emphasis: {
                                                shadowBlur: 10,
                                                shadowOffsetX: 0,
                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                            }
                                        }
                                    }
                                ]
                            });
                            myChart.off('click');

                        }
                    });


                })
            }

        });
    };
    執行圖：
    ![執行圖：](https://img-blog.csdn.net/20160603090203127)