C#+JQuery+.Ashx+百度Echarts實現全國省市地圖和餅狀圖動態數據圖形報表的統計

在目前的一個項目中，須要用到報表表現數據，這些數據有多個維度，須要同時表現出來，同時可能會有大量數據呈現的需求，通過幾輪挑選，最終選擇了百度的echarts做爲報表基礎類庫。echarts功能強大，界面優美。因爲客戶是淘寶賣家，所以想要實現每一個月全國各個省份各自購力如何，你們能夠統計其餘的，若是GDP 人口等等。

百度echarts簡介請參考css

http://echarts.coding.io/doc/example.htmlhtml

效果圖以下：所有是動態數據jquery

JS代碼：web

<link href="assets/css/echartsHome.css" rel="stylesheet"/>
<script src="assets/js/esl.js"></script>
<script src="assets/js/codemirror.js"></script>ajax

HTML代碼：(放在中間呈現)數據庫

      
    1. 
    <div id="mapPieCharts" class="main" ></div>

EchartsJson JS裏面的代碼以下：瀏覽器

      
    001. 
    function needMap() { 
   
    002. 
    var href = location.href; 
   
    003. 
    return href.indexOf('map') != -1 
   
    004. 
    || href.indexOf('mix3') != -1 
   
    005. 
    || href.indexOf('mix5') != -1 
   
    006. 
    || href.indexOf('dataRange') != -1; 
   
    007. 
      
    008. 
    } 
   
    009. 
      
    010. 
    var fileLocation = needMap() ? 'assets/js/echarts-map' : 'assets/js/echarts'; 
   
    011. 
    require.config({ 
   
    012. 
    paths: { 
   
    013. 
    echarts: fileLocation,'echarts/assets/js/pie': fileLocation, 
   
    014. 
    'echarts/assets/js/map': fileLocation, 
   
    015. 
    } 
   
    016. 
    }); 
   
    017. 
      
    018. 
    require( 
   
    019. 
    [ 
   
    020. 
    'echarts','echarts/chart/pie',needMap() ? 'echarts/chart/map' : 'echarts' 
   
    021. 
    ], 
   
    022. 
    DrawCharts 
   
    023. 
    ); 
   
    024. 
    function DrawCharts(ec) { 
   
    025. 
    FunDraw1(ec); 
   
    026. 
    } 
   
    027. 
      
    028. 
    function FunDraw1(ec) { 
   
    029. 
    //---地圖餅狀圖 --- 
   
    030. 
    var mapChart = ec.init(document.getElementById('mapPieCharts')); 
   
    031. 
    mapChart.showLoading({text: "加載中...請等待" }); 
   
    032. 
    mapChart.hideLoading(); 
   
    033. 
    var seriesMapData; 
   
    034. 
    var seriesPieData; 
   
    035. 
    var legendData; 
   
    036. 
    $.ajax({ 
   
    037. 
    type: "post", 
   
    038. 
    async: false, //同步執行 
   
    039. 
    url: "SearchHandler.ashx?MapPieType=MapPieChart", 
   
    040. 
    dataType: "json", 
   
    041. 
    success: function (result) { 
   
    042. 
    seriesMapData = eval('(' + result.split('_')[0] + ')'); 
   
    043. 
    seriesPieData = eval('(' + result.split('_')[1] + ')'); 
   
    044. 
    legendData = eval('(' + result.split('_')[2] + ')'); 
   
    045. 
    }, 
   
    046. 
    error: function (errorMsg) { 
   
    047. 
    alert("全國各省份訂單銷售量統計數據請求失敗。"); 
   
    048. 
    } 
   
    049. 
    }); 
   
    050. 
    mapChart.setOption({ 
   
    051. 
    title: { 
   
    052. 
    text: new Date().getFullYear() + '全國各省份訂單銷售量統計（月/單）', 
   
    053. 
    subtext: '數據來自WMS統計' 
   
    054. 
    }, 
   
    055. 
    tooltip: { 
   
    056. 
    trigger: 'item' 
   
    057. 
    }, 
   
    058. 
    legend: { 
   
    059. 
    x: 'right', 
   
    060. 
    selectedMode: false, 
   
    061. 
    data: legendData 
   
    062. 
    }, 
   
    063. 
    dataRange: { 
   
    064. 
    orient: 'horizontal', 
   
    065. 
    min: 0, 
   
    066. 
    max: 200, 
   
    067. 
    text: ['購買力強', '低'], 
   
    068. 
    splitNumber: 0, 
   
    069. 
    color: ['orangered', 'yellow', 'lightskyblue'] 
   
    070. 
    }, 
   
    071. 
    animation: false, 
   
    072. 
    series: [ 
   
    073. 
    { 
   
    074. 
    name: new Date().getFullYear() + '全國各省份訂單銷售量', 
   
    075. 
    type: 'map', 
   
    076. 
    mapType: 'china', 
   
    077. 
    mapLocation: {x: 'left'}, 
   
    078. 
    selectedMode: 'multiple', 
   
    079. 
    itemStyle: { 
   
    080. 
    normal: { label: { show: true } }, 
   
    081. 
    emphasis: { label: { show: true } } 
   
    082. 
    }, 
   
    083. 
    data: seriesMapData 
   
    084. 
    }, 
   
    085. 
    { 
   
    086. 
    name: new Date().getFullYear() + '全國各省份訂單銷售量', 
   
    087. 
    type: 'pie', 
   
    088. 
    roseType: 'area', 
   
    089. 
    tooltip: { 
   
    090. 
    trigger: 'item', 
   
    091. 
    formatter: "{a} <br />{b} : {c} ({d}%)" 
   
    092. 
    }, 
   
    093. 
    center: [document.getElementById('mapPieCharts').offsetWidth - 250, 225], 
   
    094. 
    radius: [30, 120], 
   
    095. 
    data: seriesPieData 
   
    096. 
    } 
   
    097. 
    ] 
   
    098. 
    }); 
   
    099. 
      
    100. 
    }

C#代碼以下：mvc

      
    01. 
    #region// 地圖和餅狀圖組合查詢 
   
    02. 
    if (!string.IsNullOrEmpty(context.Request["MapPieType"])) 
   
    03. 
    { 
   
    04. 
    //圖例名稱 
   
    05. 
    var legend = string.Empty; 
   
    06. 
    //餅狀圖數據 省份及統計的數據 
   
    07. 
    StringBuilder sbPieData = new StringBuilder(); 
   
    08. 
    sbPieData.Append("["); 
   
    09. 
    //地圖數據 省份及統計的數據 
   
    10. 
    StringBuilder sbMapData = new StringBuilder(); 
   
    11. 
    sbMapData.Append("["); 
   
    12. 
      
    13. 
    using (PortalSearchDataContext db = new PortalSearchDataContext()) 
   
    14. 
    { 
   
    15. 
    List<SeriesMapPieData> getMapPieDataList = 
   
    16. 
    (from province in 
   
    17. 
    ( 
   
    18. 
    (from t in db.DOC_Order_Header 
   
    19. 
    where 
   
    20. 
    t.C_Address1 != "" && t.SOStatus == "99" && 
   
    21. 
    t.OrderTime >= startMonth.Date.Date && t.OrderTime 
   
    22. 
    <= DateTime.Parse(endMonth.Date.ToString("yyyy-MM-dd 23:59")) 
   
    23. 
    group t by new 
   
    24. 
    { 
   
    25. 
    t.C_Address1, 
   
    26. 
    t.OrderTime 
   
    27. 
    } into g 
   
    28. 
    select new 
   
    29. 
    { 
   
    30. 
    ProName = g.Key.C_Address1.Substring(0, 3).Replace("省", "").Replace("壯", "") 
   
    31. 
    .Replace("回", "").Replace("維", ""), 
   
    32. 
    Number = g.Count(), 
   
    33. 
    OrderTime = g.Key.OrderTime 
   
    34. 
    })) 
   
    35. 
    group province by new 
   
    36. 
    { 
   
    37. 
    province.ProName 
   
    38. 
    } into g 
   
    39. 
    orderby 
   
    40. 
    g.Sum(p => p.Number) 
   
    41. 
    select new SeriesMapPieData 
   
    42. 
    { 
   
    43. 
    name = g.Key.ProName, 
   
    44. 
    value = g.Sum(p => p.Number) 
   
    45. 
    }).ToList<SeriesMapPieData>(); 
   
    46. 
    for (int i = 0; i < getMapPieDataList.Count; i++) 
   
    47. 
    { 
   
    48. 
    sbMapData.Append("{name:'" + getMapPieDataList[i].name + "',value:" + getMapPieDataList[i].value + "},"); 
   
    49. 
    } 
   
    50. 
    //取得排名前十條的legendname數據 
   
    51. 
    List<SeriesMapPieData> legendName = 
   
    52. 
    getMapPieDataList.OrderByDescending(x => x.value).Take(10).ToList<SeriesMapPieData>(); 
   
    53. 
    for (int i = 0; i < legendName.Count(); i++) 
   
    54. 
    { 
   
    55. 
    legend += "'" + legendName[i].name + "',"; 
   
    56. 
    sbPieData.Append("{name:'" + legendName[i].name + "',value:" + legendName[i].value + "},"); 
   
    57. 
    } 
   
    58. 
    } 
   
    59. 
    var getPieData = sbMapData.ToString().TrimEnd(',') +"]_" + sbPieData.ToString().TrimEnd(',') + "]_[" + legend.TrimEnd(',') + "]"; 
   
    60. 
    context.Response.Write(getPieData.ToJson()); 
   
    61. 
    } 
   
    62. 
    #endregion 
   
    63. 
      
    64. 
    context.Response.End();