微信好友分析之展示好友信息


             點擊我前往Github查看源代碼

上一篇完成對數據的采集,現在我們來對數據分析和展示

我們將用到百度的echarts,官網為http://echarts.baidu.com/

男女比列分析

   在friden類中Sex屬性表示性別,1表示男性,2表示女性,還有些用戶沒有填寫用0表示

首先構建數據庫上下文對象

WeChartContex DataBase = new WeChartContex();

接下來創建Action來分析了

  public ActionResult AnalyseForSex()
        {
     
            int ManCount = DataBase.Fridens.Where(f => f.Sex == 1).Count();
            int WoManCount = DataBase.Fridens.Where(f => f.Sex == 2).Count();
            int OthersCount = DataBase.Fridens.Where(f => f.Sex == 0).Count();
            ViewData["man"] = ManCount;
            ViewData["woman"] = WoManCount;
            ViewData["other"] = OthersCount;
            return View();
        }

先統計各個性別好友的數量,把數據交給視圖,現在來完成視圖

<input type="text" value="@ViewData["man"]" id="man" style="display:none" />
<input type="text" value="@ViewData["woman"]" id="woman" style="display:none" />
<input type="text" value="@ViewData["other"]" id="other" style="display:none" />
  <!-- 為ECharts准備一個具備大小(寬高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script src="~/Scripts/echarts.min.js"></script>
<script type="text/javascript">
    window.onload = function () {
        var manvalue=$("#man").val();
        var womanvalue=$("#woman").val();
        var OTERVALUE=$("#other").val();
        var myChart = echarts.init(document.getElementById('main'));
        option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: ['', '', '其他']
            },
            series: [
                {
                    name: '訪問來源',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        { value:manvalue,name: '' },
                        { value: womanvalue, name: '' },
                        { value: OTERVALUE, name: '其他' },
                      
                    ]
                }
            ]
              
        };
        myChart.setOption(option);
    }
</script>

注意需要引用echarts.min.js,我們來看看效果

分析好友的地域分布

創建Action

 

 public ActionResult AnalyseforProvince()
        {
            return View();
        }

 

  還有一個提供身份信息的Action

 public ActionResult Province()
        {
            string sql = "select province as name, count(*) as value from Friends group by province";
          List<Province> list=  DataBase.Database.SqlQuery<Province>(sql).ToList();
          return Json(list);
        }

這里有個Province類來承接數據庫查詢到的數據

 public class Province
    {
        public string name { get; set; }
        public int value { get; set; }
    }

接下來完善view

<div id="main" style="width:1200px;height:800px;"></div>

<script src="~/Scripts/echarts.min.js"></script>
<script src="~/Scripts/china.js"></script>
 <!-- 為ECharts准備一個具備大小(寬高)的Dom -->
<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<script>
    var chart = echarts.init(document.getElementById('main'));
   
    $.ajax({
        type: "post",
        url: "../DataAnalyse/Province",
        success: function (msg)
        {
            var server = [{
                name: 'number',
                type: 'map',
                map: 'china',
                data: msg
            }]
            option = {
                title: {
                    text: '好友分布',
                    subtext: '',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['人數']
                },
                visualMap: {
                    min: 0,
                    max: 50,
                    left: 'left',
                    top: 'bottom',
                    text: ['', ''],           // 文本,默認為數值文本
                    calculable: true
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        dataView: { readOnly: false },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                series: [{
                    name: '人數',
                    type: 'map',
                    map: 'china',
                    data:msg
                }]
            };
            chart.setOption(option);
        }
    })
  
</script>

NOTE:不但要引用echarts.min.js還要引用china.js

看看效果

 

 

完工了!!!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM